@charset "utf-8";
@import "multi.css";

/* ============================================================================
   OPEN SANS AUTOALLOTJAT  ·  /fonts/
   Substitueix el <link> a fonts.googleapis.com de la plantilla, que demanava
   Open Sans:ital,wght@0,300..800;1,300..800.

   Son fonts VARIABLES: cada fitxer cobreix tots els gruixos del 300 al 800,
   o sigui que quatre fitxers fan la feina que amb fonts estatiques en
   demanaria setze. Els unicode-range son els mateixos que serveix Google:
   el navegador nomes baixa el latin-ext si la pagina el necessita, i les
   cursives nomes si hi ha text en cursiva.

   Open Sans · SIL Open Font License 1.1 (/fonts/LICENSE-OFL.txt).
   ============================================================================ */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/open-sans-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/open-sans-latin-wght-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/open-sans-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/open-sans-latin-ext-wght-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* ============================================================================
   2026-normal-instop-30
   El 28 amb dos fitxers mes absorbits al final:
     - jquery-ui-1_8_custom.css   (tema a mida del jQuery UI 1.8)
     - select2 4.1.0-rc.0         (copia oficial del paquet, abans des de cdnjs)

   RUTES
   Les 18 url() del tema del jQuery UI apuntaven a images/ relatiu, que
   funcionava perque aquell CSS vivia a /java/jquery-ui/css/smoothness/.
   Com que ara el full viu a /css/, s'han passat a absolutes:
       /java/jquery-ui/css/smoothness/images/...
   Els sprites NO s'han de moure enlloc; es queden on son.

   La resta de rutes relatives que ja portava el 28 no s'han tocat i continuen
   resolent-se respecte de /css/:
     - loading.gif                                  (del lightbox.css)
     - img/titular.gif, img/inferior_190.gif, img/vertical_190x5.gif
   O sigui que /css/ ha de tenir el loading.gif i la carpeta img/.

   El select2 no porta cap url().
   ============================================================================ */

/* ============================================================================
   2026-normal-instop-28
   El 27 amb tres fitxers petits absorbits al final:
     - jquery.switchButton.css
     - lightbox.css
     - estil_33.css
   Van al final i l'ordre entre ells es indiferent: comprovat que no hi ha cap
   selector+propietat compartit ni entre ells ni amb el 27, o sigui que el
   resultat es el mateix tant si abans es carregaven abans com despres.

   ATENCIO: aquest fitxer ha de viure al mateix directori on hi havia el
   lightbox.css. La regla #lightbox.loading fa url('loading.gif'), que es
   resol respecte d'on es el full d'estil.
   ============================================================================ */
/* =========================================================
   VERSIO 11 - PROTECCIO DREAMWEAVER PER TEXT NORMAL
   Aquest bloc va al principi perquè la vista Disseny no arribi
   a interpretar els interlineats decimals antics com valors gegants.
   ========================================================= */
.normal_instop,
.normal_instop_dreta,
.normal_instop_NEGRE,
#contingut .normal_instop,
#contingut .normal_instop_dreta,
#contingut .normal_instop_NEGRE{
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-size:15px !important;
  line-height:23px !important;
}

p.normal_instop,
p.normal_instop_dreta,
p.normal_instop_NEGRE,
#contingut p.normal_instop,
#contingut p.normal_instop_dreta,
#contingut p.normal_instop_NEGRE{
  margin-top:0 !important;
  margin-bottom:12px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  min-height:0 !important;
}

.normal_instop br,
.normal_instop_dreta br,
.normal_instop_NEGRE br,
#contingut .normal_instop br,
#contingut .normal_instop_dreta br,
#contingut .normal_instop_NEGRE br{
  font-size:15px !important;
  line-height:23px !important;
}

p.normal_instop:empty,
p.normal_instop_dreta:empty,
p.normal_instop_NEGRE:empty{
  margin:0 !important;
  padding:0 !important;
  min-height:0 !important;
  line-height:0 !important;
}

p.normal_instop > br:only-child,
p.normal_instop_dreta > br:only-child,
p.normal_instop_NEGRE > br:only-child{
  display:none !important;
}

@media (max-width:768px){
  .normal_instop,
  .normal_instop_dreta,
  .normal_instop_NEGRE,
  #contingut .normal_instop,
  #contingut .normal_instop_dreta,
  #contingut .normal_instop_NEGRE{
    font-size:14px !important;
    line-height:21px !important;
  }

  .normal_instop br,
  .normal_instop_dreta br,
  .normal_instop_NEGRE br{
    font-size:14px !important;
    line-height:21px !important;
  }
}

@media (max-width:480px){
  .normal_instop,
  .normal_instop_dreta,
  .normal_instop_NEGRE,
  #contingut .normal_instop,
  #contingut .normal_instop_dreta,
  #contingut .normal_instop_NEGRE{
    font-size:13px !important;
    line-height:20px !important;
  }

  .normal_instop br,
  .normal_instop_dreta br,
  .normal_instop_NEGRE br{
    font-size:13px !important;
    line-height:20px !important;
  }
}

/* =========================================================
   CSS FUSIONAT INSTOP 2026
   Base: 2026-normal-instop-03 + 2026-style-38
   ========================================================= */

/* Vermell corporatiu: la barra superior mana (--cap-red / --cap-red-dark).
   Els noms historics apunten a --instop-red; sense canvis de distribucio. */
:root{
  --vermell:var(--instop-red);
  --vermell-hover:var(--instop-red-hover);
  --gris:#333;
  --font-v:Verdana,Arial,Helvetica,sans-serif;
  --font-a:Arial,Helvetica,sans-serif;
}

/* =========================================================
   BASE / GLOBAL
   ========================================================= */

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:var(--gris);
  text-decoration:none;
}

a:hover{
  color:var(--vermell);
  text-decoration:none;
}

h1{
  font-family:var(--font-a);
  color:var(--vermell);
}

h2{
  margin-bottom:10px;
  text-decoration:none;
}

/* =========================================================
   ESPAIS / CLEARS
   ========================================================= */

.espai-blanc{
  height:20px;
  clear:both;
}

.clear-blanc{
  clear:both;
}

/* =========================================================
   TEXTOS BASE
   ========================================================= */

.detall{
  font-family:var(--font-v);
  color:var(--gris);
  text-decoration:none;
  list-style-position:inside;
  text-align:left;
}

.detall-centre{
  font:400 9px/12px var(--font-v);
  color:var(--gris);
  text-align:center;
  vertical-align:middle;
  text-decoration:none;
}

.normal{
  font:400 12px/20px var(--font-a);
  color:var(--gris);
  text-align:left;
}

.normal-centre{
  font:400 12px/21px var(--font-a);
  color:var(--gris);
  text-align:center;
  vertical-align:middle;
  text-decoration:none;
}

.normal-REF{
  font:700 12px/18px var(--font-a);
  color:var(--gris);
  text-align:center;
  vertical-align:top;
  text-decoration:none;
}

.normal-precios{
  font:700 12px/21px var(--font-a);
  color:var(--gris);
  text-align:right;
  vertical-align:middle;
  text-decoration:none;
}

.normal-precios_vermell{
  font:700 13px/21px var(--font-a);
  color:var(--instop-red);
  text-align:right;
  vertical-align:top;
  text-decoration:none;
}

.text3{
  font:700 8pt/normal var(--font-v);
  color:#626262;
}

.centrat{
  font-weight:400;
  text-align:center;
}

.no-deco{
  text-decoration:none;
}

/* =========================================================
   FORMULARIS
   ========================================================= */

.normal_11_formulari{
  font:400 12px/19px var(--font-v);
  color:var(--gris);
  text-align:left;
  vertical-align:top;
  text-decoration:none;
  cursor:pointer;
  margin:1px;
  border:1px solid #ccc;
}

.normal_10_formulari{
  font:400 10px/15px var(--font-v);
  color:var(--gris);
  text-align:left;
  vertical-align:top;
  text-decoration:none;
  cursor:pointer;
  margin:0;
  border:1px solid #ccc;
}

/* =========================================================
   TITULARS
   ========================================================= */

.titol_1{
  font:700 14px/24px var(--font-a);
  color:var(--gris);
  text-align:left;
  vertical-align:top;
  text-decoration:none;
}

.titol_Producte{
  font:700 21px/25px var(--font-v);
  color:var(--vermell);
  text-align:left;
  vertical-align:top;
}

.titol_Producte_MIG{
  font:700 14px/normal var(--font-v);
  color:var(--vermell);
  text-align:center;
  vertical-align:top;
}

.titol_Producte20{
  font:700 20px/25px var(--font-v);
  text-align:left;
  text-decoration:none;
}

a .titol_Producte20{
  text-decoration:none;
}

.titol_Producte28{
  font:700 28px/40px var(--font-v);
  text-align:left;
  text-decoration:none;
}

.titol_Producte_28_ROIG{
  font:700 28px/38px var(--font-a);
  color:var(--vermell);
  text-align:left;
  vertical-align:top;
  text-decoration:none;
}

#titol-producte-34{
  font:700 34px/38px var(--font-a);
  color:var(--vermell);
  text-align:left;
  vertical-align:top;
  text-decoration:none;
}

.titol-Porducte10{
  font:700 15px/25px var(--font-v);
  color:#666;
  text-align:left;
  vertical-align:top;
  text-decoration:none;
}

.titol-Porducte10-centrat{
  font:700 15px/22px var(--font-v);
  color:#666;
  text-align:center;
  vertical-align:top;
  text-decoration:none;
}

.h1{
  font-family:var(--font-a);
  font-weight:700;
  text-align:left;
  color:var(--vermell);
  text-decoration:none;
  font-variant:normal;
  line-height:44px;
}

.h1_centrat{
  font-family:var(--font-a);
  font-weight:700;
  text-align:center;
  color:var(--instop-red);
  text-decoration:none;
  font-variant:normal;
  line-height:44px;
}

/* =========================================================
   TEXTOS NEGATIUS / VARIANTS
   ========================================================= */

.titol_1-Negatiu{
  font:700 12px/normal var(--font-v);
  color:#fff;
  text-align:center;
  vertical-align:middle;
}

.titol-25-Negatiu{
  font:700 x-large/normal var(--font-v);
  color:#fff;
  text-align:center;
  vertical-align:middle;
}

.titol-14-Negatiu{
  font:400 10px/24px var(--font-v);
  color:#fff;
  text-align:center;
  vertical-align:middle;
}

.detall-vermell{
  font:400 9px/15px var(--font-v);
  color:var(--vermell);
  text-align:left;
  vertical-align:top;
  text-decoration:none;
}

.detall_10_NEGATIU{
  font:700 10px/15px var(--font-v);
  color:#fff;
  text-align:center;
  vertical-align:middle;
  text-decoration:none;
}

.detall_dreta{
  font:400 9px/15px var(--font-v);
  color:#000;
  text-align:right;
  vertical-align:top;
  text-decoration:none;
}

.normal_instop_vermell{
  font:400 11px/17px var(--font-v);
  color:var(--vermell);
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}

.normal-REF_lloguer{
  font:400 12px/18px var(--font-a);
  color:var(--instop-red);
  text-align:center;
  vertical-align:top;
  text-decoration:none;
}

.caixa{
  font:400 7pt/normal Verdana,Arial,sans-serif;
  color:#e6e6e6;
  text-transform:uppercase;
  cursor:default;
}

.transparencia{
  opacity:.5;
  filter:alpha(opacity=50);
}

/* =========================================================
   TEXT INSTOP
   ========================================================= */

.normal_instop_factura{
  font-family:var(--font-v);
  font-size:12px;
  text-align:left;
  color:#000;
}

.normal_instop{
  font-family:var(--font-v);
  font-size:14px;
  line-height:1.8;
  padding:4px 6px;
  border-radius:4px;
  text-align:left;
  word-spacing:normal;
  color:#222;
  font-weight:400;
  text-decoration:none;
  font-variant:normal;
  letter-spacing:normal;
  cursor:text;
  user-select:text;
  caret-color:#007ACC;
}

.normal_instop_dreta{
  font-family:var(--font-v);
  font-size:14px;
  line-height:1.8;
  padding:4px 6px;
  border-radius:4px;
  text-align:right;
  word-spacing:normal;
  color:#222;
  font-weight:400;
  text-decoration:none;
  font-variant:normal;
  letter-spacing:normal;
  cursor:text;
  user-select:text;
  caret-color:#007ACC;
}

.normal_instop_NEGRE{
  font-family:var(--font-v);
  font-size:14px;
  line-height:1.8;
  padding:4px 6px;
  border-radius:4px;
  text-align:left;
  word-spacing:normal;
  text-decoration:none;
  font-variant:normal;
  letter-spacing:normal;
  cursor:text;
  user-select:text;
  caret-color:#007ACC;
}

.visto::before{
  content:"✔";
  color:var(--instop-red);
  display:inline-block;
  font-weight:700;
  font-size:1.1em;
  min-width:19px;
  min-height:19px;
  margin-right:6px;
  vertical-align:top;
}

/* =========================================================
   LAYOUTS DE COLUMNES
   ========================================================= */

.dos-columnes-text,
.tres3-columnes-text,
.quatre-columnes-text,
.cinc-columnes-text{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  max-width:1000px;
  margin:0 auto;
}

.dos-columnes-text .columna{
  flex:1 1 calc(50% - 20px);
}

.tres3-columnes-text .columna{
  flex:1 1 30%;
  min-width:280px;
}

.quatre-columnes-text .columna{
  flex:1 1 calc(25% - 20px);
  min-width:250px;
}

/* =========================================================
   VISIBILITAT
   ========================================================= */

.nomostrar-en-mobil{
  display:block;
}

/* =========================================================
   ELEMENTS FIXOS / BOTONS
   ========================================================= */

.whatsapp-float{
  position:fixed;
  bottom:70px;
  right:10px;
  z-index:1000;
  cursor:pointer;
  transition:transform .3s ease;
}

.whatsapp-float img{
  width:60px;
  height:60px;
  border-radius:50%;
  box-shadow:none;
  background:none;
}

.whatsapp-float:hover{
  transform:scale(1.1);
}

.scrollup{
  width:40px;
  height:40px;
  opacity:.3;
  position:fixed;
  bottom:40px;
  right:300px;
  display:none;
  text-indent:-9999px;
  background:url('https://www.instop.es/ic/icon_top.png') no-repeat center center;
  background-size:contain;
  cursor:pointer;
  z-index:9999;
  transition:opacity .3s ease;
}

.scrollup:hover{
  opacity:1;
}

.scrollup:focus{
  outline:none;
}

/* =========================================================
   ALTRES
   ========================================================= */

.nom_fitxa152{
  height:34px;
}

.tipus{
  width:23%;
  float:left;
  clear:none;
  padding-right:4px;
  margin-right:9px;
}

.titol-intro{
  font-family:"Gill Sans","Gill Sans MT","Myriad Pro","DejaVu Sans Condensed",Helvetica,Arial,sans-serif;
}

.interes{
  width:80%;
  margin:0 0 0 30px;
  padding:11px;
  background:var(--vermell);
  color:#fff;
  font-family:"Gill Sans","Gill Sans MT","Myriad Pro","DejaVu Sans Condensed",Helvetica,Arial,sans-serif;
  float:left;
  bottom:0;
  top:0;
  border-radius:5px;
  -webkit-border-radius:5px;
}

button .interes{
  width:100px;
  text-align:left;
  margin:16px 28px 16px 25px;
  font-weight:400;
  font-size:medium;
}

.interes a{
  color:#fff;
  text-decoration:none;
}

.pdf{
  margin-right:20px;
  margin-top:8px;
  margin-bottom:25px;
}

.video-petit{
  margin:6px;
}

#text-cb::before{
  content:"◄ ";
}

#text-cb{
  width:80%;
  padding-top:5px;
}

/* =========================================================
   CARRET
   ========================================================= */

#divCarroPetit{
  min-height:50px;
}

#cart{
  float:left;
  min-width:192px;
  margin-left:2px;
  margin-bottom:10px;
  border:1px solid #d9d9d9;
  background:#f0f0f0;
  border-radius:12px;
  -webkit-border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.14);
  overflow:hidden;
}

/* Refinats 2026: fons i separadors del carro petit (sense tocar el PHP) */
#cart > table{
  background:#f0f0f0;
  margin-right:6px;
}

#cart hr{
  border:0;
  border-top:1px solid #dcdcdc;
  height:0;
}

/* =========================================================
   LLOGUER - CATEGORIES SENSE RECUADRE
   ========================================================= */

#categoria-alquiler,
#categoria-alquiler2{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  height:auto !important;
  margin:18px 0 6px !important;
  padding:0 !important;
}

.titol-categoria{
  padding:0 !important;
  font-family:var(--font-a, Arial, Helvetica, sans-serif) !important;
  color:#111 !important;
  letter-spacing:.2px;
}

#categoria-alquiler .titol-categoria{
  font-weight:800 !important;
  font-size:18px !important;
}

#categoria-alquiler2 .titol-categoria{
  font-weight:700 !important;
  font-size:15px !important;
  color:#333 !important;
}

#categoria-alquiler .titol-categoria,
#categoria-alquiler2 .titol-categoria{
  padding-bottom:8px !important;
  border-bottom:1px solid #e6e6e6;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:768px){
  .only-mobile{
    display:inline-flex;
  }

  #contingut,
  .contenidor-1050{
    width:100% !important;
    max-width:100% !important;
    padding:0 15px;
    box-sizing:border-box;
  }

  .intro17,
  .intro17 p,
  .normal_instop,
  .visto.normal_instop{
    max-width:100% !important;
    word-break:break-word;
  }

  .normal_instop{
    font-size:13px;
    line-height:1.5;
    padding:4px 0 !important;
    box-sizing:border-box;
    word-break:break-word;
    max-width:100% !important;
  }

  .dos-columnes-text .columna,
  .tres3-columnes-text .columna,
  .quatre-columnes-text .columna,
  .cinc-columnes-text .columna{
    flex:1 1 100%;
  }

  .nomostrar-en-mobil{
    display:none !important;
  }
}

@media (max-width:480px){
  .normal_instop{
    font-size:12px;
    line-height:1.4;
  }

  #categoria-alquiler .titol-categoria{
    font-size:16px !important;
  }

  #categoria-alquiler2 .titol-categoria{
    font-size:14px !important;
  }
}

/* =========================================================
   ESTRUCTURA I COMPONENTS PROCEDENTS DE 2026-STYLE-38
   ========================================================= */

/* =========================================================
   BASE / RESET
   ========================================================= */
:root{--maxw:1046px;--red:var(--instop-red);--bg:#fff;--text:#333;--muted:#666;--border:#e5e5e5;--border-2:#c9c9c9;--focus-bg:#fffde7;--focus-border:#d6b400;--focus-shadow:0 0 8px rgba(214,180,0,.4);--shadow:0 0 8px rgba(0,0,0,.1);--shadow-2:0 0 8px rgba(0,0,0,.15);}
*,*::before,*::after{box-sizing:border-box;}
/* Reset global eliminat: es conserven els marges originals de les pagines antigues. */
html{width:100%;height:100%;background:var(--bg);}
body{width:100%;height:100%;}
img{border:0;text-align:center;}
.img-responsive{display:block;max-width:100%;height:auto;}
#site{width:100%;margin:0 auto;background:var(--bg);}

/* =========================================================
   FRANGES / ELEMENTS GENERALS
   ========================================================= */
#atencio_client{width:var(--maxw);height:25px;margin:0 auto;padding-top:5px;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:bold;color:var(--red);}
#franja_roja{width:100%;height:3px;background:var(--red);}

.espai20{height:20px;}
.espai40{height:40px;}
.espai60{height:60px;}
.espai80{height:80px;}
.espai120{height:120px;}

/* =========================================================
   FORMULARIS (FORMULARI + SHOP)
   ========================================================= */
#formulari{font:14px/150% Verdana,Tahoma,sans-serif;padding:20px 35px;overflow:hidden;position:relative;}
#formulari-shop{font:14px/150% Verdana,Tahoma,sans-serif;padding-top:10px;}
#formulari input,#formulari textarea,#formulari select,#formulari-shop input,#formulari-shop textarea,#formulari-shop select{padding:4px;border:1px solid var(--border);outline:0;font:normal 13px/140% Verdana,Tahoma,sans-serif;background:#fff;box-shadow:var(--shadow);box-sizing:border-box;}
#formulari textarea{width:400px;max-width:400px;height:150px;line-height:140%;}
#formulari-shop textarea{height:100px;line-height:150%;}
#formulari .form label,#formulari-shop .form-shop label{margin-left:10px;color:#999;}
#formulari p{margin-top:15px;}
#formulari-shop p{margin-top:16px;}
#form1 input:focus,#form1 textarea:focus,#form1 select:focus,#formulari input:focus,#formulari textarea:focus,#formulari select:focus,#formulari-shop input:focus,#formulari-shop textarea:focus,#formulari-shop select:focus{background:var(--focus-bg);border-color:var(--focus-border);box-shadow:var(--focus-shadow);outline:0;}
#formulari-shop input:hover,#formulari-shop textarea:hover,#formulari-shop select:hover,#formulari-shop input:focus,#formulari-shop textarea:focus,#formulari-shop select:focus{border-color:var(--border-2);-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2);}

/* =========================================================
   FORMULARI A (TIPUS "formulariA")
   ========================================================= */
#formulariA{width:95%;margin:0;color:rgb(78,75,75);font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,"Tahoma sans-serif";font-size:14px;line-height:20px;text-size-adjust:100%;}
.titol-formulariA{font-style:normal;font-size:24px;line-height:28px;font-weight:600;margin:15px 0 16px;}
.campA{margin-top:8px;}
.inputf,.inputf98,.input-fecha,.selectf,.notes-formulariA{box-sizing:border-box;font-family:inherit;font-size:inherit;font-style:normal;font-weight:normal;line-height:inherit;width:100%;max-width:100%;border:1px solid rgb(209,209,209);color:rgb(31,31,31);box-shadow:rgba(0,0,0,.04) 1px 1px 3px;transition:border-radius 200ms ease 0s;height:36px;padding:8px 10px;border-radius:4px;}
.inputf98{width:70%;max-width:500px;}
.input-fecha{width:100px;max-width:100%;}
.selectf{width:95%;max-width:95%;}
.notes-formulariA{resize:vertical;min-height:95px;height:auto;}
.boton-enviarA{box-shadow:rgba(0,0,0,.04) 1px 1px 3px;transition:border-radius 200ms ease 0s;height:unset;padding:8px 10px;margin-top:24px;min-height:48px;border-radius:4px;font-size:16px;line-height:20px;font-weight:600;background-color:var(--instop-red);border:0;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;outline:none;}
.boton-enviarA:hover{background-color:var(--instop-red-hover);}

/* =========================================================
   FOOTER (MEDIA QUE TENS PER .empresa_footer)
   ========================================================= */
@media (max-width:768px){.empresa_footer{flex:1 1 calc(50% - 15px);}}

/* =========================================================
   TEXTOS / IMATGES
   ========================================================= */
.textlib{padding:25px 10px 0 0;}
.logoprod{margin:5px 35px 5px 5px;float:left;}

/* =========================================================
   ZONA PDF (GRID)
   ========================================================= */
.col-pdf{display:grid;grid-template-columns:1fr 2fr 1fr;gap:20px;max-width:var(--maxw);margin:auto;padding:20px 10px;align-items:start;}
.col-esquerra,.col-dreta{text-align:center;}
.col-centre{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;justify-items:center;}
.producte img{max-width:150px;height:auto;}
.producte a.docs{display:block;margin-top:5px;font-size:14px;text-align:center;}
@media (max-width:768px){.col-pdf{grid-template-columns:1fr;max-width:100%;}.col-centre{grid-template-columns:1fr 1fr;justify-content:center;}.col-esquerra,.col-dreta{display:none;}.producte a.docs{font-size:13px;}}

/* =========================================================
   BLOCS / LLISTES (LATERAL)
   ========================================================= */
.block{float:left;margin-left:23px;margin-top:15px;width:180px;height:165px;font-family:Verdana,Geneva,sans-serif;}
.title_block,.title_block a{font-weight:bold;font-size:13px;color:var(--text);text-decoration:none;}
.block ul{padding-top:5px;}
.block li{padding-left:8px;padding-top:4px;font-size:11px;color:var(--text);list-style:none;}
.block li a{color:var(--text);text-decoration:none;}
.block li a:hover{color:var(--muted);text-decoration:none;}
.copyright{width:var(--maxw);margin:0 auto;text-align:left;padding-top:2px;}
#lateral{width:198px;overflow:hidden;float:left;margin-top:10px;}
.quadre{width:190px;background:url(img/vertical_190x5.gif) repeat-y;}
.canto-dalt{background:url(img/titular.gif) no-repeat;width:190px;height:25px;}
#text_titol{font-family:Arial,Helvetica,sans-serif;text-align:center;font-size:12px;font-weight:bold;padding-top:6px;cursor:pointer;}
#text_news{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9px;font-style:normal;text-align:left;vertical-align:top;word-spacing:normal;line-height:15px;font-weight:normal;font-variant:normal;color:#000;text-decoration:none;padding-left:5px;padding-top:3px;}
.normal_cuadres{font-family:Arial,Helvetica,sans-serif;font-size:12px;font-style:normal;text-align:left;vertical-align:top;word-spacing:normal;color:var(--text);line-height:19px;font-weight:normal;text-decoration:none;background:#fff;margin:1px;border:1px solid #e6e6e6;width:157px;}
.canto-sota{background:url(img/inferior_190.gif) no-repeat;width:190px;height:10px;}

/* =========================================================
   PAGINACIÓ
   ========================================================= */
#barra_paginacio{width:600px;margin-bottom:20px;margin-left:27px;float:left;font-family:Arial,Helvetica,sans-serif;}
#pagination-clean li{border:0;margin:0;padding:0;font-size:12px;list-style:none;float:left;}
#pagination-clean a{border-right:1px solid #dedede;margin-right:4px;}
#pagination-clean .previous-off,#pagination-clean .next-off{color:#888;display:block;float:left;font-weight:bold;padding:3px 4px;}
#pagination-clean .next a,#pagination-clean .previous a{border:none;font-weight:bold;}
#pagination-clean .active{color:#000;font-weight:bold;display:block;float:left;padding:4px 6px;border-right:1px solid #dedede;}
#pagination-clean a:link,#pagination-clean a:visited{color:#0e509e;display:block;float:left;padding:3px 6px;text-decoration:underline;}
#pagination-clean a:hover{text-decoration:none;}
#titol_items2{font-family:Arial,Helvetica,sans-serif;color:var(--text);font-size:22px;font-weight:bold;padding-left:25px;margin-bottom:20px;float:left;width:600px;}

/* =========================================================
   ITEMS / PRODUCTES (varis formats)
   ========================================================= */
#item{float:left;width:180px;margin-left:20px;margin-bottom:20px;height:265px;}
#item:hover{background:#ddd;}
.imatge_producte{padding:5px 8px 0 7px;cursor:pointer;}
.referencia{font-size:13px;font-weight:bold;width:170px;padding:5px 5px 4px;text-align:center;border-bottom:1px solid #e2e2e2;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:1px solid #e2e2e2;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:210px;margin-left:20px;margin-bottom:25px;height:350px;border:1px solid #ccc;}
#item_2:hover{background:#ddd;}
.imatge_producte_2{padding:5px 0 2px 10px;cursor:pointer;}
.referencia_2{font-size:12px;font-weight:bold;width:200px;padding:4px 5px 3px;text-align:center;border-bottom:1px solid #e2e2e2;font-family:Arial,Helvetica,sans-serif;cursor:pointer;}
.nom_producte_2{font-size:12px;text-align:center;width:200px;height:40px;padding:4px 5px 2px;border-bottom:1px solid #e2e2e2;line-height:12px;font-family:Arial,Helvetica,sans-serif;cursor:pointer;}
.preu_producte_2{font-size:15px;font-weight:bold;width:140px;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;}
#item_3{float:left;width:150px;margin-left:15px;margin-bottom:14px;height:190px;}
#item_3:hover{background:#ddd;}
.item_3{float:left;width:20%;margin-bottom:14px;margin-top:20px;height:200px;text-align:center;}
.item_3:hover{background:#ddd;cursor:pointer;}
.imatge_producte_3{padding:5px 0 0 7px;cursor:pointer;}
.nom_producte_3{font-size:13px;text-align:center;width:auto;height:40px;padding:8px 5px 2px;line-height:14px;font-family:Arial,Helvetica,sans-serif;cursor:pointer;}

/* =========================================================
   MENÚ CATEGORIES
   ========================================================= */
#menu_categ{width:146px;overflow:hidden;text-align:left;}
#menu_categ ul.llista_categ,#menu_categ ul.llista_categ2{list-style:none;line-height:19px;margin-left:20px;_margin-left:15px;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px;font-style:normal;text-align:left;vertical-align:top;word-spacing:normal;color:var(--text);font-weight:bold;}
#menu_categ ul.tito_categ{float:left;list-style:none;line-height:5px;margin-left:-20px;_margin-left:15px;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;font-style:normal;text-align:left;vertical-align:top;word-spacing:normal;color:var(--text);font-weight:bold;}
#menu_categ ul.llista_producte{float:left;list-style:none;line-height:17px;margin-left:-20px;_margin-left:15px;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;font-style:normal;text-align:left;vertical-align:top;word-spacing:normal;color:var(--text);}
#menu_categ li.imatge_llista{list-style-image:url(/ic/pt7.png);}
#menu_categ li.imatge_llista2{list-style-image:url(/ic/pt7.png);list-style-position:inherit;font-size:10px;font-weight:normal;margin-left:-13px;}
#menu_categ li.imatge_flet2{list-style-image:url(/ic/ft2.png);font-size:11px;margin-top:7px;font-weight:bold;}
#menu_categ a{color:var(--text);text-decoration:none;}
#menu_categ a:hover{color:#999;text-decoration:none;}

/* =========================================================
   UTILITATS
   ========================================================= */
.clear{clear:both;background:#fff;}
.spacer{clear:both;}

/* =========================================================
   CERCA / SELECT2 / SWITCH
   ========================================================= */
#cercatipus{display:none;}
#tipus{position:absolute;left:509px;top:47px;}
.switch-contenidor{display:inline-block;}
.switch-contenidor,.switch-button-background{z-index:999;}
.select2-container .select2-selection--single{height:42px !important;font-size:1.6em !important;padding-top:4px !important;}
.select2-results__options{font-family:Arial,Helvetica,sans-serif;}
[src="/0/2m.png"]{display:none;}

/* =========================================================
   TAGS / BOTONS
   ========================================================= */
.thetags{font-weight:400;display:inline-block;border:1px solid #cecece;padding:2px 4px;margin:0 4px 4px 0;font-size:13px;transition:300ms all;}
.thetags:hover{color:#fff;border-color:var(--instop-red-hover);box-shadow:inset 0 -65px 0 var(--instop-red-hover);}
.botonP{font-family:Verdana,Arial,Helvetica,sans-serif;text-decoration:none;padding:5px;font-weight:600;font-size:15px;color:#fff;background:var(--instop-red);border-radius:5px;width:125px;float:left;margin-left:10px;text-align:center;line-height:17px;margin-top:7px;}
#condicionesGenerales{padding-top:54px;}

/* =========================================================
   CHECKBOX GRAN
   ========================================================= */
.checkboxGran .regular-checkbox{position:absolute;left:-19px;top:-40px;}
.checkboxGran .regular-checkbox + label{background:lightgray;border:2px solid var(--instop-red);box-shadow:0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05);border-radius:3px;display:inline-block;position:absolute;left:-24px;top:-45px;padding:13px;cursor:pointer;}
.checkboxGran .regular-checkbox + label:active,.regular-checkbox:checked + label:active{box-shadow:0 1px 2px rgba(0,0,0,.05),inset 0 1px 3px rgba(0,0,0,.1);}
.checkboxGran .regular-checkbox:checked + label{background:green;border:1px solid #adb8c0;color:#000;}
.checkboxGran .regular-checkbox:checked + label:after{content:url("/ic/ok2.png");position:absolute;top:1px;left:1px;}

/* =========================================================
   ESPECÍFICS / TAULES DE PREUS
   ========================================================= */
#especifics{float:left;margin:18px 0 30px;border:1px solid #ccc;width:100%;font-family:Verdana,Arial,Helvetica,sans-serif;color:var(--text);line-height:19px;border-radius:7px;}
.titol{font-size:14px;font-weight:bold;height:22px;padding-left:5px;padding-top:3px;background:#d2d2d2;}
.nom_caract{font-size:13px;font-weight:bold;width:53%;float:left;padding-left:5px;padding-top:3px;}
.nom_caract2{font-size:13px;font-weight:bold;width:53%;float:left;padding-left:5px;padding-top:3px;background:#f2f2f2;}
.caracteristica{font-size:13px;width:44%;float:left;padding-left:5px;padding-top:3px;}
.caracteristica2{font-size:13px;width:44%;float:left;padding-left:5px;padding-top:3px;background:#f2f2f2;}
.docs:before{content:url(/0/f.png);position:relative;top:4px;left:-4px;}
#tpreus{float:left;margin:30px 0;border:1px solid var(--red);width:100%;font-family:Verdana,Arial,Helvetica,sans-serif;color:var(--text);line-height:19px;border-radius:7px;}
.tdpreus1{font-size:13px;width:33%;float:left;padding-left:2px;padding-top:4px;}
.tdpreus2{font-size:13px;width:34%;float:left;padding-left:1px;padding-top:4px;text-align:right;}
.tdpreus3{font-size:13px;width:30%;float:left;padding-left:1px;padding-top:4px;padding-bottom:4px;text-align:right;font-style:italic;}
#ajax_listOfOptions_iframe{}

/* =========================================================
   EFECTES / IMATGES
   ========================================================= */
#sombra{background:#eee;}
#sombra:hover,td#sombra2:hover{background:#ddd;}
#libprod{width:100%;cursor:pointer;}
#imglloguerurl{cursor:pointer;}

/* =========================================================
   ALTRES
   ========================================================= */
#det_cond{float:left;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:13px;line-height:18px;font-style:normal;margin-top:-25px;}
table.consumibles{margin:0 auto;}

/* =========================================================
   CERCADOR 2026
   ========================================================= */
.cerca-wrap{max-width:1050px;margin:24px auto;padding:0 16px;font-family:Arial,Helvetica,sans-serif;}
.cerca-title{margin:0 0 14px;font-size:24px;font-weight:700;}
.cerca-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:768px){.cerca-grid{grid-template-columns:1fr 1fr;}.cerca-card.full{grid-column:1 / -1;}}
.cerca-card{background:#fff;border:1px solid rgba(0,0,0,.12);padding:16px;box-shadow:0 1px 10px rgba(0,0,0,.05);}
.cerca-label{display:block;font-size:14px;font-weight:700;margin:0 0 8px;}
.cerca-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.cerca-form .inputf,.cerca-form .selectf{flex:1 1 240px;min-width:220px;max-width:100%;padding:10px 12px;border:1px solid rgba(0,0,0,.18);border-radius:10px;font-size:14px;outline:none;}
.cerca-form .inputf:focus,.cerca-form .selectf:focus{border-color:rgba(0,0,0,.35);}
.cerca-form .boton-enviarA{flex:0 0 auto;padding:10px 14px;border:0;border-radius:10px;cursor:pointer;font-weight:700;}
.cerca-help{margin:8px 0 0;font-size:13px;opacity:.75;}

/* ==========================================================
   LLOGUER — taules segures en mòbil (sense canviar HTML)
   ========================================================== */
@media (max-width:768px){table.alquilerfont{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}table.alquilerfont td{white-space:nowrap;}table.alquilerfont td[width="10%"]{min-width:110px;}table.alquilerfont td[width="7%"][rowspan="4"]{min-width:84px;}}
/* =========================================================
   GALERIA PRODUCTE / SLICK FIX 2026
   Evita pantalla en blanc en clicar miniatures.
   ========================================================= */
.mg-product-gallery,#wrap{max-width:520px;margin:0 auto;}
.mg-product-gallery .slider-for,.mg-product-gallery .slider-nav{display:block;position:relative;}
.mg-product-gallery .slick-list{display:block;position:relative;overflow:hidden;margin:0;padding:0;}
.mg-product-gallery .slick-track{display:block;position:relative;left:0;top:0;margin-left:auto;margin-right:auto;}
.mg-product-gallery .slick-track:before,.mg-product-gallery .slick-track:after{display:table;content:"";}
.mg-product-gallery .slick-track:after{clear:both;}
.mg-product-gallery .slick-slide{display:none;float:left;height:100%;min-height:1px;}
.mg-product-gallery .slick-initialized .slick-slide{display:block;}
.mg-product-gallery .slickframe{display:flex;align-items:center;justify-content:center;min-height:410px;background:#fff;}
.mg-product-gallery .slickframe img{display:block;width:auto;max-width:100%;height:auto;max-height:410px;object-fit:contain;margin:0 auto;}
.mg-product-gallery .slider-nav{max-width:360px;margin:12px auto 0;}
.mg-product-gallery .slider-nav .slick-slide{cursor:pointer;opacity:.72;padding:0 5px;}
.mg-product-gallery .slider-nav .slick-current{opacity:1;}
.mg-product-gallery .mfp-thumb{display:block;width:72px;height:72px;object-fit:contain;margin:0 auto;border:1px solid transparent;background:#fff;}
.mg-product-gallery .slick-current .mfp-thumb{border-color:#222;}
.mg-product-gallery .slick-prev,.mg-product-gallery .slick-next{z-index:5;}
@media (max-width:700px){.mg-product-gallery,#wrap{max-width:100%;}.mg-product-gallery .slickframe{min-height:330px;}.mg-product-gallery .slickframe img{max-height:330px;}.mg-product-gallery .slider-nav{max-width:300px;}.mg-product-gallery .mfp-thumb{width:62px;height:62px;}}


/* =========================================================
   GALERIA PRODUCTE SIMPLE 2026 - sense Slick
   Evita pantalla en blanc quan es clica una miniatura.
   ========================================================= */
.mg-product-gallery{max-width:520px;margin:0 auto;text-align:center;}
.mg-gallery-main{position:relative;display:flex;align-items:center;justify-content:center;min-height:430px;background:#fff;}
.mg-gallery-main-link{display:flex;align-items:center;justify-content:center;width:100%;min-height:430px;text-decoration:none;}
.mg-gallery-main-img{display:block;width:auto;max-width:100%;height:auto;max-height:430px;object-fit:contain;margin:0 auto;}
.mg-gallery-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:28px;height:28px;border:1px solid #cfcfcf;border-radius:999px;background:rgba(255,255,255,.92);color:#444;font:400 22px/24px Arial,Helvetica,sans-serif;cursor:pointer;opacity:.95;box-shadow:0 1px 4px rgba(0,0,0,.10);}
.mg-gallery-btn:hover{background:#fff;color:#222;border-color:#b8b8b8;box-shadow:0 2px 6px rgba(0,0,0,.14);}
.mg-gallery-prev{left:-6px;}
.mg-gallery-next{right:-6px;}
.mg-gallery-thumbs{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;max-width:390px;margin:14px auto 0;}
.mg-gallery-thumb{display:flex;align-items:center;justify-content:center;width:74px;height:74px;padding:5px;border:1px solid #d7d7d7;border-radius:8px;background:#fff;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;}
.mg-gallery-thumb:hover{border-color:#b9b9b9;box-shadow:0 2px 6px rgba(0,0,0,.09);transform:translateY(-1px);}
.mg-gallery-thumb.is-active{border-color:#8f8f8f;box-shadow:0 2px 8px rgba(0,0,0,.12);}
.mg-gallery-thumb img{display:block;width:100%;height:100%;object-fit:contain;}
@media (max-width:700px){.mg-product-gallery{max-width:100%;}.mg-gallery-main,.mg-gallery-main-link{min-height:330px;}.mg-gallery-main-img{max-height:330px;}.mg-gallery-thumbs{max-width:320px;gap:8px;}.mg-gallery-thumb{width:62px;height:62px;padding:4px;border-radius:7px;}.mg-gallery-prev{left:4px;}.mg-gallery-next{right:4px;}.mg-gallery-btn{width:26px;height:26px;font-size:20px;line-height:22px;}}

/* Tipografia: s'aplica nomes a les classes editorials existents. */
.normal_instop,.normal_instop_dreta,.normal_instop_NEGRE,.normal,.normal-centre,.detall,.detall-centre,.titol_1,.titol_Producte,.titol_Producte20,.titol_Producte28,.titol_Producte_28_ROIG,#titol-producte-34,.titol-Porducte10,.titol-Porducte10-centrat{font-family:"Open Sans",Arial,Helvetica,sans-serif;letter-spacing:normal;font-stretch:normal;}

.normal_instop,.normal_instop_dreta,.normal_instop_NEGRE{font-size:15px;line-height:1.72;padding:0;color:var(--instop-ink);border-radius:0;}
.normal_instop_NEGRE{font-weight:400;color:#222;}
.normal{color:var(--instop-ink);}
.detall{font-size:11px;line-height:1.45;color:var(--instop-muted);}

.titol_1{color:var(--instop-ink);cursor:default;}
.titol_Producte{color:var(--instop-red);}
.titol_Producte_28_ROIG{color:var(--instop-red);}
#titol-producte-34{color:var(--instop-red);}
.titol-Porducte10,.titol-Porducte10-centrat{font-size:14px;line-height:1.55;font-weight:600;color:#555b61;}

.normal_instop p,.normal_instop_NEGRE p,.normal_instop_dreta p{margin:0 0 14px;}
.normal_instop ul,.normal_instop ol,.normal_instop_NEGRE ul,.normal_instop_NEGRE ol{margin:8px 0 18px 22px;padding:0;}
.normal_instop li,.normal_instop_NEGRE li{margin:0 0 7px;padding-left:2px;}
.normal_instop a,.normal_instop_NEGRE a{color:var(--instop-red);text-decoration:none;font-weight:600;}
.normal_instop a:hover,.normal_instop_NEGRE a:hover{color:var(--instop-red-hover);text-decoration:underline;}

/* Formularis mes plans i coherents. */
#formulari input,#formulari textarea,#formulari select,#formulari-shop input,#formulari-shop textarea,#formulari-shop select,.inputf,.inputf98,.input-fecha,.selectf,.notes-formulariA{border:1px solid var(--instop-line);border-radius:var(--instop-radius);background:#fff;box-shadow:none;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;}
#formulari input:focus,#formulari textarea:focus,#formulari select:focus,#formulari-shop input:focus,#formulari-shop textarea:focus,#formulari-shop select:focus,.inputf:focus,.inputf98:focus,.input-fecha:focus,.selectf:focus,.notes-formulariA:focus{border-color:#aeb5bb;background:#fff;box-shadow:0 0 0 3px rgba(181,47,27,.10);outline:0;}

.boton-enviarA,.botonP{background:var(--instop-red);border:1px solid var(--instop-red);border-radius:4px;box-shadow:none;font-family:"Open Sans",Arial,Helvetica,sans-serif;font-weight:700;transition:background-color .18s ease,border-color .18s ease,transform .18s ease;}
.boton-enviarA:hover,.botonP:hover{background:var(--instop-red-hover);border-color:var(--instop-red-hover);color:#fff;}

/* Caixes i taules: menys arrodonides, mes tecniques. */
.cerca-card{border:1px solid var(--instop-line);border-radius:8px;box-shadow:var(--instop-shadow);}
#especifics,#tpreus{border-color:var(--instop-line);border-radius:6px;overflow:hidden;}
#especifics .titol,#tpreus .titol,.titol{background:#eceff1;color:var(--instop-ink);}
.nom_caract2,.caracteristica2{background:#f7f8f9;}
.thetags{border-color:#d6dade;background:#fff;color:#666d73;}
.thetags:hover{border-color:var(--instop-red);box-shadow:inset 0 -65px 0 var(--instop-red);}

/* Targetes existents: relleu discret, sense modificar la graella. */
.instop-item,.instop-item140,.producte-flex,.factor-flex,.caso-flex{border-color:var(--instop-line);box-shadow:0 2px 8px rgba(20,30,40,.05);}
.instop-item:hover,.instop-item140:hover,.producte-flex:hover,.factor-flex:hover,.caso-flex:hover{box-shadow:0 8px 20px rgba(20,30,40,.10);transform:translateY(-2px);}

/* Evita que els paragrafs buits heretats generin blocs exagerats. */
.normal_instop p:empty,.normal_instop_NEGRE p:empty{margin:0;min-height:0;}

@media (max-width:768px){
  .normal_instop,.normal_instop_dreta,.normal_instop_NEGRE{font-size:14px;line-height:1.62;padding:0!important;}
  .titol_1{line-height:1.35;}
  #titol-producte-34{line-height:1.2;}
}

/* =========================================================
   BOTONS INSTOP 2026
   Fusionat des de 2026-botons-02.css
   ========================================================= */
/* =============================== BOTONS LLOGUER =============================== */
.boton33{display:inline-flex;align-items:center;justify-content:center;width:60%;margin:7px;font-family:var(--font-a, Arial, Helvetica, sans-serif);font-weight:700;font-size:13px;letter-spacing:.2px;color:var(--gris, #333);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;}
.boton33:hover{background:var(--vermell, #b93425);border-color:var(--vermell, #b93425);}
.boton33:active{transform:translateY(1px);box-shadow:none;}
@media (max-width:480px){.boton33{width:80%;}}

/* ========================================================== COMPRAR / SOL·LICITAR (recuperar estil verd i gran) ========================================================== */
.boto-comprar{background:#7AA945;color:#fff;box-sizing:border-box;padding:16px 12px;min-height:96px;text-align:center;font-weight:700;box-shadow:0 4px 8px rgba(0,0,0,.15);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;text-decoration:none}
.boto-comprar-carro,.boto-comprar.boto-comprar-carro{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;width:180px;min-width:160px;max-width:200px;min-height:78px;padding:14px 10px;gap:4px;background:#8faa4d;color:#fff;border-radius:6px;box-shadow:none;text-align:center;margin:0 auto}
.boto-comprar-carro:hover,.boto-comprar.boto-comprar-carro:hover{background:#78933f;color:#fff;box-shadow:none}

/* ========================================================== BOTONS – BASE COMUNA (sense canviar classes) ========================================================== */
.boto-cotitzacio,.boto-carro,.boto-comprar,.boto-telefon,.boton-consulta.compacte{text-decoration:none;cursor:pointer;box-sizing:border-box;border:0;border-radius:8px;font-family:var(--font-a, Arial, sans-serif);-webkit-tap-highlight-color:transparent;transition:background .25s,transform .15s,box-shadow .2s,filter .2s;}
.boto-cotitzacio:hover,.boto-carro:hover,.boto-comprar:hover,.boto-telefon:hover,.boton-consulta.compacte:hover{text-decoration:none;}
.boto-cotitzacio:focus-visible,.boto-carro:focus-visible,.boto-comprar:focus-visible,.boto-telefon:focus-visible,.boton-consulta.compacte:focus-visible{outline:2px solid rgba(0,0,0,.35);outline-offset:2px;}
.boto-carro,.boto-comprar,.boto-telefon,.boton-consulta.compacte{display:inline-flex;align-items:center;justify-content:center;}

/* ========================================================== COTITZACIÓ (text en columnes) ========================================================== */
.boto-cotitzacio{display:inline-block;background:var(--vermell);text-align:center;padding:10px 20px;line-height:1.2;}
.boto-cotitzacio:hover{background:var(--vermell-hover);}
.boto-cotitzacio .titol,.boto-cotitzacio .subtitol{color:#fff;display:block;font-weight:700;}
.boto-cotitzacio .titol{font-size:28px;letter-spacing:1px;text-transform:uppercase;margin:0 0 8px;}
.boto-cotitzacio .subtitol{font-size:18px;margin:0 0 4px;}
.boto-cotitzacio .traduccio{color:#ccc;display:block;font-size:16px;font-style:italic;margin-top:2px;}
.boto-cotitzacio .titol,.boto-cotitzacio .subtitol,.boto-cotitzacio .traduccio{background:transparent !important;padding:0;}

/* ========================================================== CARRO ========================================================== */
.boto-carro{height:38px;padding:0 20px;gap:6px;background:#7AA945;color:#fff;font:700 14px/38px var(--font-a, Arial, sans-serif);}
.boto-carro:hover{background:#567a31;}
.boto-carro,.boto-carro:visited,.boto-carro:active{color:#fff;}

/* ========================================================== TELÈFON ========================================================== */
.boto-telefon{max-width:300px;min-width:200px;margin:20px auto;padding:14px 22px;background:var(--vermell);color:#fff;font:700 17px/1.3 var(--font-a, Arial, sans-serif);letter-spacing:.4px;text-align:center;box-shadow:0 4px 8px rgba(0,0,0,.15);overflow:hidden;}
.boto-telefon:hover{background:var(--instop-red-hover);box-shadow:0 2px 4px rgba(0,0,0,.2);color:#fff;}
.boto-telefon .phone-icon{margin-right:8px;vertical-align:middle;}
@media (max-width:768px){.boto-telefon{font-size:16px;width:90%;padding:12px 20px;}}

/* ========================================================== CONSULTA COMPACTE ========================================================== */
.boton-consulta.compacte{background:var(--instop-red);color:#fff;padding:6px 12px;width:fit-content;line-height:1.1;}
.boton-consulta.compacte .principal{font-size:28px;font-weight:700;text-transform:uppercase;}

/* ========================================================== CARRO – MODE ICONA AMB SVG CORPORATIU ========================================================== */
.boto-carro-ico{padding:0;width:34px;height:30px;min-height:34px;border-radius:6px;justify-content:center;}
.boto-carro-ico .carro-ico{width:28px;height:28px;display:block;background:url("/ic/carro.svg") no-repeat center center;background-size:contain;filter:brightness(0) invert(1);}
.boto-carro-ico .carro-ico::before{left:1px;}
.boto-carro-ico .carro-ico::after{right:1px;}

.boto-comprar-carro{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;width:150px;max-width:150px;min-height:58px;padding:10px 8px;gap:2px;background:#8faa4d;color:#fff;border-radius:6px;box-shadow:none;text-align:center;margin:0 auto;}
.boto-comprar-carro:hover{background:#78933f;color:#fff;box-shadow:none;}
.boto-comprar-carro .linia1{font-size:19px;line-height:.95;font-weight:800;letter-spacing:0;}
.boto-comprar-carro .linia2{font-size:11px;line-height:1;font-style:italic;color:#f2f2f2;}

.icona-treure-carro{display:inline-block;width:20px;height:20px;position:relative;cursor:pointer;vertical-align:top;background:#f3f3f3;border:1px solid #d8d8d8;border-radius:2px;}
.icona-treure-carro::before,.icona-treure-carro::after{content:"";position:absolute;left:8px;top:2px;width:3px;height:14px;background:var(--instop-red);border-radius:2px;}
.icona-treure-carro::before{transform:rotate(45deg);}
.icona-treure-carro::after{transform:rotate(-45deg);}
.icona-treure-carro:hover{background:#fff;border-color:#cfcfcf;}
.icona-treure-carro:hover::before,.icona-treure-carro:hover::after{background:var(--instop-red-hover);}

.minicarrovermell{display:inline-block;width:56px;height:31px;background:var(--instop-red);border-radius:2px;position:relative;text-decoration:none}
.minicarrovermell::before{content:"";position:absolute;left:6px;top:4px;width:32px;height:22px;background:url("/ic/carro.svg") no-repeat center center;background-size:contain;filter:brightness(0) invert(1)}
.minicarrovermell::after{content:"+";position:absolute;right:6px;top:1px;color:#fff;font-size:23px;font-weight:700;line-height:1}
/* =========================================================
   INSTOP FUSIO 03 - EVOLUCIO VISUAL TIPUS SCCS
   Ajustos prudents, sense canviar classes ni estructura HTML.
   ========================================================= */
:root{
  --instop-shadow:none;
}

/* Tipografia editorial mes clara i menys pesada. */
.normal_instop,
.normal_instop_dreta,
.normal_instop_NEGRE{
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1.66;
  font-weight:400;
  color:var(--instop-ink);
  letter-spacing:0;
  font-variation-settings:normal;
  font-feature-settings:"kern" 1,"liga" 1;
}

.normal_instop strong,
.normal_instop_NEGRE strong{
  font-weight:600;
}

.normal{
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:13px;
  line-height:1.55;
  color:var(--instop-ink);
}

.detall,
.detall-centre{
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  color:var(--instop-muted);
}

/* Titulars inspirats en la jerarquia neta de SCCS. */
.titol_1{
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:20px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:-.02em;
  color:#303030;
  margin:24px 0 10px;
}

.titol_Producte{
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:23px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:-.025em;
  color:var(--instop-red);
}

.titol_Producte20{
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:21px;
  line-height:1.28;
  font-weight:600;
  letter-spacing:-.02em;
  color:#404040;
}

.titol_Producte28{
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:30px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.03em;
  color:#303030;
}

.titol_Producte_28_ROIG{
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:34px;
  line-height:1.15;
  font-weight:600;
  letter-spacing:-.035em;
  color:var(--instop-red);
  margin:0 0 22px;
}

#titol-producte-34{
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:38px;
  line-height:1.12;
  font-weight:600;
  letter-spacing:-.04em;
  color:var(--instop-red);
}

.titol-Porducte10,
.titol-Porducte10-centrat{
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1.5;
  font-weight:600;
  color:#4b4b4b;
}

#contingut ul.normal_instop,
#contingut .normal_instop ul,
#contingut .normal_instop_NEGRE ul{
  padding:0;
}

#contingut ul.normal_instop > li::before,
#contingut .normal_instop ul > li::before,
#contingut .normal_instop_NEGRE ul > li::before{
  color:var(--instop-red);
  font-size:20px;
  line-height:1.15;
  font-weight:700;
}

#contingut .normal_instop a,
#contingut .normal_instop_NEGRE a{
  color:#303030;
}

#contingut .normal_instop a:hover,
#contingut .normal_instop_NEGRE a:hover{
  color:var(--instop-red);
  text-decoration:underline;
  text-decoration-thickness:1px;
}

#contingut .fila-principal{
  column-gap:42px;
  row-gap:24px;
  align-items:flex-start;
}

#contingut .text2{
  border-top:1px solid #ececec;
}

/* Formularis plans i rectangulars. */
#formulari input,
#formulari textarea,
#formulari select,
#formulari-shop input,
#formulari-shop textarea,
#formulari-shop select,
.inputf,
.inputf98,
.input-fecha,
.selectf,
.notes-formulariA{
  min-height:42px;
  border:1px solid #d4d4d4;
  border-radius:2px;
  background:#fff;
  box-shadow:none;
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
}

#formulari input:focus,
#formulari textarea:focus,
#formulari select:focus,
#formulari-shop input:focus,
#formulari-shop textarea:focus,
#formulari-shop select:focus,
.inputf:focus,
.inputf98:focus,
.input-fecha:focus,
.selectf:focus,
.notes-formulariA:focus{
  border-color:#777;
  box-shadow:0 0 0 2px rgba(212,0,36,.10);
}

/* Botons mes plans, rectangulars i tecnics. */
.boton-enviarA,
.botonP,
.boton33,
.boto-cotitzacio,
.boto-carro,
.boto-comprar,
.boto-comprar-carro,
.boto-telefon,
.boton-consulta.compacte{
  border-radius:2px;
  box-shadow:none;
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  letter-spacing:.02em;
}

.boton-enviarA,
.botonP,
.boto-cotitzacio,
.boto-telefon,
.boton-consulta.compacte{
  background:var(--instop-red);
  border-color:var(--instop-red);
}

.boton-enviarA:hover,
.botonP:hover,
.boto-cotitzacio:hover,
.boto-telefon:hover,
.boton-consulta.compacte:hover{
  background:var(--instop-red-hover);
  border-color:var(--instop-red-hover);
  transform:none;
  box-shadow:none;
}

.boton33{
  border-color:#cfcfcf;
}

.boton33:hover{
  transform:none;
  box-shadow:none;
}

.boto-comprar,
.boto-comprar-carro,
.boto-comprar.boto-comprar-carro,
.boto-carro{
  background:#438600;
}

.boto-comprar:hover,
.boto-comprar-carro:hover,
.boto-comprar.boto-comprar-carro:hover,
.boto-carro:hover{
  background:#367000;
  transform:none;
  box-shadow:none;
}

/* Targetes i taules: aparenca plana i ordenada. */
.cerca-card,
.instop-item,
.instop-item140,
.producte-flex,
.factor-flex,
.caso-flex{
  border:1px solid var(--instop-line);
}

.instop-item,
.instop-item140,
.producte-flex{
  background:#f7f7f7;
}

.instop-text,
.instop-text.dreta{
  border-radius:0;
}

#especifics,
#tpreus{
  border-color:var(--instop-line);
  box-shadow:none;
}

#especifics .titol,
#tpreus .titol,
.titol{
  color:#303030;
}

.thetags{
  border-radius:2px;
  box-shadow:none;
}

@media (max-width:768px){
  .normal_instop,
  .normal_instop_dreta,
  .normal_instop_NEGRE{
    font-size:14px;
    line-height:1.6;
  }

  .titol_1{
    font-size:18px;
    margin:20px 0 9px;
  }

  .titol_Producte20{
    font-size:19px;
  }

  .titol_Producte28{
    font-size:26px;
  }

  .titol_Producte_28_ROIG{
    font-size:28px;
    line-height:1.18;
  }

  #titol-producte-34{
    font-size:31px;
  }

  #contingut .bloc-contingut{
    padding-top:10px;
  }

  #contingut .fila-principal{
    row-gap:18px;
  }

  #contingut .text2{
    margin-top:24px;
    padding-top:22px;
  }
}

/* =========================================================
   VERSIO 06 - RECUPERAR LES DUES COLUMNES DE LA INTRO
   L'HTML ja te .col-img i .col-text; aquest bloc defineix
   explicitament la graella perquè el text no baixi sota la imatge.
   ========================================================= */

#contingut .bloc-contingut > .fila-principal{
  display:grid;
  grid-template-columns:minmax(280px,38%) minmax(0,1fr);
  width:100%;
}

#contingut .bloc-contingut > .fila-principal > .col-img,
#contingut .bloc-contingut > .fila-principal > .col-text{
  float:none !important;
  clear:none !important;
  width:auto !important;
  max-width:none;
  min-width:0;
  margin:0;
  box-sizing:border-box;
}

#contingut .bloc-contingut > .fila-principal > .col-img{
  grid-column:1;
}

#contingut .bloc-contingut > .fila-principal > .col-text{
  grid-column:2;
  align-self:start;
}

#contingut .bloc-contingut > .fila-principal > .col-img img,
#contingut .bloc-contingut > .fila-principal > .col-img video,
#contingut .bloc-contingut > .fila-principal > .col-text img,
#contingut .bloc-contingut > .fila-principal > .col-text video{
  max-width:100%;
  height:auto;
}

/* Evita que els paragrafs interiors generin amplades artificials. */
#contingut .bloc-contingut > .fila-principal > .col-text .normal_instop,
#contingut .bloc-contingut > .fila-principal > .col-text .normal_instop_NEGRE{
  max-width:100%;
  box-sizing:border-box;
}

@media (max-width:820px){

  #contingut .bloc-contingut > .fila-principal > .col-img,
  #contingut .bloc-contingut > .fila-principal > .col-text{
    grid-column:1;
    width:100% !important;
  }
}

/* Cos editorial: SCCS treballa aproximadament a 0.95rem. */
#contingut .normal_instop,
#contingut .normal_instop_dreta,
#contingut .normal_instop_NEGRE{
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-weight:400;
  color:var(--instop-ink);
  letter-spacing:0;
}

#contingut .normal_instop strong,
#contingut .normal_instop_NEGRE strong{
  color:var(--instop-heading);
  font-weight:600;
}

/* Mes aire general, sense alterar l'amplada historica de 1046 px. */
#contingut .bloc-contingut{
  padding-top:32px;
  padding-bottom:56px;
}

/* Graella similar a la proporcio 42% / 58% observada a SCCS. */
#contingut .bloc-contingut > .fila-principal{
  grid-template-columns:minmax(300px,42%) minmax(0,1fr);
  column-gap:48px;
  row-gap:28px;
  align-items:start;
}

#contingut .bloc-contingut > .fila-principal > .col-img{
  align-self:start;
}

#contingut .bloc-contingut > .fila-principal > .col-img p{
  margin:0;
}

#contingut .bloc-contingut > .fila-principal > .col-img img{
  margin-left:auto;
  margin-right:auto;
}

#contingut .bloc-contingut > .fila-principal > .col-text{
  max-width:65ch;
}

/* Titular principal: gran, lleuger i amb espaiat compacte. */
#contingut .titol_Producte_28_ROIG{
  margin:0 0 36px;
  color:var(--instop-red);
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:36px;
  line-height:1.12;
  font-weight:600;
  letter-spacing:-.035em;
}

#contingut #titol-producte-34{
  color:var(--instop-red);
  font-size:40px;
  line-height:1.1;
  font-weight:600;
  letter-spacing:-.04em;
}

#contingut .titol_Producte28{
  color:var(--instop-heading);
  font-size:30px;
  font-weight:600;
  letter-spacing:-.03em;
}

#contingut .titol_Producte20,
#contingut .titol_Porducte20,
#contingut .titol-categoria{
  display:block;
  color:var(--instop-heading) !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-size:22px !important;
  line-height:1.3 !important;
  font-weight:600 !important;
  letter-spacing:-.02em;
  margin:0 0 10px;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

#contingut .titol_1{
  color:var(--instop-heading);
  font-size:21px;
  font-weight:600;
  letter-spacing:-.02em;
}

#contingut .titol-Porducte10,
#contingut .titol-Porducte10-centrat{
  color:#525252;
  font-size:15px;
  line-height:1.55;
  font-weight:600;
}

#contingut .normal_instop p:last-child,
#contingut .normal_instop_NEGRE p:last-child,
#contingut .normal_instop_dreta p:last-child{
  margin-bottom:0;
}

#contingut ul.normal_instop > li::marker,
#contingut .normal_instop ul > li::marker,
#contingut .normal_instop_NEGRE ul > li::marker{
  color:var(--instop-red);
}

/* SCCS subratlla els enllacos editorials: ho limitem al contingut. */
#contingut .normal_instop a,
#contingut .normal_instop_NEGRE a{
  color:var(--instop-heading);
  font-weight:500;
  text-decoration:underline;
  text-decoration-color:#a3a3a3;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

#contingut .normal_instop a:hover,
#contingut .normal_instop_NEGRE a:hover{
  color:var(--instop-red);
  text-decoration-color:var(--instop-red);
}

/* Separacio de seccions: plana, sense targetes decoratives. */
#contingut .text2{
  margin-top:52px;
  padding-top:46px;
  border-top:1px solid var(--instop-line);
}

#contingut .din,
#contingut .fac{
  margin-top:44px;
}

/* Formularis inspirats en SCCS: rectangulars, sense ombres. */
#contingut input[type="text"],
#contingut input[type="email"],
#contingut input[type="tel"],
#contingut input[type="number"],
#contingut input[type="date"],
#contingut select,
#contingut textarea,
#formulari input,
#formulari textarea,
#formulari select,
#formulari-shop input,
#formulari-shop textarea,
#formulari-shop select,
.inputf,
.inputf98,
.input-fecha,
.selectf,
.notes-formulariA{
  min-height:44px;
  padding:9px 12px;
  border:1px solid var(--instop-line);
  border-radius:0;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  color:#262626;
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1.45;
}

#contingut textarea,
#formulari textarea,
#formulari-shop textarea,
.notes-formulariA{
  min-height:110px;
}

#contingut input:focus,
#contingut select:focus,
#contingut textarea:focus,
#formulari input:focus,
#formulari textarea:focus,
#formulari select:focus,
#formulari-shop input:focus,
#formulari-shop textarea:focus,
#formulari-shop select:focus,
.inputf:focus,
.inputf98:focus,
.input-fecha:focus,
.selectf:focus,
.notes-formulariA:focus{
  border-color:#525252;
  outline:2px solid transparent;
  box-shadow:0 0 0 1px #525252;
}

/* Botons principals: mateixa simplicitat de SCCS, amb vermell INSTOP. */
#contingut .instop-web-lead-botons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:22px 0 28px;
}

#contingut .instop-web-lead-open,
.boton-enviarA,
.botonP,
.boto-cotitzacio,
.boto-telefon,
.boton-consulta.compacte{
  min-height:44px;
  padding:10px 18px;
  border:1px solid var(--instop-red);
  border-radius:4px;
  background:var(--instop-red);
  color:#fff;
  box-shadow:none;
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1.45;
  font-weight:700;
  letter-spacing:0;
  text-align:center;
  text-transform:none;
}

#contingut .instop-web-lead-open:hover,
.boton-enviarA:hover,
.botonP:hover,
.boto-cotitzacio:hover,
.boto-telefon:hover,
.boton-consulta.compacte:hover{
  background:var(--instop-red-hover);
  border-color:var(--instop-red-hover);
  color:#fff;
  transform:none;
  box-shadow:none;
}

/* Compra i carro conserven el codi cromatic verd de SCCS. */
.boto-comprar,
.boto-comprar-carro,
.boto-comprar.boto-comprar-carro,
.boto-carro{
  border-radius:4px;
  background:var(--instop-green);
  box-shadow:none;
}

.boto-comprar:hover,
.boto-comprar-carro:hover,
.boto-comprar.boto-comprar-carro:hover,
.boto-carro:hover{
  background:var(--instop-green-hover);
}

/* Botons secundaris blancs amb vora neutra. */
.boton33{
  min-height:44px;
  padding:9px 16px;
  border:1px solid #a3a3a3;
  border-radius:4px;
  background:#fff;
  color:#171717;
  box-shadow:none;
}

.boton33:hover{
  border-color:#525252;
  background:#f5f5f5;
  color:#171717;
}

/* Targetes i grups de producte mes plans. */
.cerca-card,
.instop-item,
.instop-item140,
.producte-flex,
.factor-flex,
.caso-flex{
  border:1px solid var(--instop-line);
  border-radius:0;
  background:#fff;
  box-shadow:none;
}

.instop-item,
.instop-item140,
.producte-flex{
  background:var(--instop-soft);
}

.instop-item:hover,
.instop-item140:hover,
.producte-flex:hover,
.factor-flex:hover,
.caso-flex:hover{
  border-color:#a3a3a3;
  box-shadow:none;
  transform:none;
}

/* Taules: capcaleres grises i files amb separadors fins. */
#especifics,
#tpreus{
  border:1px solid var(--instop-line);
  border-radius:0;
  background:#fff;
}

#especifics .titol,
#tpreus .titol,
.titol{
  min-height:34px;
  padding:7px 10px;
  background:#e5e7eb;
  color:var(--instop-heading);
  font-weight:600;
}

.nom_caract,
.nom_caract2,
.caracteristica,
.caracteristica2{
  padding-top:7px;
  padding-bottom:7px;
  border-bottom:1px solid #ececec;
}

.nom_caract2,
.caracteristica2{
  background:#f7f7f7;
}

@media (min-width:1280px){
  #contingut .bloc-contingut > .fila-principal{
    column-gap:56px;
  }
}

@media (max-width:820px){
  #contingut .bloc-contingut{
    padding-top:20px;
    padding-bottom:38px;
  }

  #contingut .bloc-contingut > .fila-principal{
    grid-template-columns:1fr;
    column-gap:0;
    row-gap:24px;
  }

  #contingut .bloc-contingut > .fila-principal > .col-text{
    max-width:none;
  }

  #contingut .titol_Producte_28_ROIG{
    margin-bottom:24px;
    font-size:30px;
    line-height:1.16;
  }

  #contingut #titol-producte-34{
    font-size:33px;
  }

  #contingut .titol_Producte28{
    font-size:27px;
  }

  #contingut .titol_Producte20,
  #contingut .titol_Porducte20,
  #contingut .titol-categoria{
    font-size:20px !important;
  }

  #contingut .titol_1{
    font-size:19px;
  }

  #contingut .text2{
    margin-top:34px;
    padding-top:30px;
  }

  #contingut .instop-web-lead-botons{
    align-items:stretch;
  }

  #contingut .instop-web-lead-open{
    flex:1 1 100%;
    width:100%;
  }
}

/* =========================================================
   2026-INTRO-01 FUSIONAT
   ========================================================= */
/* ==========================================================
   BANNER ZONE
   ========================================================== */

/* Zona base sense alçada reservada */
.banner-zone {
  position: relative;
  overflow: hidden;
}

/* Reserva 250px només si hi ha contingut */
/* Regla :has() omesa per compatibilitat amb Dreamweaver. */

/* clearfix per a floats */
.banner-zone::after {
  content: "";
  display: block;
  clear: both;
}

/* Mòbil: amaga del tot el banner */
@media (max-width: 767px) {
  .banner-zone { display: none; }
}



/* ==========================================================
   FITXA PERSONA
   ========================================================== */
.expert-card {
  display: flex;
  align-items: center;
  gap: 12px;

  background-color: #f0f0f0;
  padding: 15px;
  border-radius: 8px;

  width: 450px; /* ample fix */
  box-sizing: border-box;

  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  will-change: transform, box-shadow;
}

@media (hover: hover) {
  .expert-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 30px rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.10);
  }

  .expert-photo,
  .expert-info {
    transition: transform 0.28s ease;
  }

  .expert-card:hover .expert-photo {
    transform: translateX(-2px) scale(1.02);
  }

  .expert-card:hover .expert-info {
    transform: translateX(2px);
  }
}

.expert-photo {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  max-width: none; /* evita regles globals */
}

.expert-info {
  flex: 1;
  min-width: 0;
}

.expert-contact a:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .expert-card { max-width: 100%; }
  .expert-photo {
    flex-basis: 96px;
    width: 96px;
    height: 96px;
  }
}



/* ==========================================================
   FACTORS D’EQUIPS
   ========================================================== */
.factors-flexline {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  max-width: 1050px;
  margin: 20px auto;
}

.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 0.3s ease, transform 0.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 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;
}



/* ==========================================================
   CONTENIDOR HOVER (doble imatge)
   ========================================================== */
.contenedor {
  position: relative;
  width: 100%;
  max-width: 180px;
  max-height: 200px;
  overflow: hidden;

  border-radius: 12px;
  background: #fff;

  display: flex;
  justify-content: center;
  align-items: center;

  transition: box-shadow 0.3s ease;
  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; }



/* ==========================================================
   PRODUCTES GRID (5 columnes)
   ========================================================== */
.productes-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px 30px;
  justify-content: center;

  max-width: 1050px;
  margin: 0 auto;
  padding: 20px 10px;

  box-sizing: border-box;
}

.producte {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 200px;
}

.producte .titol-Porducte10 {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  margin: 8px 0 4px;
}

.producte .normal {
  font-size: 13px;
  color: #333;
  line-height: 1.4;
}



/* ==========================================================
   INTRO 4 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;
}

/* Items */
.instop-item,
.instop-item140 {
  display: flex;
  flex-direction: row;
  width: calc(50% - 10px);

  background: #f5f5f5;
  overflow: hidden;

  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.instop-item {
  border-radius: 0 16px 16px 0;
  min-height: 150px;
}

.instop-item140 {
  border-radius: 0 16px 16px 0;
  min-height: 140px;
  align-items: stretch;
}

.instop-item:hover,
.instop-item140:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
  transform: translateY(-2px);
}

.instop-img125 {
  width: 132px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  background: #f5f5f5;

  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

.instop-img125 img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.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;
}



/* ==========================================================
   TAULES GRISES 2025 (productes-flexline / grup-productes-dos)
   ========================================================== */
.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: #eee;
  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);
}

.producte-flex img {
  width: 125px;
  height: 125px;
  object-fit: cover;
  object-position: center;
  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;
}

/* Amples */
.productes-flexline .producte-flex {
  flex: 1 1 30%;
  min-width: 280px;
}

.grup-productes-dos .producte-flex {
  flex: 1 1 44%;
  min-width: 280px;
}



/* ==========================================================
   CONTENIDOR 1050 (anti overflow)
   ========================================================== */
.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;
}

.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;
}



/* ==========================================================
   CONTINGUT / SITE
   ========================================================== */
.barra-intro {
  height: 27px;
  background-color: #fff;
}

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

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

#contingut2 {
  width: 100%;
  margin-top: 0;
}

#contingut {
  margin: 0 auto;
  width: 1046px;
  height: auto;
}

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



/* ==========================================================
   GRID ACCESSORIS
   ========================================================== */
.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;
}



/* ==========================================================
   CARRETÓ OFF-CANVAS
   ========================================================== */
@media (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: 90px !important;
    bottom: auto !important;
    right: 10px;
    width: 38px;
    height: 38px;
    background-color: var(--instop-red);
    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 (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;
  }
}



/* ==========================================================
   RESPONSIVE GLOBAL (agrupat)
   ========================================================== */
@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);
  }
}

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

  .contenidor-1050 {
    width: 100% !important;
    padding: 10px !important;
  }

  .instop-grid {
    flex-direction: column;
    gap: 16px;
  }

  .instop-item,
  .instop-item140 {
    flex-direction: column;
    width: 100%;
    border-radius: 16px;
  }

  .instop-img {
    width: 100%;
  }

  .instop-text.dreta {
    border-radius: 0 0 16px 16px;
  }

  .instop-img125 {
    height: auto;
    width: 100%;
  }

  .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%; }

  .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;
  }
}

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

/* =========================================================
   VERSIO 08 - SCCS: INTRO FUSIONAT, FLETXES I RITME DE TEXT
   ========================================================= */

:root{
  --instop-arrow:var(--instop-red);
  --instop-primary:var(--instop-red);
  --instop-primary-hover:var(--instop-red-hover);
}

/* Ritme de lectura mes compacte, similar al text editorial SCCS. */
#contingut .normal_instop,
#contingut .normal_instop_dreta,
#contingut .normal_instop_NEGRE{
  font-size:15px;
  line-height:1.55;
}

#contingut .normal_instop p,
#contingut .normal_instop_NEGRE p,
#contingut .normal_instop_dreta p{
  margin:0 0 0.85rem;
}

/* Llistes amb chevrons vermells fins, en lloc de punts. */
#contingut ul.normal_instop,
#contingut .normal_instop ul,
#contingut .normal_instop_NEGRE ul{
  list-style:none;
  margin:1rem 0 1.35rem;
  padding-left:0;
}

#contingut ul.normal_instop > li,
#contingut .normal_instop ul > li,
#contingut .normal_instop_NEGRE ul > li{
  position:relative;
  margin:0.48rem 0;
  padding-left:2rem;
}

#contingut ul.normal_instop > li::before,
#contingut .normal_instop ul > li::before,
#contingut .normal_instop_NEGRE ul > li::before{
  content:"";
  position:absolute;
  left:0.35rem;
  top:.48em;
  width:0.52rem;
  height:0.52rem;
  border-top:2px solid var(--instop-arrow);
  border-right:2px solid var(--instop-arrow);
  transform:rotate(45deg);
  transform-origin:center;
}

#contingut ul.normal_instop > li::marker,
#contingut .normal_instop ul > li::marker,
#contingut .normal_instop_NEGRE ul > li::marker{
  content:"";
}

/* Boto editorial principal: evita color negre i subratllat heretats. */
#contingut a.boto-telefon,
#contingut .normal_instop a.boto-telefon,
#contingut .normal_instop_NEGRE a.boto-telefon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  max-width:100%;
  min-width:0;
  min-height:48px;
  margin:24px 0 30px;
  padding:12px 22px;
  border:1px solid var(--instop-primary);
  border-radius:2px;
  background:var(--instop-primary);
  color:#fff !important;
  box-shadow:none;
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:.01em;
  text-align:center;
  text-decoration:none !important;
  text-transform:none;
}

#contingut a.boto-telefon .principal,
#contingut .normal_instop a.boto-telefon .principal,
#contingut .normal_instop_NEGRE a.boto-telefon .principal{
  margin:0;
  padding:0;
  background:transparent;
  color:#fff !important;
  font:inherit;
  line-height:inherit;
  text-decoration:none !important;
}

#contingut a.boto-telefon:hover,
#contingut a.boto-telefon:focus-visible,
#contingut .normal_instop a.boto-telefon:hover,
#contingut .normal_instop_NEGRE a.boto-telefon:hover{
  border-color:var(--instop-primary-hover);
  background:var(--instop-primary-hover);
  color:#fff !important;
  text-decoration:none !important;
}

/* Ajust dels títols secundaris al ritme compacte. */
#contingut .titol_1{
  line-height:1.25;
  margin:28px 0 10px;
}

#contingut .titol_Producte28{
  line-height:1.15;
  margin:34px 0 16px;
}

@media (max-width:820px){
  #contingut .normal_instop,
  #contingut .normal_instop_dreta,
  #contingut .normal_instop_NEGRE{
    font-size:14px;
    line-height:1.5;
  }

  #contingut a.boto-telefon,
  #contingut .normal_instop a.boto-telefon,
  #contingut .normal_instop_NEGRE a.boto-telefon{
    width:100%;
    margin:20px 0 26px;
  }
}

/* =========================================================
   FORMULARI LEAD WEB INTEGRAT
   Font: 2026-web-lead-form-01.css
   ========================================================= */

/* Formulari lead web producte Instop v02 - més compacte i botó inferior */
.instop-lead-modal,
.instop-lead-modal * {
    box-sizing: border-box;
}

.instop-lead-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    font-family: Arial, sans-serif;
}

.instop-lead-modal.obert {
    display: block;
}

.instop-lead-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 25, 25, .62);
}

.instop-lead-box {
    position: relative;
    width: min(720px, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
    overflow: auto;
    margin: 14px auto;
    padding: 22px 24px 24px;
    background: #fff;
    text-align: left;
}

.instop-lead-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    background: #f0f0f0;
    color: #333;
    cursor: pointer;
    font: 800 24px/1 Arial, sans-serif;
}

.instop-lead-close:hover {
    background: #e2e2e2;
}

.instop-lead-head {
    padding-right: 44px;
    margin-bottom: 14px;
}

.instop-lead-eyebrow {
    margin: 0 0 5px;
    color: #666;
    font: 700 14px/1 Arial, sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.instop-lead-head h2 {
    margin: 0 0 5px;
    color: #333;
    font: 800 27px/1.08 Arial, sans-serif;
}

.instop-lead-head p {
    margin: 0;
    color: #666;
    font: 15px/1.35 Arial, sans-serif;
}

.instop-lead-producte {
    margin: 10px 0 14px;
    padding: 12px 14px;
    border-left: 5px solid var(--green, #6e8b3d);
    color: #405a27;
    font: 800 17px/1.25 Arial, sans-serif;
}

.instop-lead-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.instop-lead-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #444;
    font: 800 13px/1.2 Arial, sans-serif;
}

.instop-lead-grid input,
.instop-lead-grid textarea {
    width: 100%;
    border: 1px solid #cfcfcf;
    background: #fff;
    color: #222;
    padding: 11px 12px;
    font: 15px/1.35 Arial, sans-serif;
}

.instop-lead-grid textarea {
    min-height: 82px;
    resize: vertical;
}

.instop-lead-grid input:focus,
.instop-lead-grid textarea:focus {
    border-color: var(--green, #6e8b3d);
}

.instop-lead-full {
    grid-column: 1 / -1;
}

.instop-lead-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid #eee;
}

.instop-lead-actions p {
    order: 1;
    margin: 0;
    color: #777;
    font: 13px/1.35 Arial, sans-serif;
}

.instop-lead-actions .instop-lead-submit {
    order: 2;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 58px;
    border: 0 !important;
    border-radius: 10px;
    background: var(--green, #6e8b3d) !important;
    color: #fff !important;
    cursor: pointer;
    padding: 12px 20px;
    font: 800 20px/1.1 Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(70, 100, 35, .22);
}

.instop-lead-actions .instop-lead-submit span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .88);
    font: 700 12px/1 Arial, sans-serif;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.instop-lead-actions .instop-lead-submit:hover {
    background: #58762f !important;
}

.instop-lead-actions .instop-lead-submit:disabled {
    opacity: .65;
    cursor: wait;
}

.instop-lead-msg {
    margin-top: 10px;
    min-height: 21px;
    color: #666;
    font: 800 14px/1.35 Arial, sans-serif;
}

.instop-lead-msg.ok {
    color: #4d7e2b;
}

.instop-lead-msg.error {
    color: #c9302c;
}

.instop-lead-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

.instop-web-lead-open {
    border: 0;
    min-width: 150px;
}

@media (max-width: 640px) {
    .instop-lead-box {
        width: calc(100vw - 18px);
        max-height: calc(100vh - 18px);
        margin: 9px auto;
        padding: 18px;
        border-radius: 12px;
    }

    .instop-lead-head {
        padding-right: 38px;
    }

    .instop-lead-head h2 {
        font-size: 23px;
    }

    .instop-lead-producte {
        font-size: 15px;
    }

    .instop-lead-grid {
        grid-template-columns: 1fr;
    }

    .instop-lead-actions .instop-lead-submit {
        min-height: 56px;
        font-size: 19px;
    }
}


/* Ajust botó "Más información" de pàgina producte */
.instop-web-lead-open,
button.instop-web-lead-open,
.boto-comprar.instop-web-lead-open {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 150px !important;
    max-width: 220px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 13px 24px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--green, #6e8b3d) !important;
    color: #fff !important;
    font: 800 15px/1 Arial, sans-serif !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 3px 9px rgba(70, 100, 35, .18) !important;
    cursor: pointer !important;
}

.instop-web-lead-open:hover,
button.instop-web-lead-open:hover,
.boto-comprar.instop-web-lead-open:hover {
    background: #58762f !important;
    transform: translateY(-1px);
}

.instop-web-lead-open:active,
button.instop-web-lead-open:active,
.boto-comprar.instop-web-lead-open:active {
    transform: translateY(0);
}

/* Si el botó queda dins d'un contenidor pensat per botons grans */
.intro .instop-web-lead-open,
.producte .instop-web-lead-open,
.contingut .instop-web-lead-open {
    margin-top: 8px !important;
    margin-bottom: 10px !important;
}


/* v04: consulta genèrica i camp producte per pàgines no dinàmiques */
.instop-lead-producte-field-ocult {
    display: none !important;
}

.instop-lead-producte-field input {
    border-color: #b9cfa2 !important;
    background: #fbfff7 !important;
}

.instop-web-lead-consulta-wrap {
    margin: 8px 0 12px;
}

.instop-web-lead-oferta,
button.instop-web-lead-oferta,
.boto-comprar.instop-web-lead-oferta {
    background: var(--instop-red) !important;
    color: #fff !important;
    box-shadow: 0 3px 9px rgba(150, 45, 30, .20) !important;
}

.instop-web-lead-oferta:hover,
button.instop-web-lead-oferta:hover,
.boto-comprar.instop-web-lead-oferta:hover {
    background: var(--instop-red-hover) !important;
}


/* v05: botó consulta amb la imatge antiga /0/cont.png */
.instop-web-lead-consulta-img {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    line-height: 0 !important;
}

.instop-web-lead-consulta-img img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0;
}

.instop-web-lead-consulta-img:hover {
    background: transparent !important;
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.instop-web-lead-consulta-img:active {
    transform: translateY(0);
}


/* v07: consulta amb PNG original i fons totalment transparent */
.instop-web-lead-consulta-wrap-transparent,
.instop-web-lead-consulta-wrap-transparent *,
.instop-web-lead-consulta-wrap-transparent > *,
.instop-web-lead-consulta-wrap-transparent .instop-web-lead-consulta-img {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.instop-web-lead-consulta-png-transparent,
button.instop-web-lead-consulta-png-transparent {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    line-height: 0 !important;
}

.instop-web-lead-consulta-png-transparent img {
    display: block !important;
    width: auto !important;
    max-width: 140px !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.instop-web-lead-consulta-png-transparent:hover,
button.instop-web-lead-consulta-png-transparent:hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.instop-web-lead-consulta-png-transparent:active,
button.instop-web-lead-consulta-png-transparent:active {
    transform: translateY(0);
}

/* Si el fons verd el posa el contenidor antic de la targeta */
/* Regla :has() omesa per compatibilitat amb Dreamweaver. */

/* =========================================================
   FORMULARI SHOP / CHECKOUT INTEGRAT
   Font: 2026-formulari-08.css
   ========================================================= */

/* 2026-formulari-shop-v2.css  (scoped, mínim, sense línies “fantasma”) */

/* ----- Scope general ----- */
#formulari-shop{max-width:1046px;margin:0 auto;padding:0 12px;box-sizing:border-box;}
#formulari-shop .form-shop{margin:0;}
#carroContenidor{padding:0 0 20px;}

/* Reset només dins del formulari (NO global) */
#formulari-shop table{border-collapse:separate;border-spacing:0;}
#formulari-shop td,#formulari-shop th{border:0;}
#formulari-shop tr{border:0;}
#formulari-shop hr{border:0;height:0;margin:0;}

/* ==========================================================
   1) FORMULARI (taula_facturacio) “des-taulitzat”
   ========================================================== */
#taula_facturacio{width:min(900px,100%) !important;margin:0 auto;table-layout:fixed;}
#taula_facturacio tr{display:flex;gap:14px;align-items:center;padding:10px 0;}
#taula_facturacio td{display:block;height:auto !important;padding:0 !important;}
#taula_facturacio td.normal{flex:0 0 180px;font-size:13px;letter-spacing:.2px;color:#333;text-align:left;}
#taula_facturacio td[id^="error"]{flex:1 1 auto;border-radius:10px;padding:3px !important;}
#taula_facturacio input[type="text"],#taula_facturacio select,#taula_facturacio textarea{width:100%;max-width:100%;box-sizing:border-box;}
#taula_facturacio textarea#NOTES{min-height:120px;resize:vertical;font-size:12px;}

/* Camps (aprofita classe existent) */
#formulari-shop .camp-formulari{padding:9px 10px;border:1px solid rgba(0,0,0,.18);border-radius:10px;background:#fff;color:#222;font-size:14px;line-height:1.2;}

/* Checkboxes: no cal tocar gaire */
#taula_facturacio input[type="checkbox"]{vertical-align:middle;}

/* Responsive formulari */
@media (max-width:900px){#taula_facturacio tr{flex-wrap:wrap;align-items:flex-start;}#taula_facturacio td.normal{flex:1 1 100%;}#taula_facturacio td[id^="error"]{flex:1 1 100%;}}

/* ==========================================================
   2) CARRO (#divCarroPetit33) — sense línies per totes les taules
   ========================================================== */
#divCarroPetit33{width:min(900px,100%);margin:18px auto 0;padding:16px;border:1px solid #e3e3e3;border-radius:14px;background:#f6fbff;box-shadow:0 6px 16px rgba(0,0,0,.06);box-sizing:border-box;text-align:left;}

/* IMPORTANT: NO posis separadors a "tots els tr" del carro */
#divCarroPetit33 table{width:100%;}
#divCarroPetit33 td{vertical-align:top;}
#divCarroPetit33 img{border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.10);display:block;}

/* Amaga els <hr> del carro (els que tens dins la tercera fila de cada producte) */
#divCarroPetit33 hr{display:none !important;}

/* ---- Separador net NOMÉS per la taula de productes (width='98%') ----
   Cada producte té 3 <tr>: (1) imatge+qtt (2) nom+delete (3) hr
   Posem línia després del tr (2): nth-child(3n+2) */
#divCarroPetit33 table[width="98%"] tr{position:static;}
#divCarroPetit33 table[width="98%"] tr:nth-child(3n+2) td{padding-bottom:10px;}
#divCarroPetit33 table[width="98%"] tr:nth-child(3n+2){border-bottom:1px solid rgba(0,0,0,.12);}
#divCarroPetit33 table[width="98%"] tr:nth-child(3n+3){display:none;} /* fila de l'hr */

/* Petita separació vertical entre files del mateix producte */
#divCarroPetit33 table[width="98%"] tr:nth-child(3n+1) td{padding-top:8px;padding-bottom:6px;}

/* Taula interna del QTT (width=150): la neutralitzem perquè no “desquadri” */
#divCarroPetit33 table[width="150"]{width:auto;border-collapse:separate;border-spacing:0;}
#divCarroPetit33 table[width="150"] td{padding:0;}

/* QTT */
#divCarroPetit33 input[id^="QTT"]{width:44px;text-align:right;padding:6px 8px;border:1px solid rgba(0,0,0,.18);border-radius:10px;background:#fff;box-sizing:border-box;}

/* Botons +/- */
#divCarroPetit33 .botons-carro-inline{display:inline-flex;gap:8px;align-items:center;justify-content:center;}
#divCarroPetit33 .botonet-carro{width:30px;height:30px;border-radius:10px;border:1px solid rgba(0,0,0,.18);background:#fff;cursor:pointer;font-weight:800;line-height:1;}
#divCarroPetit33 .botonet-carro:hover{background:var(--instop-red-hover);border-color:var(--instop-red-hover);color:#fff;}

/* Botó treure */
.boto-treure-carro{width:28px;height:28px;border-radius:9999px;border:1px solid var(--instop-red);background:#fff;color:var(--instop-red);cursor:pointer;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .05s ease;}
.boto-treure-carro:hover{background:var(--instop-red-hover);color:#fff;border-color:var(--instop-red-hover);}
.boto-treure-carro:active{background:var(--instop-red-hover);color:#fff;transform:translateY(1px);}

/* Afegir producte */
#divCarroPetit33 input.resaltat{margin-top:8px;padding:9px 10px;border:1px solid rgba(0,0,0,.18);border-radius:10px;width:min(260px,100%);box-sizing:border-box;}

/* Botó gran */
#formulari-shop .boto-comprar{display:block;margin:18px auto 0;padding:18px 26px;border:0;background:#7aa845;color:#fff;cursor:pointer;}

@media (max-width:520px){#divCarroPetit33{padding:12px;}#formulari-shop .boto-comprar{width:100%;}}

/* Formulari sense taula */
#taula_facturacio.form-grid{width:min(900px,100%);margin:0 auto;display:grid;gap:12px;}
#taula_facturacio .form-row{display:grid;grid-template-columns:180px 1fr;gap:14px;align-items:center;}
#taula_facturacio .form-row--full{grid-template-columns:180px 1fr;align-items:start;}
#taula_facturacio .form-label{font-size:13px;letter-spacing:.2px;color:#333;text-align:left;}
#taula_facturacio .form-field{min-width:0;}
#taula_facturacio textarea{padding:9px 10px;border:1px solid rgba(0,0,0,.18);border-radius:10px;background:#fff;color:#222;font-size:14px;line-height:1.2;}
#taula_facturacio select,#taula_facturacio .form-check{margin-top:12px;display:flex;gap:10px;align-items:flex-start;}
#taula_facturacio .form-check input{margin-top:2px;}

@media (max-width:900px){#taula_facturacio .form-row,#taula_facturacio .form-row--full{grid-template-columns:1fr;}#taula_facturacio .form-label{margin-bottom:4px;}}

.carro-wrap{width:min(900px,100%);margin:0 auto;text-align:center;}
.carro-box{margin:18px auto 0;padding:16px;border:1px solid #e3e3e3;border-radius:14px;background:#f6fbff;box-shadow:0 6px 16px rgba(0,0,0,.06);box-sizing:border-box;text-align:left;}
.carro-items{display:flex;flex-direction:column;gap:12px;}
.carro-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.12);}
.carro-item:last-child{border-bottom:0;padding-bottom:0;}
.carro-img{flex:0 0 75px;}
.carro-img img{display:block;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.10);width:75px;height:auto;}
.carro-main{flex:1 1 auto;min-width:0;}
.carro-title{font-size:14px;line-height:1.25;color:#222;margin-bottom:8px;overflow-wrap:anywhere;min-width:0;}
.carro-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.carro-qtt{width:44px;text-align:right;padding:6px 8px;border:1px solid rgba(0,0,0,.18);border-radius:10px;background:#fff;box-sizing:border-box;}
.carro-add{margin-top:16px;padding-top:12px;border-top:1px solid rgba(0,0,0,.12);}
.carro-add-title{display:inline-block;font-size:16px;font-weight:bold;color:var(--instop-red);cursor:pointer;}
.carro-add-inputs{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.carro-add-inputs .resaltat{padding:9px 10px;border:1px solid rgba(0,0,0,.18);border-radius:10px;box-sizing:border-box;width:min(260px,100%);}

@media (max-width:520px){.carro-box{padding:12px;}.carro-item{gap:10px;}}

/* ==========================================================
   SECCIONS FORMULARI DE COMPRA
   ========================================================== */
.titol-seccio-formulari{position:relative;padding-left:55px;/* espai pel número */font-size:20px;color:var(--instop-red);text-align:left;line-height:1.3;margin-bottom:20px;}
.titol-seccio-formulari .num-seccio{position:absolute;left:0;top:0;width:40px;height:40px;line-height:40px;font-size:36px;font-weight:bold;color:#fff;background-color:var(--instop-red);text-align:center;border-radius:4px;}
.titol-seccio-formulari .subtitol{display:block;margin-top:3px;font-size:14px;color:#666;font-weight:normal;}

/* ===== Ajustos d'espai (proporció visual) ===== */
#formulari-shop{margin-top:28px;}
.carro-wrap{margin-top:28px;}
#formulari-shop .boto-comprar{margin-top:30px;}
#carroContenidor{padding-bottom:45px;}

/* Força tipografia i mida quan XAJAX reescriu els selects */
#divProvincia select,#divPais select{font-family:var(--font-a,Arial,Helvetica,sans-serif) !important;font-size:14px !important;line-height:1.2 !important;}

/* Si algun cop entra un select sense classe, assegura padding i bordes coherents */
#divProvincia select,#divPais select{padding:9px 10px !important;border:1px solid rgba(0,0,0,.18) !important;border-radius:10px !important;background:#fff !important;color:#222 !important;box-sizing:border-box !important;width:100% !important;max-width:100% !important;}


/* ==========================================================
   Layout responsive per #taula_formulari (ara és un div)
   ========================================================== */
#taula_formulari.checkout-cols{width:min(1200px,95%);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;}
#taula_formulari.checkout-cols .checkout-col{min-width:0;}
#taula_formulari.checkout-cols .checkout-col--entrega{padding-top:10px;} /* substitueix el <br> antic */

/* Taules internes: que ocupin el 100% del seu contenidor */
#taula_formulari.checkout-cols #taula_facturacio,
#taula_formulari.checkout-cols #taula_entrega{width:100% !important;max-width:none !important;margin:0 !important;}

/* Responsive: apilar */
@media (max-width:980px){#taula_formulari.checkout-cols{grid-template-columns:1fr;gap:18px;}#taula_formulari.checkout-cols .checkout-col--entrega{padding-top:0;}}

/* ==========================================================
   PATCH v38 — igualar columnes Facturació / Entrega (mínim canvi)
   Funciona amb: <table id="taula_formulari"> ... <td width="50%"> ...</td>
   ========================================================== */

/* 1) Contenidor 2 columnes: aprofita amplada i fixa layout */
#taula_formulari{width:min(1200px,95%) !important;margin:0 auto;table-layout:fixed;}
#taula_formulari>tbody>tr>td{vertical-align:top;}

/* Treu el <br> que tens al td dret (evita desplaçaments “tontos”) */
#taula_formulari>tbody>tr>td[valign="top"]>br:first-child{display:none;}

/* 2) IMPORTANT: que les taules internes NO vagin al 80% */
#taula_formulari #taula_facturacio,
#taula_formulari #taula_entrega{width:100% !important;max-width:none !important;margin:0 !important;} /* complementa el cellspacing sense dependre’n */

/* 4) Unifica columna d’etiquetes (esquerra) */
#taula_formulari #taula_facturacio td.normal:first-child,
#taula_formulari #taula_entrega td.normal:first-child{
  width:180px !important;              /* mateix ample a les dues */
  white-space:nowrap;
  font-size:13px;
  letter-spacing:.2px;
  color:#333;
}

/* 5) Camps: que omplin l’espai disponible */
#taula_formulari #taula_facturacio input[type="text"],
#taula_formulari #taula_entrega input[type="text"],
#taula_formulari #taula_facturacio select,
#taula_formulari #taula_entrega select,
#taula_formulari #taula_facturacio textarea,
#taula_formulari #taula_entrega textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* 6) Responsive: apila les 2 columnes (sense tocar HTML) */
@media (max-width:980px){
  #taula_formulari,
  #taula_formulari>tbody,
  #taula_formulari>tbody>tr,
  #taula_formulari>tbody>tr>td{
    display:block;
    width:100% !important;
  }

  /* una mica d’aire entre seccions quan s’apila */
  #taula_formulari>tbody>tr>td + td{margin-top:18px;}
}

/* 7) Responsive extra: en pantalles molt estretes, etiqueta a sobre del camp */
@media (max-width:560px){
  #taula_formulari #taula_facturacio tr,
  #taula_formulari #taula_entrega tr{display:block;}

  #taula_formulari #taula_facturacio td.normal:first-child,
  #taula_formulari #taula_entrega td.normal:first-child{
    width:auto !important;
    display:block;
    margin-bottom:4px;
    white-space:normal;
  }

  #taula_formulari #taula_facturacio td.normal:first-child + td,
  #taula_formulari #taula_entrega td.normal:first-child + td{
    display:block;
    padding-top:0;
  }
}


/* ==========================================================
   PATCH v39 — FORMA DE PAGO: opcions mes grans i clares
   A INSTOP els <label> de pagament NO tenen classe propia; els
   identifiquem per id="LAB..." (contenen el radio .pago). Nomes visual.
   ========================================================== */

#formulari-shop label[id^="LAB"]{
  display:flex;
  align-items:center;
  gap:14px;
  margin:8px 0;
  max-width:520px;
  padding:14px 18px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  color:#222;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
#formulari-shop label[id^="LAB"]:hover{
  border-color:var(--instop-red-hover);
  background:#fff7f7;
}

/* Radio mes gran i amb color de marca */
#formulari-shop label[id^="LAB"] input.pago{
  width:22px;
  height:22px;
  flex:0 0 auto;
  margin:0;
  accent-color:var(--instop-red);
  cursor:pointer;
}
#formulari-shop label[id^="LAB"] span{flex:1 1 auto;}

/* Opcio seleccionada ben destacada */
/* Regla :has() omesa per compatibilitat amb Dreamweaver. */


/* ==========================================================
   PATCH v40 — Carro checkout dins #divCarroPetit (position:fixed)
   Un element fixe sense amplada s'expandeix a l'amplada preferida
   del contingut; limitem el wrap perque els titols llargs trenquin
   linia en lloc d'estirar el panell. Nomes afecta el checkout
   (el mini-carro del bdreta no te .carro-wrap).
   ========================================================== */
#divCarroPetit .carro-wrap{width:min(430px,calc(100vw - 30px));}
#divCarroPetit .carro-box{max-width:100%;box-sizing:border-box;}


/* ==========================================================
   PATCH v41 - Ergonomia checkout (nomes CSS, HTML intacte)
   Objectiu: ritme vertical identic a les dues columnes,
   camps amb alcada uniforme, capcaleres alineades i numerades,
   i blocs secundaris (checkbox, YA ESTOY REGISTRADO) integrats.
   ========================================================== */

/* 1) Neutralitza cellspacing/height dels atributs HTML:
      el ritme el marca nomes el padding, igual a les dues taules */
#taula_formulari #taula_facturacio,
#taula_formulari #taula_entrega{border-collapse:separate !important;border-spacing:0 !important;}
#taula_formulari #taula_facturacio td,
#taula_formulari #taula_entrega td{height:auto !important;padding:9px 10px;vertical-align:middle;}

/* 2) Camps amb aspecte i alcada identics (inputs, password i selects,
      incloent els que xajax reescriu a divPaisEntrega/divProvinciaEntrega) */
#taula_formulari input[type="text"],
#taula_formulari input[type="password"],
#taula_formulari select{padding:9px 10px;border:1px solid rgba(0,0,0,.18);border-radius:10px;background:#fff;color:#222;font-family:var(--font-a,Arial,Helvetica,sans-serif);font-size:14px;line-height:1.2;box-sizing:border-box;}

/* 3) Capcaleres de columna a la mateixa alcada de sortida */
#taula_formulari > tbody > tr > td > br{display:none;}
#taula_formulari h2.titol-seccio-formulari{margin:0 0 18px;min-height:64px;}

/* Numero "2" a DIRECCION DE ENTREGA (replica el .num-seccio sense tocar HTML;
   el h2 de la dreta es distingeix per la classe .tooltip) */
#taula_formulari h2.titol-seccio-formulari.tooltip::before{content:"2";position:absolute;left:0;top:0;width:40px;height:40px;line-height:40px;font-size:36px;font-weight:bold;color:#fff;background:var(--instop-red);text-align:center;border-radius:4px;}

/* 4) Espai entre columnes controlat (anul-la el cellpadding=10 de la taula pare) */
@media (min-width:981px){
  #taula_formulari > tbody > tr > td{padding:0 !important;}
  #taula_formulari > tbody > tr > td + td{padding-left:34px !important;}
}

/* 5) Fila del checkbox MARCAR SI... com a bloc destacat i clicable */
#taula_entrega tr:first-child td{padding:11px 14px !important;background:#f7f7f7;border:1px solid #e3e3e3;border-radius:10px;font-weight:700;cursor:pointer;}
#taula_entrega input[type="checkbox"]{width:18px;height:18px;accent-color:var(--instop-red);vertical-align:-4px;margin-right:8px;cursor:pointer;}

/* 6) Caixa YA ESTOY REGISTRADO coherent amb la resta
      (la taula porta border inline #CCC: cal !important) */
#taula_formulari div[align="center"] > p{display:none;} /* el <p>&nbsp;</p> separador */
#taula_formulari div[align="center"] > table{border:1px solid #e3e3e3 !important;border-radius:12px;background:#fafafa;margin-top:26px;padding:10px 14px 14px;}
#taula_formulari div[align="center"] .titol-seccio-formulari{padding-left:0;text-align:center;font-size:17px;margin-bottom:6px;}
#taula_formulari div[align="center"] td{padding:6px 8px;}
#taula_formulari div[align="center"] .detall a{font-size:11px;color:#666;text-decoration:underline;}

/* Boto OK del login */
#taula_formulari input[type="button"]{padding:9px 26px;border:1px solid rgba(0,0,0,.18);border-radius:10px;background:#fff;font-weight:700;font-size:14px;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;}
#taula_formulari input[type="button"]:hover{background:var(--instop-red-hover);border-color:var(--instop-red-hover);color:#fff;}

/* =========================================================
   VERSIO 09 - DREAMWEAVER + FORMULARIS UNIFICATS
   ========================================================= */

:root{
  --instop-form-border:#b8b8b8;
  --instop-form-focus:var(--instop-red);
  --instop-form-soft:#f4f5f6;
  --instop-form-green:#388600;
  --instop-form-green-hover:#317500;
}

/* Compatibilitat amb la vista Disseny de Dreamweaver.
   Les frases del slideshow continuen superposades, però amb una mida
   moderada perquè no tapin tota la regió editable. */
.slideshow-container{
  position:relative !important;
  width:100% !important;
  max-width:1050px !important;
  height:450px !important;
  overflow:hidden !important;
}

.slideshow-container .slide-frase{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  max-width:100% !important;
  overflow:hidden !important;
  padding:20px 34px !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-size:32px !important;
  line-height:1.15 !important;
  font-weight:600 !important;
  letter-spacing:-.02em !important;
  white-space:normal !important;
  overflow-wrap:break-word !important;
}

@media (max-width:900px){
  .slideshow-container .slide-frase{font-size:27px !important;padding:16px 24px !important;}
}

@media (max-width:640px){
  .slideshow-container{height:320px !important;}
  .slideshow-container .slide-frase{font-size:23px !important;padding:14px 18px !important;}
}

/* Formulari de leads: mateixa tipografia i acabat pla que el contingut. */
.instop-lead-modal,
.instop-lead-modal *{
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
}

.instop-lead-box{
  border:1px solid #d4d4d4;
  border-radius:4px;
  box-shadow:0 14px 38px rgba(0,0,0,.22);
}

.instop-lead-close{
  border-radius:2px;
}

.instop-lead-head h2{
  color:var(--instop-heading,#111827);
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:27px;
  line-height:1.16;
  font-weight:600;
  letter-spacing:-.025em;
}

.instop-lead-head p,
.instop-lead-grid input,
.instop-lead-grid textarea,
.instop-lead-actions p,
.instop-lead-msg{
  line-height:1.45;
}

.instop-lead-producte{
  border-left:4px solid var(--instop-form-green);
  border-radius:2px;
  background:#f3f8ef;
}

.instop-lead-grid input,
.instop-lead-grid textarea{
  border-color:var(--instop-form-border);
  border-radius:2px;
  box-shadow:none;
}

.instop-lead-grid input:focus,
.instop-lead-grid textarea:focus{
  outline:2px solid rgba(198,0,30,.14);
  border-color:var(--instop-form-focus);
}

.instop-lead-actions .instop-lead-submit,
.instop-web-lead-open,
button.instop-web-lead-open,
.boto-comprar.instop-web-lead-open{
  border-radius:3px !important;
  background:var(--instop-form-green) !important;
  box-shadow:none !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-weight:600 !important;
}

.instop-lead-actions .instop-lead-submit:hover,
.instop-web-lead-open:hover,
button.instop-web-lead-open:hover,
.boto-comprar.instop-web-lead-open:hover{
  background:var(--instop-form-green-hover) !important;
}

/* Formulari de compra: camps, targetes i controls més plans i homogenis. */
#formulari-shop,
#formulari-shop input,
#formulari-shop select,
#formulari-shop textarea,
#formulari-shop button{
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
}

#formulari-shop .camp-formulari,
#taula_facturacio textarea,
#taula_formulari input[type="text"],
#taula_formulari input[type="password"],
#taula_formulari select,
#divProvincia select,
#divPais select,
.carro-qtt,
.carro-add-inputs .resaltat,
#divCarroPetit33 input[id^="QTT"],
#divCarroPetit33 input.resaltat{
  border-color:var(--instop-form-border) !important;
  border-radius:2px !important;
  background:#fff !important;
  box-shadow:none !important;
  line-height:1.35 !important;
}

#formulari-shop .camp-formulari:focus,
#taula_facturacio textarea:focus,
#taula_formulari input[type="text"]:focus,
#taula_formulari input[type="password"]:focus,
#taula_formulari select:focus{
  outline:2px solid rgba(198,0,30,.14);
  border-color:var(--instop-form-focus) !important;
}

#divCarroPetit33,
.carro-box,
#taula_formulari div[align="center"] > table{
  border-radius:3px !important;
  box-shadow:none !important;
}

#divCarroPetit33,
.carro-box{
  background:#f7f8f8;
}

#divCarroPetit33 img,
.carro-img img{
  border-radius:2px;
  box-shadow:none;
}

#divCarroPetit33 .botonet-carro,
.boto-treure-carro,
#taula_formulari input[type="button"],
#formulari-shop label[id^="LAB"]{
  border-radius:3px;
  box-shadow:none;
}

#formulari-shop label[id^="LAB"]{
  font-size:16px;
  line-height:1.35;
}

#formulari-shop .boto-comprar{
  border-radius:3px;
  background:var(--instop-form-green);
  box-shadow:none;
  font-weight:600;
}

#formulari-shop .boto-comprar:hover{
  background:var(--instop-form-green-hover);
  filter:none;
}

.titol-seccio-formulari{
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-weight:600;
  letter-spacing:-.02em;
}

.titol-seccio-formulari .num-seccio,
#taula_formulari h2.titol-seccio-formulari.tooltip::before{
  border-radius:2px;
  background:var(--instop-primary,#b93425);
}

/* =========================================================
   VERSIO 10 - COMPATIBILITAT DREAMWEAVER: TEXT NORMAL INSTOP
   Mides en px per evitar que la vista Disseny interpreti .95rem
   com una mida desmesurada. No modifica l'estructura de la web.
   ========================================================= */
.normal_instop,
.normal_instop_dreta,
.normal_instop_NEGRE,
#contingut .normal_instop,
#contingut .normal_instop_dreta,
#contingut .normal_instop_NEGRE{
  font-size:15px;
  line-height:23px;
}

@media (max-width:768px){
  .normal_instop,
  .normal_instop_dreta,
  .normal_instop_NEGRE,
  #contingut .normal_instop,
  #contingut .normal_instop_dreta,
  #contingut .normal_instop_NEGRE{
    font-size:14px;
    line-height:21px;
  }
}

@media (max-width:480px){
  .normal_instop,
  .normal_instop_dreta,
  .normal_instop_NEGRE,
  #contingut .normal_instop,
  #contingut .normal_instop_dreta,
  #contingut .normal_instop_NEGRE{
    font-size:13px;
    line-height:20px;
  }
}

/* =========================================================
   VERSIO 12 - FITXES D'EXPERTS MES COMPACTES
   Els estils .normal_instop, .titol_Producte20 i .expert-card
   ja formen part del CSS principal fusionat. Aquest ajust queda
   limitat a .expert-info i no altera la resta de titulars.
   ========================================================= */
#contingut .expert-card .expert-info,
#contingut .expert-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  min-width:0;
}

#contingut .expert-info > .normal_instop,
#contingut .expert-info > p.normal_instop,
#contingut .expert-info > .titol_Producte20,
#contingut .expert-info > p.expert-contact{
  margin:0 !important;
  padding:0 !important;
  min-height:0 !important;
}

/* Els <br> antics abans i despres del nom afegien dues files senceres. */
#contingut .expert-info .titol_Producte20 br{
  display:none !important;
}

#contingut .expert-info > .titol_Producte20,
#contingut .expert-info > .titol_Producte20 > a.titol_Producte20{
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-size:27px !important;
  line-height:32px !important;
  font-weight:600 !important;
  letter-spacing:-.02em !important;
  color:var(--instop-heading,#20242a) !important;
  text-decoration:none !important;
}

#contingut .expert-info > .titol_Producte20 > a.titol_Producte20{
  display:inline !important;
  margin:0 !important;
  padding:0 !important;
}

#contingut .expert-info > .normal_instop,
#contingut .expert-info > p.normal_instop{
  font-size:15px !important;
  line-height:21px !important;
}

#contingut .expert-info > p.expert-contact{
  font-size:15px;
  line-height:21px;
}

@media (max-width:768px){
  #contingut .expert-info{
    gap:8px;
  }

  #contingut .expert-info > .titol_Producte20,
  #contingut .expert-info > .titol_Producte20 > a.titol_Producte20{
    font-size:23px !important;
    line-height:28px !important;
  }
}

.product-category-title a:hover,
#contingut .product-category-title a:hover{
  color:var(--instop-red-hover) !important;
  border-bottom-color:var(--instop-red-hover);
}

.items-grid,
#contingut .items-grid{
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:22px;
}

.item-card,
#contingut .item-card{
  background:#fff;
}

.item-card:hover,
#contingut .item-card:hover{
  border-color:#b8bcc0;
}

.item-nom,
#contingut .item-nom{
  align-items:flex-start;
  justify-content:center;
}

.item-nom a:hover,
#contingut .item-nom a:hover{
  color:var(--instop-red-hover) !important;
}

.item-refbar,
#contingut .item-refbar{
  background:#f3f3f3;
}

.item-stock,
#contingut .item-stock{
  text-align:center;
}

.item-price,
#contingut .item-price{
  color:#20242a !important;
}

.item-buy,
#contingut .item-buy{
  background:#56872b;
  border:0 !important;
  font-size:13px !important;
  line-height:40px !important;
  font-weight:700 !important;
  text-transform:uppercase;
  cursor:pointer;
}

.item-buy:hover,
#contingut .item-buy:hover{
  background:#416b1f;
  text-decoration:none !important;
}

.item-buy--cart,
#contingut .item-buy--cart{
  overflow:hidden;
}

.item-buy--consult,
#contingut .item-buy--consult{
  background:var(--instop-red);
}

.item-buy--consult:hover,
#contingut .item-buy--consult:hover{
  background:var(--instop-red-hover);
}

@media (max-width:760px){

  .items-grid,
  #contingut .items-grid{
    grid-template-columns:repeat(auto-fill,minmax(205px,1fr));
    gap:16px;
  }
}

@media (max-width:480px){
}

.item-nom a,
#contingut .item-nom a{
  display:-webkit-box !important;
}

@media (max-width:760px){
}

@media (max-width:480px){
  .item-nom,
  #contingut .item-nom{
    min-height:44px !important;
    height:44px !important;
    max-height:44px !important;
  }
}

/* =========================================================
   VERSIO 15 - GRAELLA DE PRODUCTES MES NETA
   Separacio real entre fitxes i titols limitats a dues linies.
   ========================================================= */
.items-grid,
#contingut .items-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important;
  column-gap:14px !important;
  row-gap:18px !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  width:100% !important;
  margin:0 0 38px !important;
  padding:2px !important;
  box-sizing:border-box !important;
}

.item-card,
#contingut .item-card{
  float:none !important;
  max-width:none !important;
  border:1px solid #d8dade !important;
  border-radius:13px !important;
}

.item-nom a,
#contingut .item-nom a{
  display:-webkit-box !important;
}

@media (max-width:760px){
  .items-grid,
  #contingut .items-grid{
    grid-template-columns:repeat(auto-fill,minmax(205px,1fr)) !important;
    column-gap:10px !important;
    row-gap:14px !important;
  }
}

@media (max-width:480px){
  .items-grid,
  #contingut .items-grid{
    grid-template-columns:1fr !important;
    row-gap:14px !important;
    padding:0 !important;
  }
}

.items-grid > .item-card,
#contingut .items-grid > .item-card,
.product-category-grid > .item-card,
#contingut .product-category-grid > .item-card{
  grid-column:auto !important;
  flex:0 0 calc((100% - 42px) / 4) !important;
  width:calc((100% - 42px) / 4) !important;
  max-width:calc((100% - 42px) / 4) !important;
}

.item-nom a,
#contingut .item-nom a{
  display:-webkit-box !important;
}

@media (max-width:1050px){
  .items-grid > .item-card,
  #contingut .items-grid > .item-card,
  .product-category-grid > .item-card,
  #contingut .product-category-grid > .item-card{
    flex-basis:calc((100% - 28px) / 3) !important;
    width:calc((100% - 28px) / 3) !important;
    max-width:calc((100% - 28px) / 3) !important;
  }
}

@media (max-width:760px){

  .items-grid > .item-card,
  #contingut .items-grid > .item-card,
  .product-category-grid > .item-card,
  #contingut .product-category-grid > .item-card{
    flex-basis:calc((100% - 10px) / 2) !important;
    width:calc((100% - 10px) / 2) !important;
    max-width:calc((100% - 10px) / 2) !important;
  }
}

@media (max-width:480px){
}

/* =========================================================
   VERSIO 17 - GRAELLES DE PRODUCTE EN PLANTILLES DIFERENTS
   Corregeix l'amplada de les files dins .contenidor-1050 i
   unifica la graella moderna i la graella antiga #item_2.
   ========================================================= */

/* .contenidor-1050 es flex: cada fila editorial ha d'ocupar
   tota l'amplada. Sense aquesta regla la fila es pot encongir
   i la graella moderna acaba mostrant només dues columnes. */
.contenidor-1050 > .fila,
#contingut .contenidor-1050 > .fila{
  display:block !important;
  flex:0 0 100% !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
}

/* Graella moderna generada per dades_producte.php. */
.contenidor-1050 > .fila > .items-grid,
#contingut .contenidor-1050 > .fila > .items-grid,
.contenidor-1050 > .fila > .product-category-grid,
#contingut .contenidor-1050 > .fila > .product-category-grid{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}

/* Graella antiga utilitzada en algunes intros.
   Tot i repetir l'id item_2, mantenim compatibilitat sense
   haver de modificar totes les llibreries antigues. */
#zona-text2 td[valign="top"]{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}

#zona-text2 td[valign="top"]::after{
  content:"";
  display:block;
  clear:both;
}

#zona-text2 #item_2.item-card{
  float:left !important;
  clear:none !important;
  display:flex !important;
  flex-direction:column !important;
  width:calc((100% - 42px) / 4) !important;
  min-width:0 !important;
  max-width:calc((100% - 42px) / 4) !important;
  height:auto !important;
  min-height:356px !important;
  margin:0 14px 18px 0 !important;
  padding:14px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

#zona-text2 #item_2.item-card:nth-of-type(4n){
  margin-right:0 !important;
}

/* El nom antic és un div, no sempre conté un enllaç. */
#zona-text2 #item_2 .item-nom,
#zona-text2 #item_2 .nom_producte_2{
  display:-webkit-box !important;
  width:100% !important;
  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;
  margin:0 0 10px !important;
  padding:0 2px !important;
  overflow:hidden !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  line-clamp:2 !important;
  font-size:15px !important;
  line-height:22px !important;
  text-align:center !important;
  text-overflow:ellipsis !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}

#zona-text2 #item_2 .item-img,
#zona-text2 #item_2 .imatge_producte_2{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:190px !important;
  max-height:190px !important;
  margin:0 auto 10px !important;
  object-fit:contain !important;
}

#zona-text2 #item_2 .item-refbar{
  width:100% !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

#zona-text2 #item_2 .item-footer{
  width:100% !important;
  margin-top:auto !important;
  box-sizing:border-box !important;
}

@media (max-width:900px){
  #zona-text2 #item_2.item-card{
    width:calc((100% - 28px) / 3) !important;
    max-width:calc((100% - 28px) / 3) !important;
  }

  #zona-text2 #item_2.item-card:nth-of-type(4n){
    margin-right:14px !important;
  }

  #zona-text2 #item_2.item-card:nth-of-type(3n){
    margin-right:0 !important;
  }
}

@media (max-width:680px){
  #zona-text2 #item_2.item-card{
    width:calc((100% - 10px) / 2) !important;
    max-width:calc((100% - 10px) / 2) !important;
    margin-right:10px !important;
    margin-bottom:14px !important;
  }

  #zona-text2 #item_2.item-card:nth-of-type(3n){
    margin-right:10px !important;
  }

  #zona-text2 #item_2.item-card:nth-of-type(2n){
    margin-right:0 !important;
  }
}

@media (max-width:460px){
  #zona-text2 #item_2.item-card{
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    margin-right:0 !important;
  }
}

/* =========================================================
   VERSIO 18 - BOTO CONSULTAR HORITZONTAL A LES FITXES
   Evita que regles antigues d'afegirCarro el converteixin
   en un boto quadrat i trenquin la paraula en vertical.
   ========================================================= */
.product-category-grid .afegirCarro.item-buy--consult,
#contingut .product-category-grid .afegirCarro.item-buy--consult,
.items-grid .afegirCarro.item-buy--consult,
#contingut .items-grid .afegirCarro.item-buy--consult{
  background:var(--instop-red) !important;
  border:0 !important;
  box-sizing:border-box !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  text-align:center !important;
  text-decoration:none !important;
}

.product-category-grid .afegirCarro.item-buy--consult:hover,
#contingut .product-category-grid .afegirCarro.item-buy--consult:hover,
.items-grid .afegirCarro.item-buy--consult:hover,
#contingut .items-grid .afegirCarro.item-buy--consult:hover{
  color:#fff !important;
  background:var(--instop-red-hover) !important;
}

/* =========================================================
   2026-CATALEG-01 FUSIONAT A LA VERSIO 19
   Font original incorporada per eliminar una crida CSS externa.
   Els acabats finals s'unifiquen al bloc VERSIO 19 inferior.
   ========================================================= */
/* =========================
   Grid
   ========================= */
.items-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
@media (max-width:980px){.items-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:700px){.items-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:420px){.items-grid{grid-template-columns:1fr;}}

/* =========================
   Card
   ========================= */
.item-card{border:1px solid rgba(0,0,0,.10);border-radius:14px;padding:14px;background:#fff;box-shadow:0 1px 10px rgba(0,0,0,.05);display:flex;flex-direction:column;min-height:420px;transition:.12s ease;} /* ajusta: 400-460 */
.item-card:hover{background:#f6f6f6;transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.08);border-color:rgba(0,0,0,.16);}

/* =========================
   Imatge
   ========================= */
.item-img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:12px;background:#fff;margin-bottom:10px;display:block;}

/* =========================
   Text
   ========================= */
.item-nom{font-weight:400;line-height:1.22;margin:0 0 6px;font-size:15px;color:#222;white-space:normal;overflow:visible;min-height:68px;} /* una mica més d’aire */ /* ⬅️ clau */ /* acompanya l’augment */
.item-ref{margin:0;font-size:15px;font-weight:800;letter-spacing:.4px;color:#000;} /* ⬆️ més gran */ /* ✔️ negreta forta */

/* franja base */
.item-refbar{margin-top:6px;padding:12px 10px;background:#f3f3f3;border-radius:10px;text-align:center;}

/* quan NO hi ha stock → franja molt més compacta */
.item-refbar--nostock{padding:6px 8px;}

/* stock només quan existeix */
.item-stock{margin-top:6px;display:flex;justify-content:center;}

/* Pastilla stock */
.stock-msg{display:inline-block;padding:6px 10px;border-radius:999px;background:#fff;font-size:12px;font-weight:700;line-height:1.2;text-decoration:none;}
.stock-ok{color:#1f6b1f;}
.stock-wait{color:#1b4f9c;}
.stock-wait:hover{text-decoration:underline;}

/* =========================
   Footer (a baix)
   ========================= */
.item-footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid rgba(0,0,0,.06);}
.item-price{margin:0;font-weight:800;font-size:15px;white-space:nowrap;}

/* =========================
   Botó
   ========================= */
.item-buy{width:38px;height:38px;border:0;border-radius:10px;background:var(--instop-red);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;transition:.12s ease;}
.item-buy:hover{background:var(--instop-red-hover);transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.18);}
.item-buy:active{transform:translateY(0);box-shadow:none;}
.item-buy img{width:18px;height:18px;display:block;}

/* Focus */
.item-buy:focus-visible,.item-card a:focus-visible{outline:3px solid rgba(229,69,42,.35);outline-offset:3px;border-radius:10px;}
/* =========================================================
   2026-VIDEOS-03 FUSIONAT A LA VERSIO 19
   Font original incorporada per eliminar una crida CSS externa.
   Els acabats finals s'unifiquen al bloc VERSIO 19 inferior.
   ========================================================= */

/* Contenidor */
#container{width:516px;height:120px;clear:both;}
img.carousel-image{max-height:100px;}
.centrat{margin:0 auto;padding:20px 0;}
.video:hover{z-index:10;}

/* Radi coherent */
.video,.video a.mfp-iframe,.video img{border-radius:14px;}

/* Capa fosca + degradat (sempre visible) */
.video span::before{
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 100%),
    linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0));
}

/* Botó PLAY (lleugerament més petit) */
.video span::after{
  aspect-ratio:1/1;
}

/* Etiqueta "VÍDEO" (deixa clar què és) */
.video a.mfp-iframe::before{
  background:rgba(0,0,0,.62);
}
.video:hover span::after{
  background:rgba(215,0,0,.88);
}

/* Magnific Popup fade */
.mfp-with-fade .mfp-content,
.mfp-with-fade .mfp-arrow,
.mfp-with-fade.mfp-bg{
  opacity:0;
  backface-visibility:hidden;
  transition:opacity .3s ease-out;
}
.mfp-with-fade.mfp-ready .mfp-content,
.mfp-with-fade.mfp-ready .mfp-arrow{opacity:1;}
.mfp-with-fade.mfp-ready.mfp-bg{opacity:.8;}
.mfp-with-fade.mfp-removing .mfp-content,
.mfp-with-fade.mfp-removing .mfp-arrow,
.mfp-with-fade.mfp-removing.mfp-bg{opacity:0;}

/* Popup vídeo */
.mfp-iframe-holder .mfp-content{
  width:min(980px,92vw);
  height:min(552px,52vw);
}
/* =========================================================
   VERSIO 19 - CATALEG + VIDEOS UNIFICATS AMB EL CSS PRINCIPAL
   Petit pas visual cap a SCCS: superfícies més planes, radis
   continguts, colors coherents i interaccions menys decoratives.
   La taula DISTO no forma part d'aquesta fusió i queda separada.
   ========================================================= */
:root{
  --instop-red:var(--cap-red,#b93425);
  --instop-red-hover:var(--cap-red-dark,#8f281d);
  --instop-green:#438600;
  --instop-green-hover:#367000;
  --instop-heading:#20242a;
  --instop-ink:#40454a;
  --instop-muted:#697078;
  --instop-line:#d7dadd;
  --instop-line-strong:#b9bec3;
  --instop-soft:#f4f5f6;
  --instop-surface:#ffffff;
  --instop-radius:4px;
}

/* ---------- Titular de grup de productes ---------- */
.product-category-title,
#contingut .product-category-title{
  margin:0 0 24px !important;
  padding:0 !important;
  color:var(--instop-heading) !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-size:28px !important;
  line-height:34px !important;
  font-weight:500 !important;
  letter-spacing:-.02em !important;
  text-align:left !important;
}

.product-category-title a,
#contingut .product-category-title a{
  color:inherit !important;
  text-decoration:none !important;
  border-bottom:1px solid #aeb2b6;
}

.product-category-title a:hover,
#contingut .product-category-title a:hover{
  color:var(--instop-red) !important;
  border-bottom-color:var(--instop-red);
}

/* ---------- Graella: es conserven les correccions v16-v18 ---------- */
.items-grid,
#contingut .items-grid,
.product-category-grid,
#contingut .product-category-grid{
  display:flex !important;
  flex-flow:row wrap !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:18px 14px !important;
  width:100% !important;
  margin:0 0 38px !important;
  padding:2px !important;
  box-sizing:border-box !important;
}

.items-grid > .item-card,
#contingut .items-grid > .item-card,
.product-category-grid > .item-card,
#contingut .product-category-grid > .item-card{
  float:none !important;
  clear:none !important;
  flex:0 0 calc((100% - 42px) / 4) !important;
  width:calc((100% - 42px) / 4) !important;
  min-width:0 !important;
  max-width:calc((100% - 42px) / 4) !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* ---------- Targeta de producte més plana i tècnica ---------- */
.item-card,
#contingut .item-card{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:14px !important;
  overflow:hidden !important;
  background:var(--instop-surface) !important;
  border:1px solid var(--instop-line) !important;
  border-radius:var(--instop-radius) !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
  transition:border-color .18s ease,background-color .18s ease !important;
}

.item-card:hover,
#contingut .item-card:hover{
  background:#fafafa !important;
  border-color:var(--instop-line-strong) !important;
  box-shadow:none !important;
  transform:none !important;
}

.item-link,
#contingut .item-link{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:205px !important;
  margin:0 0 10px !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#fff !important;
  text-decoration:none !important;
}

.item-img,
#contingut .item-img{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:195px !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#fff !important;
  object-fit:contain !important;
  aspect-ratio:auto !important;
}

.item-nom,
#contingut .item-nom{
  display:block !important;
  min-height:44px !important;
  height:44px !important;
  max-height:44px !important;
  margin:0 0 11px !important;
  padding:0 2px !important;
  overflow:hidden !important;
  color:var(--instop-heading) !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-size:15px !important;
  line-height:22px !important;
  font-weight:400 !important;
  text-align:center !important;
}

.item-nom a,
#contingut .item-nom a{
  display:-webkit-box !important;
  width:100% !important;
  height:44px !important;
  max-height:44px !important;
  overflow:hidden !important;
  color:inherit !important;
  font:inherit !important;
  text-decoration:none !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  line-clamp:2 !important;
  text-overflow:ellipsis !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}

.item-nom a:hover,
#contingut .item-nom a:hover{
  color:var(--instop-red) !important;
}

.item-refbar,
#contingut .item-refbar{
  width:100% !important;
  margin:0 !important;
  padding:10px !important;
  background:var(--instop-soft) !important;
  border:0 !important;
  border-radius:3px !important;
  text-align:center !important;
  box-sizing:border-box !important;
}

.item-refbar--nostock,
#contingut .item-refbar--nostock{
  padding:7px 9px !important;
}

.item-ref,
#contingut .item-ref{
  margin:0 !important;
  padding:0 !important;
  color:#17191c !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-size:16px !important;
  line-height:22px !important;
  font-weight:700 !important;
  letter-spacing:.035em !important;
  text-align:center !important;
}

.item-stock,
#contingut .item-stock{
  display:flex !important;
  justify-content:center !important;
  min-height:20px;
  margin:7px 0 0 !important;
  padding:0 !important;
}

.stock-msg,
#contingut .stock-msg{
  display:inline-block !important;
  padding:4px 8px !important;
  border:1px solid #e0e2e4;
  border-radius:2px !important;
  background:#fff !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-size:11px !important;
  line-height:16px !important;
  font-weight:600 !important;
  text-decoration:none !important;
}

.stock-ok,
#contingut .stock-ok{color:#477523 !important;}
.stock-wait,
#contingut .stock-wait{color:#98501e !important;}
.stock-wait:hover,
#contingut .stock-wait:hover{text-decoration:underline !important;}

.item-footer,
#contingut .item-footer{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  width:100% !important;
  min-height:48px;
  margin-top:auto !important;
  padding:13px 0 0 !important;
  border-top:1px solid #e7e9eb !important;
  box-sizing:border-box !important;
}

.item-price,
#contingut .item-price{
  margin:0 !important;
  padding:0 !important;
  color:var(--instop-heading) !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-size:17px !important;
  line-height:22px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}

.item-price:empty,
#contingut .item-price:empty{display:none !important;}

.item-buy,
#contingut .item-buy{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:38px;
  min-width:38px;
  height:38px;
  min-height:38px;
  margin-left:auto !important;
  padding:0 !important;
  overflow:hidden;
  color:#fff !important;
  background:var(--instop-green) !important;
  border:1px solid var(--instop-green) !important;
  border-radius:3px !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  text-decoration:none !important;
  transition:background-color .18s ease,border-color .18s ease !important;
}

.item-buy:hover,
#contingut .item-buy:hover{
  color:#fff !important;
  background:var(--instop-green-hover) !important;
  border-color:var(--instop-green-hover) !important;
  box-shadow:none !important;
  transform:none !important;
}

.item-buy img,
#contingut .item-buy img{
  display:block;
  width:18px;
  height:18px;
}

.item-buy--cart,
#contingut .item-buy--cart{
  width:38px !important;
  min-width:38px !important;
  padding:0 !important;
  font-size:0 !important;
}

.item-buy--cart::before,
#contingut .item-buy--cart::before{
  content:"";
  display:block;
  width:22px;
  height:22px;
  background:url("/ic/carro.svg") no-repeat center center;
  background-size:contain;
  filter:brightness(0) invert(1);
}

/* Consultar continua horitzontal i amb el vermell corporatiu. */
.product-category-grid .afegirCarro.item-buy--consult,
#contingut .product-category-grid .afegirCarro.item-buy--consult,
.items-grid .afegirCarro.item-buy--consult,
#contingut .items-grid .afegirCarro.item-buy--consult{
  display:inline-flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:92px !important;
  max-width:none !important;
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  margin:0 0 0 auto !important;
  padding:0 14px !important;
  overflow:visible !important;
  color:#fff !important;
  background:var(--instop-red) !important;
  border:1px solid var(--instop-red) !important;
  border-radius:3px !important;
  font-size:12px !important;
  line-height:36px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  overflow-wrap:normal !important;
  word-break:keep-all !important;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
}

.product-category-grid .afegirCarro.item-buy--consult:hover,
#contingut .product-category-grid .afegirCarro.item-buy--consult:hover,
.items-grid .afegirCarro.item-buy--consult:hover,
#contingut .items-grid .afegirCarro.item-buy--consult:hover{
  background:var(--instop-red-hover) !important;
  border-color:var(--instop-red-hover) !important;
}

.item-buy:focus-visible,
.item-card a:focus-visible,
#contingut .item-buy:focus-visible,
#contingut .item-card a:focus-visible{
  outline:2px solid var(--instop-red) !important;
  outline-offset:3px !important;
  border-radius:3px !important;
}

/* ---------- Vídeos: més plans i amb menys moviment ---------- */
.grupyoutube{
  display:flex;
  flex-wrap:nowrap;
  gap:14px;
  padding:16px 8px 20px;
  overflow-x:auto;
  overflow-y:visible;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:#b9bec3 #f1f2f3;
}

.video{
  flex:0 0 auto;
  max-width:170px;
  margin:0;
  position:relative;
  z-index:1;
}

.video,
.video a.mfp-iframe,
.video img{
  border-radius:var(--instop-radius) !important;
}

.video a.mfp-iframe{
  display:block;
  position:relative;
  overflow:hidden;
  background:#111;
  border:1px solid var(--instop-line);
  box-shadow:none;
  transform:translateZ(0);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  will-change:transform;
  cursor:pointer;
}

.video:hover a.mfp-iframe{
  transform:scale(1.025) !important;
  border-color:var(--instop-line-strong);
  box-shadow:0 6px 16px rgba(20,30,40,.13);
  filter:none !important;
}

.video img{
  display:block;
  width:100%;
  height:auto;
}

.video span{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  border-radius:inherit;
}

.video span::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(to top,rgba(0,0,0,.42),rgba(0,0,0,.08));
  opacity:.46;
  transition:opacity .18s ease;
}

.video span::after{
  content:"";
  width:58px;
  height:58px;
  max-width:none;
  max-height:none;
  border-radius:50%;
  background:rgba(20,20,20,.72);
  border:1px solid rgba(255,255,255,.86);
  box-shadow:0 5px 14px rgba(0,0,0,.28);
  transition:background-color .18s ease,transform .18s ease;
}

.video a.mfp-iframe::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  border-left:20px solid #fff;
  border-top:13px solid transparent;
  border-bottom:13px solid transparent;
  opacity:1;
  pointer-events:none;
  transform:translate(-34%,-50%);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
  transition:transform .18s ease;
}

.video a.mfp-iframe::before{
  content:"VÍDEO";
  position:absolute;
  left:8px;
  top:8px;
  z-index:2;
  padding:4px 7px;
  border:0;
  border-radius:2px;
  background:var(--instop-red);
  color:#fff;
  font:700 10px/1 "Open Sans",Arial,Helvetica,sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  filter:none;
  opacity:1;
  pointer-events:none;
}

.video:hover span::before{opacity:.56;}
.video:hover span::after{
  background:var(--instop-red);
  border-color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.30);
  transform:scale(1.04);
}
.video:hover a.mfp-iframe::after{
  transform:translate(-34%,-50%) scale(1.04);
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.45));
}

.mfp-iframe-holder .mfp-content{
  width:92vw;
  max-width:980px;
  height:auto;
  max-height:90vh;
}

/* ---------- Responsive ---------- */
@media (max-width:1050px){
  .items-grid > .item-card,
  #contingut .items-grid > .item-card,
  .product-category-grid > .item-card,
  #contingut .product-category-grid > .item-card{
    flex-basis:calc((100% - 28px) / 3) !important;
    width:calc((100% - 28px) / 3) !important;
    max-width:calc((100% - 28px) / 3) !important;
  }
}

@media (max-width:760px){
  .product-category-title,
  #contingut .product-category-title{
    margin-bottom:18px !important;
    font-size:24px !important;
    line-height:30px !important;
  }

  .items-grid,
  #contingut .items-grid,
  .product-category-grid,
  #contingut .product-category-grid{
    gap:14px 10px !important;
  }

  .items-grid > .item-card,
  #contingut .items-grid > .item-card,
  .product-category-grid > .item-card,
  #contingut .product-category-grid > .item-card{
    flex-basis:calc((100% - 10px) / 2) !important;
    width:calc((100% - 10px) / 2) !important;
    max-width:calc((100% - 10px) / 2) !important;
  }

  .item-link,
  #contingut .item-link{
    height:180px !important;
  }

  .item-img,
  #contingut .item-img{
    max-height:172px !important;
  }

  .grupyoutube{
    gap:12px;
    padding:14px 4px 18px;
  }

  .video{max-width:155px;}
}

@media (max-width:480px){
  .items-grid,
  #contingut .items-grid,
  .product-category-grid,
  #contingut .product-category-grid{
    padding:0 !important;
  }

  .items-grid > .item-card,
  #contingut .items-grid > .item-card,
  .product-category-grid > .item-card,
  #contingut .product-category-grid > .item-card{
    flex-basis:100% !important;
    width:100% !important;
    max-width:100% !important;
  }

  .item-card,
  #contingut .item-card{
    padding:13px !important;
  }

  .item-link,
  #contingut .item-link{
    height:205px !important;
  }

  .item-img,
  #contingut .item-img{
    max-height:195px !important;
  }
}


/* =========================================================
   VERSIO 20 - 2026-PAGINA-ARTICLES-03 FUSIONAT
   Estructura especifica de pagines d articles.
   ========================================================= */

.dos-columnes-text,.tres-columnes-text,.cinc-columnes-text{display:flex;flex-wrap:wrap;gap:20px;max-width:1000px;margin:0 auto}
.dos-columnes-text .columna{flex:1 1 calc(50% - 20px);min-width:300px}
.tres-columnes-text .columna{flex:1 1 30%;min-width:280px}
.cinc-columnes-text .columna{flex:1 1 18%;min-width:220px}
.video-container{width:100%;max-width:1050px;margin:0 auto;position:relative;padding-top:56.25%;height:0}
.video-container iframe,.video-container video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.wrap-video{width:100%;max-width:100%;box-sizing:border-box}
.wrap-video video,.dji-six-zones33 video{width:100%;max-width:100%;height:auto;display:block}
.dji-six-zones33 video{object-fit:contain}
.dji-six-zones33 video.auto-hover{margin:0 auto;border-radius:8px}
.six-zones33{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:20px auto;max-width:1050px}
.six-zone33:empty{display:none}
.six-zone33{padding:12px;border:1px solid #ddd;background:#fff;text-align:center}
.wrap-1046{max-width:1046px;margin:0 auto;background:#fff}
.barra-top{height:27px}
.bloc-contingut{padding:0}
.fila-principal{display:flex;flex-wrap:wrap;align-items:flex-start;min-width:0}
.col-img{flex:0 0 420px;min-height:420px;box-sizing:border-box;margin-top:20px}
.col-text{flex:1 1 620px;min-width:0;box-sizing:border-box;padding-left:0}
.col-text img,.col-text video,.col-text iframe,.col-text table{max-width:100%!important;height:auto}
.text2,.din,.fac{margin-top:1rem}
@media (max-width:768px){.dos-columnes-text .columna,.tres-columnes-text .columna,.cinc-columnes-text .columna{flex:1 1 100%}.six-zones33{grid-template-columns:1fr}}
@media (min-width:1046px){.video-container{width:1046px;height:550px}}
@media (max-width:1045px){.fila-principal{display:block}.col-img{display:none!important}.col-text,#zona-text1{display:block;width:100%!important;max-width:100%!important;min-width:0;min-height:auto;padding:0 16px;overflow-wrap:break-word;word-break:normal}}

/* =========================================================
   VERSIO 20 - BANNER LATERAL INSTOP V20 FUSIONAT
   El banner queda al final per conservar les seves prioritats.
   ========================================================= */

/* BANNER LATERAL INSTOP V20 - SO CENTRAT I +50 PX EN PANTALLES AMPLES */
:root{--instop-banner-lateral-amplada:510px;--instop-banner-lateral-separacio:0px;--instop-banner-lateral-top:28px;--instop-banner-lateral-bottom:0;--instop-banner-lateral-radius:0;}
.instop-page-with-left-banner{width:100%;min-width:0;box-sizing:border-box;}
.instop-banner-vertical-escriptori{display:none;}
.instop-banner-vertical-escriptori .rjs-banner,.instop-banner-vertical-escriptori .raw-banner-conjunt{position:relative!important;display:block!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#ededed!important;border-radius:0!important;box-shadow:none!important;isolation:isolate;}
.instop-banner-vertical-escriptori .rjs-frame,.instop-banner-vertical-escriptori .raw-banner-frame{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;border-radius:0!important;text-decoration:none!important;color:inherit!important;opacity:0!important;pointer-events:none!important;z-index:1!important;transition:opacity .6s ease!important;}
.instop-banner-vertical-escriptori .rjs-frame.rjs-on,.instop-banner-vertical-escriptori .raw-banner-frame.rjs-on,.instop-banner-vertical-escriptori .raw-banner-frame.raw-video-on{opacity:1!important;pointer-events:auto!important;z-index:2!important;}
.instop-banner-vertical-escriptori .rjs-img,.instop-banner-vertical-escriptori .raw-banner-img,.instop-banner-vertical-escriptori .raw-banner-video{position:absolute!important;inset:0!important;display:block!important;width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;margin:0!important;padding:0!important;object-fit:cover!important;object-position:center!important;border:0!important;border-radius:0!important;z-index:1!important;}
.instop-banner-vertical-escriptori .raw-banner-video{background:#000!important;}
.instop-banner-vertical-escriptori .raw-banner-text,.instop-banner-vertical-escriptori .rjs-content,.instop-banner-vertical-escriptori .rjs-caption{position:relative!important;z-index:5!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:.65em!important;width:auto!important;max-width:88%!important;margin:0 auto!important;padding:20px 22px!important;box-sizing:border-box!important;color:#fff!important;text-align:center!important;line-height:1.15!important;text-shadow:0 4px 18px rgba(0,0,0,.68),0 1px 4px rgba(0,0,0,.65)!important;pointer-events:none!important;}
.instop-banner-vertical-escriptori .raw-banner-title,.instop-banner-vertical-escriptori .rjs-title{display:block!important;font-family:Arial,Helvetica,sans-serif!important;font-size:var(--raw-title-size,clamp(23px,1.8vw,34px))!important;white-space:pre-line!important;font-weight:800!important;letter-spacing:.035em!important;color:#fff!important;}
.instop-banner-vertical-escriptori .raw-banner-subtitle,.instop-banner-vertical-escriptori .rjs-sub{display:block!important;margin-top:.35em!important;font-family:Arial,Helvetica,sans-serif!important;font-size:var(--raw-subtitle-size,clamp(15px,1.15vw,20px))!important;white-space:pre-line!important;font-weight:600!important;line-height:1.25!important;color:#fff!important;}
.instop-banner-vertical-escriptori .raw-banner-logo{position:absolute!important;top:18px!important;right:18px!important;z-index:6!important;display:block!important;width:105px!important;max-width:42%!important;height:auto!important;margin:0!important;opacity:.96!important;}
.instop-banner-vertical-escriptori .rjs-prev,.instop-banner-vertical-escriptori .rjs-next{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;z-index:8!important;display:flex!important;align-items:center!important;justify-content:center!important;width:36px!important;height:36px!important;padding:0!important;border:0!important;border-radius:999px!important;background:rgba(0,0,0,.38)!important;color:#fff!important;font-size:22px!important;line-height:1!important;cursor:pointer!important;}
.instop-banner-vertical-escriptori .rjs-prev{left:8px!important;}
.instop-banner-vertical-escriptori .rjs-next{right:8px!important;}
.instop-banner-vertical-escriptori .raw-banner-single .rjs-prev,.instop-banner-vertical-escriptori .raw-banner-single .rjs-next,.instop-banner-vertical-escriptori .raw-banner-video-sequence .rjs-prev,.instop-banner-vertical-escriptori .raw-banner-video-sequence .rjs-next{display:none!important;}
.instop-banner-vertical-escriptori .raw-banner-video-sequence .raw-banner-frame,.instop-banner-vertical-escriptori .raw-banner-video-sequence .raw-banner-frame.rjs-on{opacity:0!important;pointer-events:none!important;}
.instop-banner-vertical-escriptori .raw-banner-video-sequence .raw-banner-frame.raw-video-on,.instop-banner-vertical-escriptori .raw-banner-video-sequence .raw-banner-frame.raw-video-on.rjs-on{opacity:1!important;pointer-events:auto!important;z-index:2!important;}
.instop-banner-vertical-escriptori .raw-banner-conjunt-track{position:relative!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;}
.instop-banner-vertical-escriptori .raw-banner-slide{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;}
.instop-banner-vertical-escriptori .raw-banner-slide .raw-banner{position:relative!important;display:block!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;}

.instop-banner-vertical-escriptori .raw-banner-frame.raw-text-top-left{justify-content:flex-start!important;align-items:flex-start!important}.instop-banner-vertical-escriptori .raw-banner-frame.raw-text-top-center{justify-content:center!important;align-items:flex-start!important}.instop-banner-vertical-escriptori .raw-banner-frame.raw-text-top-right{justify-content:flex-end!important;align-items:flex-start!important}.instop-banner-vertical-escriptori .raw-banner-frame.raw-text-center-left{justify-content:flex-start!important;align-items:center!important}.instop-banner-vertical-escriptori .raw-banner-frame.raw-text-center-center{justify-content:center!important;align-items:center!important}.instop-banner-vertical-escriptori .raw-banner-frame.raw-text-center-right{justify-content:flex-end!important;align-items:center!important}.instop-banner-vertical-escriptori .raw-banner-frame.raw-text-bottom-left{justify-content:flex-start!important;align-items:flex-end!important}.instop-banner-vertical-escriptori .raw-banner-frame.raw-text-bottom-center{justify-content:center!important;align-items:flex-end!important}.instop-banner-vertical-escriptori .raw-banner-frame.raw-text-bottom-right{justify-content:flex-end!important;align-items:flex-end!important}
.instop-banner-vertical-escriptori .raw-banner-frame.raw-text-top-left .raw-banner-text,.instop-banner-vertical-escriptori .raw-banner-frame.raw-text-center-left .raw-banner-text,.instop-banner-vertical-escriptori .raw-banner-frame.raw-text-bottom-left .raw-banner-text{align-items:flex-start!important;text-align:left!important;margin:0!important}.instop-banner-vertical-escriptori .raw-banner-frame.raw-text-top-center .raw-banner-text,.instop-banner-vertical-escriptori .raw-banner-frame.raw-text-center-center .raw-banner-text,.instop-banner-vertical-escriptori .raw-banner-frame.raw-text-bottom-center .raw-banner-text{align-items:center!important;text-align:center!important;margin:0!important}.instop-banner-vertical-escriptori .raw-banner-frame.raw-text-top-right .raw-banner-text,.instop-banner-vertical-escriptori .raw-banner-frame.raw-text-center-right .raw-banner-text,.instop-banner-vertical-escriptori .raw-banner-frame.raw-text-bottom-right .raw-banner-text{align-items:flex-end!important;text-align:right!important;margin:0!important}
.instop-banner-vertical-escriptori .raw-video-toggle{position:absolute!important;right:16px!important;bottom:16px!important;z-index:12!important;display:flex!important;align-items:center!important;justify-content:center!important;width:46px!important;height:46px!important;padding:0!important;border:1px solid rgba(255,255,255,.85)!important;border-radius:999px!important;background:rgba(0,0,0,.5)!important;color:#fff!important;font:800 18px/1 Arial!important;cursor:pointer!important;box-shadow:0 3px 12px rgba(0,0,0,.3)!important}.instop-banner-vertical-escriptori .raw-video-toggle:hover{background:rgba(0,0,0,.72)!important}

@media (min-width:1400px){body.instop-banner-actiu{overflow-x:hidden;}body.instop-banner-actiu .instop-page-with-left-banner{width:calc(100% - var(--instop-banner-lateral-amplada) - var(--instop-banner-lateral-separacio));margin-left:calc(var(--instop-banner-lateral-amplada) + var(--instop-banner-lateral-separacio));}.instop-banner-actiu .instop-banner-vertical-escriptori{display:block;position:fixed;left:0;top:var(--instop-banner-lateral-top);bottom:var(--instop-banner-lateral-bottom);width:var(--instop-banner-lateral-amplada);margin:0;padding:0;box-sizing:border-box;z-index:850;}}
@media (min-width:1700px){:root{--instop-banner-lateral-amplada:560px;}}
@media (max-width:1399px){body.instop-banner-actiu .instop-page-with-left-banner{width:100%;margin-left:0;}.instop-banner-vertical-escriptori{display:none!important;}}

/* Biblioteca de logotips RAW: logotip PNG transparent del banner vertical */
.instop-banner-vertical-escriptori .raw-banner-brand-logo{position:absolute!important;left:50%!important;right:auto!important;top:auto!important;bottom:28px!important;z-index:7!important;display:block!important;width:auto!important;max-width:78%!important;max-height:105px!important;height:auto!important;margin:0!important;transform:translateX(-50%)!important;object-fit:contain!important;opacity:1!important;pointer-events:none!important;filter:drop-shadow(0 2px 8px rgba(0,0,0,.22))!important}
.instop-banner-vertical-escriptori .raw-banner-has-brand-logo.raw-text-bottom-left .raw-banner-text,.instop-banner-vertical-escriptori .raw-banner-has-brand-logo.raw-text-bottom-center .raw-banner-text,.instop-banner-vertical-escriptori .raw-banner-has-brand-logo.raw-text-bottom-right .raw-banner-text{padding-bottom:145px!important}
@media(max-height:760px){.instop-banner-vertical-escriptori .raw-banner-brand-logo{bottom:18px!important;max-height:78px!important}.instop-banner-vertical-escriptori .raw-banner-has-brand-logo.raw-text-bottom-left .raw-banner-text,.instop-banner-vertical-escriptori .raw-banner-has-brand-logo.raw-text-bottom-center .raw-banner-text,.instop-banner-vertical-escriptori .raw-banner-has-brand-logo.raw-text-bottom-right .raw-banner-text{padding-bottom:110px!important}}

/* Controls de so dels vídeos verticals. L'autoplay comença silenciat i l'usuari activa el so. */
.instop-banner-vertical-escriptori .raw-video-audio{position:absolute!important;left:50%!important;right:auto!important;bottom:16px!important;transform:translateX(-50%)!important;z-index:12!important;display:flex!important;align-items:center!important;gap:7px!important;padding:4px 10px 4px 4px!important;border:1px solid rgba(255,255,255,.82)!important;border-radius:999px!important;background:rgba(0,0,0,.5)!important;box-shadow:0 3px 12px rgba(0,0,0,.3)!important;transition:background .2s ease!important}
.instop-banner-vertical-escriptori .raw-video-audio:hover,.instop-banner-vertical-escriptori .raw-video-audio:focus-within{background:rgba(0,0,0,.72)!important}
.instop-banner-vertical-escriptori .raw-video-sound{display:flex!important;align-items:center!important;justify-content:center!important;width:38px!important;height:38px!important;padding:0!important;border:0!important;border-radius:999px!important;background:transparent!important;color:#fff!important;font:700 19px/1 Arial!important;cursor:pointer!important}
.instop-banner-vertical-escriptori .raw-video-sound:focus-visible,.instop-banner-vertical-escriptori .raw-video-volume:focus-visible{outline:2px solid #fff!important;outline-offset:2px!important}
.instop-banner-vertical-escriptori .raw-video-volume{width:105px!important;height:22px!important;margin:0!important;padding:0!important;accent-color:#fff!important;cursor:pointer!important}
@media(max-width:1550px){.instop-banner-vertical-escriptori .raw-video-volume{width:82px!important}}

/* =========================================================
   TARIFES LLOGUER 2026
   Taula comuna GPS, estacions i altres equips
   ========================================================= */

.alquiler-tarifa-pdf{
  display:flex;
  justify-content:flex-end;
  margin:10px 0 24px;
}

.alquiler-tarifa-pdf a{
  display:inline-block;
}

.alquiler-tarifa-pdf img{
  display:block;
  max-width:100%;
  height:auto;
  cursor:pointer;
}

.alquiler-taula-contenidor{
  width:100%;
  margin:0 0 20px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

#contingut table.alquilerfont{
  width:100%;
  min-width:940px;
  margin:0;
  border:0;
  border-collapse:collapse;
  border-spacing:0;
  table-layout:fixed;
  background:#fff;
  color:#303030;
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:14px;
  line-height:1.4;
}

#contingut table.alquilerfont th{
  height:auto;
  padding:12px 10px;
  border:0;
  border-bottom:1px solid #c9c9c9;
  background:#ededed;
  color:#303030;
  font-size:14px;
  line-height:1.35;
  font-weight:700;
  text-align:right;
  vertical-align:middle;
  white-space:normal;
}

#contingut table.alquilerfont th:first-child{
  width:32%;
  text-align:left;
}

#contingut table.alquilerfont th:nth-child(2){
  width:8%;
}

#contingut table.alquilerfont th:nth-child(3){
  width:12%;
}

#contingut table.alquilerfont th:nth-child(4){
  width:8%;
}

#contingut table.alquilerfont th:nth-child(5){
  width:8%;
}

#contingut table.alquilerfont th:nth-child(6){
  width:8%;
}

#contingut table.alquilerfont th:nth-child(7){
  width:13%;
}

#contingut table.alquilerfont th:nth-child(8){
  width:11%;
  text-align:center;
}

#contingut table.alquilerfont td{
  height:auto;
  padding:14px 10px;
  border:0;
  border-bottom:1px solid #dedede;
  background:#fff;
  vertical-align:middle;
  box-sizing:border-box;
}

#contingut table.alquilerfont tbody tr:last-child td{
  border-bottom:1px solid #dedede;
}

#contingut table.alquilerfont tbody tr:hover td{
  background:#fafafa;
}

.alquiler-producte{
  text-align:left;
}

.alquiler-producte-interior{
  display:flex;
  align-items:center;
  gap:18px;
  width:100%;
  min-width:0;
}

.alquiler-producte-interior > a{
  display:flex;
  flex:0 0 72px;
  align-items:center;
  justify-content:center;
  width:72px;
  height:82px;
}

.alquiler-producte .img-responsive33{
  display:block;
  width:72px;
  max-width:72px;
  height:82px;
  margin:0;
  object-fit:contain;
}

.alquiler-producte-nom{
  flex:1;
  min-width:0;
  color:var(--instop-red);
  font-size:16px;
  line-height:1.45;
  font-weight:700;
  text-align:left;
  overflow-wrap:break-word;
}

.alquiler-producte-nom a{
  color:var(--instop-red);
  text-decoration:none;
}

.alquiler-producte-nom a:hover{
  color:var(--instop-red-hover);
  text-decoration:underline;
}

.alquiler-preu,
.alquiler-consultar{
  color:var(--instop-red);
  font-size:14px;
  font-weight:400;
  text-align:right;
  white-space:nowrap;
}

.alquiler-consultar{
  text-align:center;
}

.alquiler-informacio{
  text-align:center;
}

.alquiler-informacio .boton33{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:94px;
  min-height:46px;
  margin:0;
  padding:9px 13px;
  border:1px solid #56851b;
  border-radius:4px;
  background:#56851b;
  color:#fff;
  font-size:14px;
  line-height:1.2;
  font-weight:700;
  text-align:center;
  text-decoration:none;
}

.alquiler-informacio .boton33:hover{
  border-color:#416c10;
  background:#416c10;
  color:#fff;
  text-decoration:none;
}

.alquiler-condicions{
  margin:0 0 26px;
}

@media (max-width:768px){

  .alquiler-tarifa-pdf{
    justify-content:center;
    margin-bottom:20px;
  }

  .alquiler-taula-contenidor{
    padding-bottom:5px;
  }

  #contingut table.alquilerfont{
    min-width:900px;
    font-size:13px;
  }

  #contingut table.alquilerfont th,
  #contingut table.alquilerfont td{
    padding:10px 8px;
  }

  .alquiler-producte-interior{
    gap:12px;
  }

  .alquiler-producte-interior > a{
    flex-basis:62px;
    width:62px;
    height:70px;
  }

  .alquiler-producte .img-responsive33{
    width:62px;
    max-width:62px;
    height:70px;
  }

  .alquiler-producte-nom{
    font-size:14px;
  }

  .alquiler-informacio .boton33{
    min-width:82px;
    min-height:42px;
    padding:8px 10px;
    font-size:13px;
  }
}

/* =========================================================
   VERSIO 22 - SUPER BANNERS AMPLES FUSIONAT
   Recupera el modul horitzontal dins del CSS general.
   Inclou el FIX V14 contra max-width/height globals.
   ========================================================= */

/* ==========================================================
   BANNER / SLIDER RAW INSTOP - CSS ÚNIC
   Fitxer recomanat: /css/2026-raw-banner-rjs.css

   Inclou:
   - Slider RAW
   - Textos sobre imatge
   - Logos SVG
   - Fletxes
   - Suport vídeo
   ========================================================== */

/* Contenidor */
.rjs-banner,
.raw-banner-conjunt {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  background: #f2f2f2;
}

/* Slide */
.rjs-frame,
.raw-banner-frame {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
  z-index: 1;
}

.rjs-frame.rjs-on,
.raw-banner-frame.rjs-on,
.raw-banner-frame.raw-video-on {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* Imatge */
.rjs-img,
.raw-banner-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Vídeo RAW */
.raw-banner-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  z-index: 1;
}

/* Quan un conjunt només mostra un element o és una seqüència de vídeo, amaguem fletxes */
.raw-banner-single .rjs-prev,
.raw-banner-single .rjs-next,
.raw-banner-video-sequence .rjs-prev,
.raw-banner-video-sequence .rjs-next {
  display: none !important;
}

.raw-banner-video-sequence .raw-banner-frame.raw-video-on {
  opacity: 1;
  pointer-events: auto;
}

/* Alternativa si algun banner arriba amb background CSS */
.rjs-frame[style*="--bg"] {
  background: center / cover no-repeat var(--bg);
}

/* Caption centrat sobre la imatge o vídeo */
.rjs-caption,
.rjs-content,
.raw-banner-text {
  pointer-events: none;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8em;
  max-width: 90%;
  margin-inline: auto;
  padding: 20px 40px;
  text-align: center;
  color: #fff;
  line-height: 1.15;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.5);
  transform: translateZ(0);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Títol */
.rjs-title,
.raw-banner-title {
  display: block;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: var(--raw-title-size, clamp(26px, 5vw, 56px));
  white-space: pre-line;
}

/* Subtítol */
.rjs-sub,
.raw-banner-subtitle {
  display: block;
  font-weight: 600;
  opacity: 0.95;
  letter-spacing: 0.03em;
  font-size: var(--raw-subtitle-size, clamp(18px, 2.8vw, 28px));
  white-space: pre-line;
  margin-top: 0.6em;
}



/* Posicio configurable del text */
.raw-banner-frame.raw-text-top-left{place-items:start start}.raw-banner-frame.raw-text-top-center{place-items:start center}.raw-banner-frame.raw-text-top-right{place-items:start end}.raw-banner-frame.raw-text-center-left{place-items:center start}.raw-banner-frame.raw-text-center-center{place-items:center center}.raw-banner-frame.raw-text-center-right{place-items:center end}.raw-banner-frame.raw-text-bottom-left{place-items:end start}.raw-banner-frame.raw-text-bottom-center{place-items:end center}.raw-banner-frame.raw-text-bottom-right{place-items:end end}
.raw-banner-frame.raw-text-top-left .raw-banner-text,.raw-banner-frame.raw-text-center-left .raw-banner-text,.raw-banner-frame.raw-text-bottom-left .raw-banner-text{align-items:flex-start;text-align:left;margin:0}.raw-banner-frame.raw-text-top-center .raw-banner-text,.raw-banner-frame.raw-text-center-center .raw-banner-text,.raw-banner-frame.raw-text-bottom-center .raw-banner-text{align-items:center;text-align:center;margin:0}.raw-banner-frame.raw-text-top-right .raw-banner-text,.raw-banner-frame.raw-text-center-right .raw-banner-text,.raw-banner-frame.raw-text-bottom-right .raw-banner-text{align-items:flex-end;text-align:right;margin:0}

/* Pausa/reproduccio per als conjunts de video */
.raw-video-toggle{position:absolute;right:16px;bottom:16px;z-index:12;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.8);border-radius:999px;background:rgba(0,0,0,.48);color:#fff;font:800 18px/1 Arial;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.28)}.raw-video-toggle:hover{background:rgba(0,0,0,.7)}.raw-video-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Logo dins del caption, si alguna versió antiga el fa servir */
.rjs-logo {
  display: block;
  margin-top: 10px;
  text-align: left;
}

.rjs-logo img {
  width: 325px;
  height: auto;
  opacity: 0.9;
}

/* Logo flotant del mòdul RAW */
.raw-banner-logo {
  position: absolute;
  right: 42px;
  top: 42px;
  z-index: 6;
  display: block;
  width: 180px;
  max-width: 22vw;
  height: auto;
  opacity: 0.95;
}

/* Controls / fletxes */
.rjs-arrow,
.rjs-prev,
.rjs-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 8;
}

.rjs-prev {
  left: 12px;
}

.rjs-next {
  right: 12px;
}

.rjs-arrow:hover,
.rjs-prev:hover,
.rjs-next:hover {
  background: rgba(0, 0, 0, 0.55);
}

.rjs-arrow:focus-visible,
.rjs-prev:focus-visible,
.rjs-next:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.rjs-banner:hover .rjs-frame {
  transition: opacity 0.7s ease;
}

/* ==========================================================
   POSICIONS OPCIONALS DEL LOGO SVG
   Pots aplicar-les per codi de banner.
   Exemple:
   .raw-banner-disto-x6 .raw-banner-logo { ... }
   ========================================================== */

/* Logo a baix centrat */
.raw-banner-logo-bottom-center .raw-banner-logo {
  top: auto;
  right: auto;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: 320px;
  max-width: 70vw;
}

/* Logo a baix esquerra */
.raw-banner-logo-bottom-left .raw-banner-logo {
  top: auto;
  right: auto;
  left: 40px;
  bottom: 24px;
  transform: none;
  width: 260px;
  max-width: 60vw;
}

/* Logo a baix dreta */
.raw-banner-logo-bottom-right .raw-banner-logo {
  top: auto;
  left: auto;
  right: 40px;
  bottom: 24px;
  transform: none;
  width: 260px;
  max-width: 60vw;
}

/* Responsive */
@media (max-width: 768px) {
  .rjs-banner,
  .raw-banner-conjunt {
    height: 300px;
  }

  .rjs-caption,
  .rjs-content,
  .raw-banner-text {
    max-width: 94%;
    padding: 18px 22px;
  }

  .rjs-logo img {
    width: min(325px, 80vw);
  }

  .rjs-logo {
    text-align: center;
  }

  .raw-banner-logo {
    right: 16px;
    top: 16px;
    width: 90px;
    max-width: 26vw;
  }

  .raw-banner-logo-bottom-center .raw-banner-logo {
    top: auto;
    right: auto;
    left: 50%;
    bottom: 14px;
    width: 220px;
    max-width: 75vw;
  }

  .raw-banner-logo-bottom-left .raw-banner-logo {
    top: auto;
    right: auto;
    left: 16px;
    bottom: 14px;
    width: 170px;
    max-width: 65vw;
  }

  .raw-banner-logo-bottom-right .raw-banner-logo {
    top: auto;
    left: auto;
    right: 16px;
    bottom: 14px;
    width: 170px;
    max-width: 65vw;
  }

  .rjs-arrow,
  .rjs-prev,
  .rjs-next {
    width: 36px;
    height: 36px;
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .rjs-banner,
  .raw-banner-conjunt {
    height: 260px;
  }

  .rjs-title,
  .raw-banner-title {
    letter-spacing: 0.04em;
  }

  .rjs-sub,
  .raw-banner-subtitle {
    margin-top: 0.35em;
  }
}


/* ==========================================================
   FIX ROBUST V11 - SEQUENCIES DE VIDEO
   Manté compatibilitat amb scripts antics .rjs-frame,
   però en conjunts de vídeo només mana .raw-video-on.
   ========================================================== */

.raw-banner-video-sequence .raw-banner-frame {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.raw-banner-video-sequence .raw-banner-frame.rjs-on {
  opacity: 0;
  pointer-events: none;
}

.raw-banner-video-sequence .raw-banner-frame.raw-video-on,
.raw-banner-video-sequence .raw-banner-frame.raw-video-on.rjs-on {
  opacity: 1 !important;
  pointer-events: auto;
  z-index: 2;
}

.raw-banner-video-sequence .rjs-prev,
.raw-banner-video-sequence .rjs-next {
  display: none !important;
}

/* ==========================================================
   FIX V13 - CARRO FLOTANT PER SOBRE DEL BANNER
   El problema real era el context d'apilament de #contingut2/#contingut.
   ========================================================== */

/* El banner queda en un nivell baix i controlat */
.banner-ample,
.rjs-banner,
.raw-banner-conjunt {
  position: relative;
  z-index: 1 !important;
}

/* Evitem que aquests contenidors atrapin el carro en un stacking context */
#contingut2,
#contingut {
  z-index: auto !important;
}

/* El contenidor real del carro flotant */
#divCarroPetit {
  position: fixed !important;
  top: 180px !important;
  right: 20px !important;
  z-index: 2147483000 !important;
  overflow: visible !important;
  isolation: auto !important;
}

/* El contingut interior no ha de crear un altre nivell conflictiu */
#divCarroPetit #cart {
  position: relative !important;
  z-index: auto !important;
}

/* Altres elements flotants */
.whatsapp-float,
.scrollup {
  z-index: 2147482000 !important;
}


/* Biblioteca de logotips RAW */
.raw-banner-brand-logo{position:absolute;left:50%;bottom:24px;z-index:7;display:block;width:auto;max-width:72%;max-height:96px;height:auto;transform:translateX(-50%);object-fit:contain;opacity:1;pointer-events:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.22))}
.raw-banner-has-brand-logo.raw-text-bottom-left .raw-banner-text,.raw-banner-has-brand-logo.raw-text-bottom-center .raw-banner-text,.raw-banner-has-brand-logo.raw-text-bottom-right .raw-banner-text{padding-bottom:130px}
@media(max-width:768px){.raw-banner-brand-logo{bottom:14px;max-width:76%;max-height:68px}.raw-banner-has-brand-logo.raw-text-bottom-left .raw-banner-text,.raw-banner-has-brand-logo.raw-text-bottom-center .raw-banner-text,.raw-banner-has-brand-logo.raw-text-bottom-right .raw-banner-text{padding-bottom:92px}}

/* Controls de so dels vídeos RAW. */
.raw-video-audio{position:absolute;left:16px;bottom:16px;z-index:12;display:flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border:1px solid rgba(255,255,255,.82);border-radius:999px;background:rgba(0,0,0,.5);box-shadow:0 3px 12px rgba(0,0,0,.3);transition:background .2s ease}.raw-video-audio:hover,.raw-video-audio:focus-within{background:rgba(0,0,0,.72)}.raw-video-sound{display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:0;border-radius:999px;background:transparent;color:#fff;font:700 19px/1 Arial;cursor:pointer}.raw-video-sound:focus-visible,.raw-video-volume:focus-visible{outline:2px solid #fff;outline-offset:2px}.raw-video-volume{width:105px;height:22px;margin:0;padding:0;accent-color:#fff;cursor:pointer}

/* ==========================================================
   FIX V14 - BANNERS AMPLES
   Evita que estils globals redueixin la imatge o desplacin el text.
   ========================================================== */
.banner-ample,
.banner-ample .rjs-banner,
.banner-ample .raw-banner-conjunt{
  position:relative;
  width:100%;
  max-width:none;
  overflow:hidden;
  box-sizing:border-box;
}

.banner-ample .rjs-frame,
.banner-ample .raw-banner-frame{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

.banner-ample .rjs-img,
.banner-ample .raw-banner-img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  min-width:100% !important;
  max-width:none !important;
  height:100% !important;
  min-height:100% !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
}

.banner-ample .rjs-content,
.banner-ample .rjs-caption,
.banner-ample .raw-banner-text{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  width:auto !important;
  max-width:min(90%,1100px) !important;
  height:auto !important;
  margin:0 !important;
  padding:28px 64px !important;
  box-sizing:border-box !important;
  transform:none !important;
}

.banner-ample .raw-banner-frame.raw-text-top-left .raw-banner-text,
.banner-ample .raw-banner-frame.raw-text-center-left .raw-banner-text,
.banner-ample .raw-banner-frame.raw-text-bottom-left .raw-banner-text{
  align-items:flex-start !important;
  text-align:left !important;
}

.banner-ample .raw-banner-frame.raw-text-top-center .raw-banner-text,
.banner-ample .raw-banner-frame.raw-text-center-center .raw-banner-text,
.banner-ample .raw-banner-frame.raw-text-bottom-center .raw-banner-text{
  align-items:center !important;
  text-align:center !important;
}

.banner-ample .raw-banner-frame.raw-text-top-right .raw-banner-text,
.banner-ample .raw-banner-frame.raw-text-center-right .raw-banner-text,
.banner-ample .raw-banner-frame.raw-text-bottom-right .raw-banner-text{
  align-items:flex-end !important;
  text-align:right !important;
}

@media (max-width:768px){
  .banner-ample .rjs-content,
  .banner-ample .rjs-caption,
  .banner-ample .raw-banner-text{
    max-width:94% !important;
    padding:20px 28px !important;
  }
}

/* =========================================================
   VERSIO 23 - TARIFES DE LLOGUER EN FITXES PER A MOBIL
   La taula es conserva a escriptori i es transforma en fitxes
   verticals per sota de 768 px, sense desplacament horitzontal.
   ========================================================= */
@media (max-width:768px){
  .alquiler-taula-contenidor{width:100%;max-width:100%;overflow:visible!important;padding:0!important;margin:0 0 22px;}
  #contingut table.alquilerfont.alquilerfont-responsive{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;border:0!important;table-layout:auto!important;background:transparent!important;}
  #contingut table.alquilerfont.alquilerfont-responsive thead{display:none!important;}
  #contingut table.alquilerfont.alquilerfont-responsive tbody{display:block!important;width:100%!important;}
  #contingut table.alquilerfont.alquilerfont-responsive tr{display:block!important;width:100%!important;max-width:100%!important;margin:0 0 16px!important;padding:0 14px 14px!important;border:1px solid #d8d8d8!important;border-radius:6px!important;background:#fff!important;box-shadow:0 2px 8px rgba(0,0,0,.05)!important;overflow:hidden!important;}
  #contingut table.alquilerfont.alquilerfont-responsive td{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;padding:10px 0!important;border:0!important;border-bottom:1px solid #ececec!important;background:#fff!important;white-space:normal!important;box-sizing:border-box!important;}
  #contingut table.alquilerfont.alquilerfont-responsive td[data-label]:not(.alquiler-producte):not(.alquiler-informacio){display:grid!important;grid-template-columns:minmax(125px,1fr) auto!important;gap:14px!important;align-items:center!important;text-align:right!important;}
  #contingut table.alquilerfont.alquilerfont-responsive td[data-label]:not(.alquiler-producte):not(.alquiler-informacio)::before{content:attr(data-label);display:block;color:#343434;font-size:13px;line-height:1.35;font-weight:700;text-align:left;}
  #contingut table.alquilerfont.alquilerfont-responsive .alquiler-producte{padding:14px 0!important;text-align:left!important;}
  #contingut table.alquilerfont.alquilerfont-responsive .alquiler-producte::before,
  #contingut table.alquilerfont.alquilerfont-responsive .alquiler-informacio::before{content:none!important;display:none!important;}
  #contingut table.alquilerfont.alquilerfont-responsive .alquiler-producte-interior{display:flex!important;align-items:center!important;gap:14px!important;width:100%!important;min-width:0!important;}
  #contingut table.alquilerfont.alquilerfont-responsive .alquiler-producte-interior>a{display:flex!important;flex:0 0 72px!important;width:72px!important;height:72px!important;align-items:center!important;justify-content:center!important;}
  #contingut table.alquilerfont.alquilerfont-responsive .alquiler-producte .img-responsive33{display:block!important;width:72px!important;max-width:72px!important;height:72px!important;max-height:72px!important;margin:0!important;object-fit:contain!important;}
  #contingut table.alquilerfont.alquilerfont-responsive .alquiler-producte-nom{font-size:15px!important;line-height:1.35!important;overflow-wrap:anywhere!important;}
  #contingut table.alquilerfont.alquilerfont-responsive .alquiler-preu,
  #contingut table.alquilerfont.alquilerfont-responsive .alquiler-consultar{color:var(--instop-red)!important;font-size:14px!important;font-weight:600!important;}
  #contingut table.alquilerfont.alquilerfont-responsive .alquiler-informacio{padding:14px 0 0!important;border-bottom:0!important;text-align:center!important;}
  #contingut table.alquilerfont.alquilerfont-responsive .alquiler-informacio .boton33{display:flex!important;width:100%!important;max-width:none!important;min-width:0!important;min-height:46px!important;margin:0!important;padding:10px 14px!important;}
}

@media (max-width:420px){
  #contingut table.alquilerfont.alquilerfont-responsive tr{padding-right:12px!important;padding-left:12px!important;}
  #contingut table.alquilerfont.alquilerfont-responsive td[data-label]:not(.alquiler-producte):not(.alquiler-informacio){grid-template-columns:minmax(112px,1fr) auto!important;gap:10px!important;}
  #contingut table.alquilerfont.alquilerfont-responsive .alquiler-producte-interior>a{flex-basis:62px!important;width:62px!important;height:62px!important;}
  #contingut table.alquilerfont.alquilerfont-responsive .alquiler-producte .img-responsive33{width:62px!important;max-width:62px!important;height:62px!important;max-height:62px!important;}
}

/* =========================================================
   VERSIO 24 - LLIBRERIES DE PRODUCTES INDEPENDENTS DE LA ZONA
   La llibreria antiga genera .aa-wrap-fitxes amb targetes #item_2.
   Aquesta regla evita que .item-card { width:100% } converteixi
   cada producte en una fila completa segons el contenidor on s'insereix.
   ========================================================= */
.biblioteca-productes,
#contingut .biblioteca-productes{
  display:block !important;
  clear:both !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 0 24px !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

.biblioteca-productes > table,
#contingut .biblioteca-productes > table{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  table-layout:auto !important;
}

.aa-wrap-fitxes,
#contingut .aa-wrap-fitxes{
  display:flex !important;
  flex-flow:row wrap !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:18px 14px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 0 38px !important;
  padding:2px !important;
  box-sizing:border-box !important;
}

.aa-wrap-fitxes > #item_2.item-card,
#contingut .aa-wrap-fitxes > #item_2.item-card{
  float:none !important;
  clear:none !important;
  flex:0 0 calc((100% - 42px) / 4) !important;
  width:calc((100% - 42px) / 4) !important;
  min-width:0 !important;
  max-width:calc((100% - 42px) / 4) !important;
  height:auto !important;
  min-height:356px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

@media (max-width:1050px){
  .aa-wrap-fitxes > #item_2.item-card,
  #contingut .aa-wrap-fitxes > #item_2.item-card{
    flex-basis:calc((100% - 28px) / 3) !important;
    width:calc((100% - 28px) / 3) !important;
    max-width:calc((100% - 28px) / 3) !important;
  }
}

@media (max-width:760px){
  .aa-wrap-fitxes,
  #contingut .aa-wrap-fitxes{
    gap:14px 10px !important;
  }

  .aa-wrap-fitxes > #item_2.item-card,
  #contingut .aa-wrap-fitxes > #item_2.item-card{
    flex-basis:calc((100% - 10px) / 2) !important;
    width:calc((100% - 10px) / 2) !important;
    max-width:calc((100% - 10px) / 2) !important;
    min-height:0 !important;
  }
}

@media (max-width:480px){
  .aa-wrap-fitxes > #item_2.item-card,
  #contingut .aa-wrap-fitxes > #item_2.item-card{
    flex-basis:100% !important;
    width:100% !important;
    max-width:100% !important;
  }
}

/* =========================================================
   VERSIO 25 - LLIBRERIA ANTIGA SENSE CONTENIDOR .aa-wrap-fitxes
   La sortida real de 2026-libreria-03.php posa les targetes
   #item_2 directament dins del td[valign="top"]. Per tant,
   la v24 no actuava perquè esperava un contenidor inexistent.
   ========================================================= */
#contingut #zona-din td[valign="top"],
#contingut #zona-fac td[valign="top"],
#contingut #zona-text2 td[valign="top"]{
  display:flex !important;
  flex-flow:row wrap !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:18px 14px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

#contingut #zona-din td[valign="top"] > #item_2.item-card,
#contingut #zona-fac td[valign="top"] > #item_2.item-card,
#contingut #zona-text2 td[valign="top"] > #item_2.item-card{
  float:none !important;
  clear:none !important;
  flex:0 0 calc((100% - 42px) / 4) !important;
  width:calc((100% - 42px) / 4) !important;
  min-width:0 !important;
  max-width:calc((100% - 42px) / 4) !important;
  height:auto !important;
  min-height:356px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

@media (max-width:1050px){
  #contingut #zona-din td[valign="top"] > #item_2.item-card,
  #contingut #zona-fac td[valign="top"] > #item_2.item-card,
  #contingut #zona-text2 td[valign="top"] > #item_2.item-card{
    flex-basis:calc((100% - 28px) / 3) !important;
    width:calc((100% - 28px) / 3) !important;
    max-width:calc((100% - 28px) / 3) !important;
  }
}

@media (max-width:760px){
  #contingut #zona-din td[valign="top"],
  #contingut #zona-fac td[valign="top"],
  #contingut #zona-text2 td[valign="top"]{
    gap:14px 10px !important;
  }

  #contingut #zona-din td[valign="top"] > #item_2.item-card,
  #contingut #zona-fac td[valign="top"] > #item_2.item-card,
  #contingut #zona-text2 td[valign="top"] > #item_2.item-card{
    flex-basis:calc((100% - 10px) / 2) !important;
    width:calc((100% - 10px) / 2) !important;
    max-width:calc((100% - 10px) / 2) !important;
    min-height:0 !important;
  }
}

@media (max-width:480px){
  #contingut #zona-din td[valign="top"] > #item_2.item-card,
  #contingut #zona-fac td[valign="top"] > #item_2.item-card,
  #contingut #zona-text2 td[valign="top"] > #item_2.item-card{
    flex-basis:100% !important;
    width:100% !important;
    max-width:100% !important;
  }
}


/* =========================================================
   BLOC ARTICLES I CASOS D'EXIT
   Fusionat des de 2026-articles-casos-08.css (V01..V08).
   Va al final del fitxer a proposit: totes les regles estan
   dins l'espai de noms .cas-* i no toquen res de sobre.
   ========================================================= */

.cas-article{width:100%;max-width:960px;margin:0 auto;padding:30px 18px 70px;box-sizing:border-box;color:#30343a;font-family:"Open Sans",Arial,Helvetica,sans-serif}
.cas-article-head{max-width:780px;margin:0 auto 28px;text-align:left}
.cas-article-kicker{margin:0 0 9px;color:var(--instop-red);font-size:12px;line-height:18px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.cas-article-head h1{margin:0 0 18px;color:#17191c;font-family:"Open Sans",Arial,Helvetica,sans-serif;font-size:42px;line-height:49px;font-weight:650;letter-spacing:-1px}
.cas-article-intro{margin:0 0 13px;color:#555d66;font-size:19px;line-height:29px;font-weight:400}
.cas-article-meta{margin:0;color:#777f87;font-size:13px;line-height:20px}
.cas-article-cover{padding:0;max-width:960px;background:#f4f5f6;border:1px solid #e0e3e6}
.cas-article-body{max-width:760px;margin:0 auto;color:#30343a;font-size:16px!important;line-height:27px!important}
.cas-article-body p{margin:0 0 18px!important}
.cas-article-body h2{margin:42px 0 14px;color:#17191c;font-size:28px;line-height:35px;font-weight:650;letter-spacing:-.4px}
.cas-article-body h3{margin:32px 0 11px;color:#25282c;font-size:21px;line-height:28px;font-weight:650}
.cas-article-body ul,.cas-article-body ol{margin:15px 0 24px;padding-left:25px}
.cas-article-body li{margin:0 0 8px;padding-left:4px}
.cas-article-body blockquote{margin:30px 0;padding:17px 22px;border-left:4px solid var(--instop-red);background:#f5f6f7;color:#42474d;font-size:18px;line-height:28px}
.cas-article-body a{color:#222;text-decoration:underline;text-decoration-color:#b7b7b7;text-underline-offset:3px}
.cas-article-body a:hover{color:var(--instop-red-hover);text-decoration-color:var(--instop-red-hover)}
.cas-article-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:960px;margin:48px auto 0;padding-top:34px;border-top:1px solid #dedfe1}
.cas-article-gallery-item{margin:0;border:1px solid #dfe1e4;background:#fff}
.cas-article-gallery-item a{display:block;background:#f4f5f6}
.cas-article-gallery-item img{display:block;width:100%;height:310px}
.cas-article-gallery-item figcaption{padding:10px 12px;color:#636a72;font-size:12px;line-height:18px}

@media(max-width:820px){
  .cas-article{padding:22px 15px 45px}
  .cas-article-head h1{font-size:32px;line-height:39px;letter-spacing:-.5px}
  .cas-article-intro{font-size:17px;line-height:26px}
  .cas-article-body{font-size:15px!important;line-height:25px!important}
  .cas-article-body h2{font-size:24px;line-height:31px}
  .cas-article-gallery{grid-template-columns:1fr;gap:14px;margin-top:36px;padding-top:25px}
  .cas-article-gallery-item img{height:auto;max-height:460px}
}


/* =========================================================
   VERSIO 02 - PORTADA CONTINGUDA I IMATGES DINS DEL TEXT
   ========================================================= */
.cas-article-cover{width:min(100%,640px);margin:18px auto 28px!important}.cas-article-cover img{display:block;width:100%;height:auto;max-height:640px;object-fit:contain;background:#f3f4f5}.cas-article-body{display:flow-root}.cas-article-body figure.cas-inline-image{box-sizing:border-box;margin:26px auto;max-width:100%}.cas-article-body figure.cas-inline-image img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain;background:#f4f5f6}.cas-article-body figure.cas-inline-image figcaption{margin:7px 0 0;color:#666;font-size:12px;line-height:1.4;text-align:center}.cas-article-body .cas-inline-image--wide{width:100%}.cas-article-body .cas-inline-image--medium{width:64%}.cas-article-body .cas-inline-image--left{float:left;width:43%;margin:8px 26px 18px 0}.cas-article-body .cas-inline-image--right{float:right;width:43%;margin:8px 0 18px 26px}.cas-article-gallery{clear:both;margin-top:34px}.cas-article-gallery-item img{max-height:360px;object-fit:cover}@media(max-width:760px){.cas-article-cover{width:100%}.cas-article-body .cas-inline-image--left,.cas-article-body .cas-inline-image--right,.cas-article-body .cas-inline-image--medium{float:none;width:100%;margin:22px 0}.cas-article-body figure.cas-inline-image img{max-height:none}}

/* VERSIÓN 03 - CATEGORÍAS, ÍNDICE Y ARTÍCULOS RELACIONADOS */
.cas-article-category{margin:-3px 0 10px;font-size:13px;line-height:20px}.cas-article-category a{color:#747b82;text-decoration:none}.cas-article-category a:hover{color:var(--instop-red-hover)}.cas-related{max-width:960px;margin:58px auto 0;padding-top:34px;border-top:1px solid #dfe1e4}.cas-related>h2{margin:0 0 20px;color:#17191c;font-size:25px;line-height:32px;font-weight:700}.cas-related-grid,.cas-index-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.cas-related-card{min-width:0;border:1px solid #dfe1e4;background:#fff}.cas-related-card>a{display:block;height:100%;color:#222;text-decoration:none}.cas-related-card img{display:block;width:100%;height:180px;object-fit:cover;background:#f1f2f3}.cas-related-card-body{padding:14px}.cas-related-category{display:block;margin-bottom:7px;color:var(--instop-red);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.cas-related-card h3{margin:0 0 8px;font-size:17px;line-height:23px;font-weight:700}.cas-related-card p{display:-webkit-box;margin:0;color:#686f76;font-size:13px;line-height:20px;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.cas-index{width:100%;max-width:1180px;margin:0 auto;padding:34px 18px 70px;box-sizing:border-box;font-family:"Open Sans",Arial,Helvetica,sans-serif}.cas-index-head{max-width:780px;margin-bottom:30px}.cas-index-kicker{margin:0 0 8px;color:var(--instop-red);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.cas-index-head h1{margin:0 0 12px;font-size:40px;line-height:48px}.cas-index-head p{margin:0;color:#626970;font-size:17px;line-height:27px}.cas-category-tree{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start}.cas-category-nav{position:sticky;top:18px;border:1px solid #dfe1e4;background:#fff}.cas-category-nav h2{margin:0;padding:13px 15px;background:#353941;color:#fff;font-size:13px;text-transform:uppercase}.cas-category-nav ul{list-style:none;margin:0;padding:8px}.cas-category-nav li{margin:0}.cas-category-nav a{display:block;padding:8px 9px;color:#333;text-decoration:none;font-size:13px}.cas-category-nav a:hover,.cas-category-nav a.is-active{color:var(--instop-red);background:#f6f6f6}.cas-category-nav .level-1 a{padding-left:25px;font-size:12px}.cas-index-section{margin-bottom:38px}.cas-index-section h2{margin:0 0 16px;padding-bottom:9px;border-bottom:2px solid var(--instop-red);font-size:24px;line-height:31px}.cas-index-empty{padding:25px;border:1px solid #ddd;background:#fafafa;color:#666}@media(max-width:900px){.cas-related-grid,.cas-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cas-category-tree{grid-template-columns:1fr}.cas-category-nav{position:static}}@media(max-width:620px){.cas-related-grid,.cas-index-grid{grid-template-columns:1fr}.cas-related-card img{height:auto;max-height:320px}.cas-index-head h1{font-size:31px;line-height:38px}}


/* V4 - capçalera destacada i blocs */
.cas-article-featured{display:grid;grid-template-columns:minmax(280px,400px) minmax(0,1fr);gap:64px;align-items:center;margin:28px 0 54px;padding-bottom:48px;border-bottom:1px solid #d9dde1}.cas-article-featured figure{margin:0}.cas-article-featured img{display:block;width:100%;max-width:400px;height:auto;max-height:470px;object-fit:cover}.cas-article-featured-summary{font-size:18px!important;line-height:1.55!important;color:#40444a}.cas-content-blocks{display:grid;gap:34px;margin-top:34px}.cas-block{clear:both}.cas-block-text{font-size:16px;line-height:1.7}.cas-block-heading{margin:42px 0 12px;color:var(--instop-red)}.cas-block-image-text{display:grid;grid-template-columns:minmax(260px,42%) minmax(0,1fr);gap:38px;align-items:center}.cas-block-image-right figure{order:2}.cas-block-image-text figure{margin:0}.cas-block-image-text img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover}.cas-block-image-text figcaption{font-size:12px;color:#70757b;margin-top:7px}.cas-block-copy{font-size:16px;line-height:1.7}.cas-block-video{position:relative;padding-top:56.25%;overflow:hidden;background:#111}.cas-block-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.cas-block-cta{padding:28px 32px;background:#f2f3f4;border-left:5px solid var(--instop-red)}.cas-block-cta h2{margin:0 0 8px;color:var(--instop-red)}.cas-block-cta a{display:inline-flex;margin-top:10px;padding:10px 16px;background:#56872b;color:#fff!important;text-decoration:none;border-radius:4px;font-weight:700}.cas-block-separator{border:0;border-top:1px solid #d6dade;margin:18px 0}@media(max-width:800px){.cas-article-featured,.cas-block-image-text{grid-template-columns:1fr;gap:22px}.cas-article-featured img{max-width:100%}.cas-block-image-right figure{order:0}.cas-article-featured-summary{font-size:16px!important}}


/* V05 - Persona de contacte vinculada a l'article */
.cas-article-expert{max-width:760px;margin:44px auto 28px;padding:18px;border-top:1px solid #d7d7d7;border-bottom:1px solid #d7d7d7;background:#fafafa;box-sizing:border-box}
.cas-article-expert .expert-photo{width:132px;height:132px;object-fit:cover}
.cas-article-expert .expert-info{min-width:0}
.cas-article-expert .expert-contact a{display:inline-block;margin:2px 14px 2px 0;word-break:break-word}
@media(max-width:640px){.cas-article-expert{display:block;text-align:center}.cas-article-expert .expert-photo{margin:0 auto 12px}.cas-article-expert .expert-contact a{display:block;margin:5px 0}}

/* V6 - persona de contacte dins la capcalera destacada */
.cas-article-featured-side{display:flex;flex-direction:column;justify-content:center;min-width:0}
.cas-article-featured-side .cas-article-featured-summary{margin:0 0 24px}
.cas-article-featured-side .cas-article-expert{width:100%;max-width:none;margin:0;padding:16px;background:#f5f5f5;border:0;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.cas-article-featured-side .cas-article-expert .expert-photo{width:110px;height:110px;border-radius:6px}
.cas-article-featured-side .cas-article-expert .titol_Producte20{margin:3px 0 8px!important}
.cas-article-featured-side .cas-article-expert .normal_instop{margin:0 0 4px!important}
.cas-article-featured-side .cas-article-expert .expert-contact{margin:0!important}
@media(max-width:760px){.cas-article-featured-side .cas-article-expert{margin-top:18px}.cas-article-featured-side .cas-article-expert .expert-photo{width:100px;height:100px}}

/* =========================================================
   VERSIO 07 - PARAULES CLAU I ARTICLES MES VISTOS
   ========================================================= */
.cas-article-keywords{width:100%;max-width:960px;margin:0 auto 34px;padding:26px 15px 0;border-top:1px solid #dedfe1;box-sizing:border-box;font-family:"Open Sans",Arial,Helvetica,sans-serif}.cas-article-keywords__head{margin:0 0 11px;color:#34383d;font-size:13px;line-height:18px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.cas-article-keywords__list{display:flex;flex-wrap:wrap;gap:8px}.cas-article-keyword{display:inline-flex;align-items:center;min-height:30px;padding:5px 11px;border:1px solid #d4d7da;border-radius:999px;background:#f5f6f7;color:#444a50;font-size:12px;line-height:18px}
.cas-populars{width:100%;max-width:960px;margin:0 auto 58px;padding:30px 15px 0;border-top:1px solid #dedfe1;box-sizing:border-box;font-family:"Open Sans",Arial,Helvetica,sans-serif}.cas-populars__head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 15px}.cas-populars__head h2{margin:0;color:#17191c;font-size:25px;line-height:32px;font-weight:700}.cas-populars__head span{color:#757c83;font-size:11px;line-height:18px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.cas-populars__list{list-style:none;margin:0;padding:0;border-top:2px solid var(--instop-red)}.cas-populars__list li{margin:0;border-bottom:1px solid #e1e3e5}.cas-populars__list a{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:48px;padding:8px 7px;color:#222;text-decoration:none;box-sizing:border-box}.cas-populars__list a:hover{background:#f6f7f8;color:var(--instop-red-hover)}.cas-populars__rank{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#f0f1f2;color:#777;font-size:11px;font-weight:800}.cas-populars__title{font-size:14px;line-height:20px;font-weight:650}.cas-populars__views{color:#727980;font-size:12px;line-height:18px;white-space:nowrap}.cas-populars__list a:hover .cas-populars__views{color:var(--instop-red-hover)}@media(max-width:640px){.cas-article-keywords{margin-bottom:28px;padding-top:21px}.cas-article-keywords__list{gap:6px}.cas-article-keyword{font-size:11px}.cas-populars{margin-bottom:42px;padding:24px 10px 0}.cas-populars__head{display:block}.cas-populars__head h2{font-size:22px;line-height:28px}.cas-populars__head span{display:block;margin-top:3px}.cas-populars__list a{grid-template-columns:28px minmax(0,1fr);gap:8px;padding:9px 3px}.cas-populars__views{grid-column:2;margin-top:-5px;font-size:11px}}

/* =========================================================
   VERSIO 08 - ARTICLES MES VISTOS DINS LA COLUMNA LATERAL
   Reaprofita les classes .cas-populars__* del modul; nomes
   les compacta per a la columna de 260px, sota l'arbre.
   ========================================================= */
.cas-index-side{min-width:0}
.cas-index-side .cas-category-nav{position:static;margin:0 0 18px}
.cas-index-side .cas-populars{width:auto;max-width:none;margin:0;padding:0;border:1px solid #dfe1e4;background:#fff}
.cas-index-side .cas-populars__head{display:block;margin:0;padding:12px 15px;background:#353941}
.cas-index-side .cas-populars__head h2{color:#fff;font-size:13px;line-height:17px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.cas-index-side .cas-populars__head span{display:block;margin-top:2px;color:#b7bcc3;font-size:10px;line-height:14px}
.cas-index-side .cas-populars__list{margin:0;padding:6px 0;border-top:0}
.cas-index-side .cas-populars__list li{border-bottom:1px solid #eceef0}
.cas-index-side .cas-populars__list li:last-child{border-bottom:0}
.cas-index-side .cas-populars__list a{grid-template-columns:20px minmax(0,1fr);gap:9px;align-items:start;min-height:0;padding:8px 12px}
.cas-index-side .cas-populars__rank{width:18px;height:18px;margin-top:1px;font-size:10px;font-weight:700}
.cas-index-side .cas-populars__title{display:-webkit-box;font-size:12.5px;line-height:17px;font-weight:600;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cas-index-side .cas-populars__views{display:none}

/* Si vols mantenir el comptador de visites, substitueix la linia de dalt per:
.cas-index-side .cas-populars__views{display:block;grid-column:2;margin-top:2px;color:#8a9098;font-size:11px;line-height:15px} */

@media(max-width:900px){.cas-index-side .cas-populars{margin:0 0 30px}}


/* ============================================================================
   SWITCH BUTTON  (jquery.switchButton.css)
   ============================================================================ */


.switch-button-label {float: left;font-size: 10pt;cursor: pointer;}
.switch-button-label.off {color: #adadad;}
.switch-button-label.on {color: #0088CC;}
.switch-button-background {float: left;position: relative;background: #ccc;border: 1px solid #aaa;margin: 1px 10px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;cursor: pointer;}
.switch-button-button {position: absolute;left: -1px;top : -1px;background: #FAFAFA;border: 1px solid #aaa;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}


/* ============================================================================
   LIGHTBOX  (lightbox.css)
   ============================================================================ */


#overlay{ position:fixed;_position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);*background:#fff;*filter:alpha(opacity=80);display:none;z-index:9999;}
#lightbox{ position:fixed;_position:absolute;top:50%;left:50%;padding:10px;background:#fff;width:750px;height:750px;margin:-200px 0 0 -300px;display: none;z-index:10000; -moz-box-shadow: 0 0 20px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.7); box-shadow: 0 0 20px rgba(0,0,0,0.7); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
#lightbox.loading { background: #fff url('loading.gif') no-repeat 50% 50%;}
#lightbox a.close { color: var(--instop-red); background: #fff; position: absolute; right: 0; top: 0; display: block; font-size: 12px; z-index: 5; padding: 8px 14px 4px 6px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
#lightbox a.prev, #lightbox a.next { position: absolute; top: 50%; left: 0; padding: 5px; background: #fff; margin-top: -0.5em; width: 6em; text-align: center; opacity: 0.0; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
#lightbox a.next { left: auto; right: 0;}
#lightbox a:hover.prev, #lightbox a:hover.next { opacity: 1;}


/* ============================================================================
   CERCADOR AJAX I RETOCS  (estil_33.css)
   ============================================================================ */


#ajax_listOfOptions{position:absolute;width:375px;overflow:auto;border:1px solid #CCC;background-color:#FFF;text-align:left;font-size:0.9em;z-index:1005;height:550px;}
#ajax_listOfOptions div{margin:1px;padding:1px;cursor:pointer;font-size:0.9em;}
#ajax_listOfOptions .optionDiv{}
#ajax_listOfOptions .optionDivSelected{background-color:#FF9900;color:#FFF;}
#ajax_listOfOptions_iframe{background-color:#F00;position:absolute;z-index:5;}
form{display:inline;}#site #contingut2 #contingut table tr td table tr td div p img { margin-left: 5px;margin-top: 0px;margin-right: 17px;margin-bottom: 0px;}


/* ============================================================================
   JQUERY UI 1.8 - TEMA A MIDA  (jquery-ui-1_8_custom.css)
   Rutes de les imatges passades a absolutes: veure la nota de dalt.
   ============================================================================ */


/*
* jQuery UI CSS Framework
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*/

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
* jQuery UI CSS Framework
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana,Arial,sans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
*/


/* Component containers
----------------------------------*/
.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.2em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
/*.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(/java/jquery-ui/css/smoothness/images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
*/
.ui-widget-content { border: 0px solid #aaaaaa; background: #ffffff; color: #222222; }
.ui-widget-content a { color: #222222; }
/*.ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(/java/jquery-ui/css/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
*/
.ui-widget-header { border: 0px solid #aaaaaa; background: #ffffff ; color: #222222; font-weight: bold; }
.ui-widget-header a { color: #222222; }

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #d3d3d3; background: #e6e6e6 url(/java/jquery-ui/css/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #555555; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #999999; background: #dadada url(/java/jquery-ui/css/smoothness/images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
.ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #aaaaaa; background: #ffffff url(/java/jquery-ui/css/smoothness/images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }
.ui-widget :active { outline: none; }

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight {border: 1px solid #fcefa1; background: #fbf9ee url(/java/jquery-ui/css/smoothness/images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x; color: #363636; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a { color: #363636; }
.ui-state-error, .ui-widget-content .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(/java/jquery-ui/css/smoothness/images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x; color: #cd0a0a; }
.ui-state-error a, .ui-widget-content .ui-state-error a { color: #cd0a0a; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text { color: #cd0a0a; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }

/* Icons
----------------------------------*/

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(/java/jquery-ui/css/smoothness/images/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(/java/jquery-ui/css/smoothness/images/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(/java/jquery-ui/css/smoothness/images/ui-icons_222222_256x240.png); }
.ui-state-default .ui-icon { background-image: url(/java/jquery-ui/css/smoothness/images/ui-icons_888888_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(/java/jquery-ui/css/smoothness/images/ui-icons_454545_256x240.png); }
.ui-state-active .ui-icon {background-image: url(/java/jquery-ui/css/smoothness/images/ui-icons_454545_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(/java/jquery-ui/css/smoothness/images/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(/java/jquery-ui/css/smoothness/images/ui-icons_cd0a0a_256x240.png); }

/* positioning */
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-off { background-position: -96px -144px; }
.ui-icon-radio-on { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: 1px; -webkit-border-top-left-radius: 1px; border-top-left-radius: 1px; }
.ui-corner-tr { -moz-border-radius-topright: 1px; -webkit-border-top-right-radius: 1px; border-top-right-radius: 1px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 1px; -webkit-border-bottom-left-radius: 1px; border-bottom-left-radius: 1px; }
.ui-corner-br { -moz-border-radius-bottomright: 1px; -webkit-border-bottom-right-radius: 1px; border-bottom-right-radius: 1px; }
.ui-corner-top { -moz-border-radius-topleft: 1px; -webkit-border-top-left-radius: 1px; border-top-left-radius: 1px; -moz-border-radius-topright: 1px; -webkit-border-top-right-radius: 1px; border-top-right-radius: 1px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 1px; -webkit-border-bottom-left-radius: 1px; border-bottom-left-radius: 1px; -moz-border-radius-bottomright: 1px; -webkit-border-bottom-right-radius: 1px; border-bottom-right-radius: 1px; }
.ui-corner-right {  -moz-border-radius-topright: 1px; -webkit-border-top-right-radius: 1px; border-top-right-radius: 1px; -moz-border-radius-bottomright: 1px; -webkit-border-bottom-right-radius: 1px; border-bottom-right-radius: 1px; }
.ui-corner-left { -moz-border-radius-topleft: 1px; -webkit-border-top-left-radius: 1px; border-top-left-radius: 1px; -moz-border-radius-bottomleft: 1px; -webkit-border-bottom-left-radius: 1px; border-bottom-left-radius: 1px; }
.ui-corner-all { -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; }

/* Overlays */
.ui-widget-overlay { background: #aaaaaa url(/java/jquery-ui/css/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(/java/jquery-ui/css/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }/* Resizable
----------------------------------*/
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/* Accordion
----------------------------------*/
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
.ui-accordion .ui-accordion-content-active { display: block; }/* Autocomplete
----------------------------------*/
.ui-autocomplete { position: absolute; cursor: default; }
.ui-autocomplete-loading { background: white url('/java/jquery-ui/css/smoothness/images/ui-anim_basic_16x16.gif') right center no-repeat; }

/* workarounds */
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */

/* Menu
----------------------------------*/
.ui-menu {
	list-style:none;
	padding: 2px;
	margin: 0;
	display:block;
}
.ui-menu .ui-menu {
	margin-top: -3px;
}
.ui-menu .ui-menu-item {
	margin:0;
	padding: 0;
	width: 100%;
}
.ui-menu .ui-menu-item a {
	text-decoration:none;
	display:block;
	padding:.2em .4em;
	line-height:1.5;
	zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
	margin: -1px;
}
/* Button
----------------------------------*/

.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
.ui-button-icons-only { width: 3.4em; }
button.ui-button-icons-only { width: 3.7em; }

/*button text element */
.ui-button .ui-button-text { display: block; line-height: 1.4;  }
.ui-button-text-only .ui-button-text { padding: .4em 1em; }
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
.ui-button-text-icon .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
/* no icon support for input elements, provide padding by default */
input.ui-button { padding: .4em 1em; }

/*button icon element(s) */
.ui-button-icon-only .ui-icon, .ui-button-text-icon .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
.ui-button-text-icon .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }

/*button sets*/
.ui-buttonset { margin-right: 7px; }
.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }

/* workarounds */
button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */





/* Dialog
----------------------------------*/
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .5em 1em .3em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .2em 0; }
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
/* Slider
----------------------------------*/
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }/* Tabs
----------------------------------*/
.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em .5em; text-decoration: none; font-size:0.7em; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; border: 0; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }
/* Datepicker
----------------------------------*/
.ui-datepicker { width: 17em; padding: .2em .2em 0; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; }

/* RTL support */
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
    display: none; /*sorry for IE5*/
    display/**/: block; /*sorry for IE5*/
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}/* Progressbar
----------------------------------*/
.ui-progressbar { height:2em; text-align: left; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }


/* ============================================================================
   SELECT2 4.1.0-rc.0  ·  MIT  ·  https://select2.org
   Copia identica del paquet oficial. Abans es carregava des de cdnjs.
   ============================================================================ */


.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{background-color:transparent;border:none;font-size:1em}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline;list-style:none;padding:0}.select2-container .select2-selection--multiple .select2-selection__clear{background-color:transparent;border:none;font-size:1em}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;margin-left:5px;padding:0;max-width:100%;resize:none;height:18px;vertical-align:bottom;font-family:sans-serif;overflow:hidden;word-break:keep-all}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option--selectable{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;height:26px;margin-right:20px;padding-right:0px}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;padding-bottom:5px;padding-right:5px;position:relative}.select2-container--default .select2-selection--multiple.select2-selection--clearable{padding-right:25px}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;font-weight:bold;height:20px;margin-right:10px;margin-top:5px;position:absolute;right:0;padding:1px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:inline-block;margin-left:5px;margin-top:5px;padding:0;padding-left:20px;position:relative;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}.select2-container--default .select2-selection--multiple .select2-selection__choice__display{cursor:default;padding-left:2px;padding-right:5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{background-color:transparent;border:none;border-right:1px solid #aaa;border-top-left-radius:4px;border-bottom-left-radius:4px;color:#999;cursor:pointer;font-size:1em;font-weight:bold;padding:0 4px;position:absolute;left:0;top:0}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus{background-color:#f1f1f1;color:#333;outline:none}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display{padding-left:5px;padding-right:2px}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{border-left:1px solid #aaa;border-right:none;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__clear{float:left;margin-left:10px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--group{padding:0}.select2-container--default .select2-results__option--disabled{color:#999}.select2-container--default .select2-results__option--selected{background-color:#ddd}.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background-color:#5897fb;color:white}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #fff 50%, #eee 100%);background-image:-o-linear-gradient(top, #fff 50%, #eee 100%);background-image:linear-gradient(to bottom, #fff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;height:26px;margin-right:20px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top, #eee 50%, #ccc 100%);background-image:-o-linear-gradient(top, #eee 50%, #ccc 100%);background-image:linear-gradient(to bottom, #eee 50%, #ccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top, #fff 0%, #eee 50%);background-image:-o-linear-gradient(top, #fff 0%, #eee 50%);background-image:linear-gradient(to bottom, #fff 0%, #eee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top, #eee 50%, #fff 100%);background-image:-o-linear-gradient(top, #eee 50%, #fff 100%);background-image:linear-gradient(to bottom, #eee 50%, #fff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0;padding-bottom:5px;padding-right:5px}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;display:inline-block;margin-left:5px;margin-top:5px;padding:0}.select2-container--classic .select2-selection--multiple .select2-selection__choice__display{cursor:default;padding-left:2px;padding-right:5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{background-color:transparent;border:none;border-top-left-radius:4px;border-bottom-left-radius:4px;color:#888;cursor:pointer;font-size:1em;font-weight:bold;padding:0 4px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555;outline:none}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display{padding-left:5px;padding-right:2px}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option--group{padding:0}.select2-container--classic .select2-results__option--disabled{color:grey}.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb}


/* =========================================================
   VERSIO 32 - BANNERS VINCULATS A PRODUCTE INTEGRATS
   Fusionat des de 2026-banners-producte-instop-01.css.
   Aquest bloc queda al final per conservar la prioritat.
   ========================================================= */
/* ==========================================================
   INSTOP · BANNERS VINCULATS A PRODUCTE · 2026-01
   Complement del CSS RAW existent.
   ========================================================== */

:root{
  --instop-product-banner-width:420px;
}

.raw-manual-banner-hidden{display:none!important;}
.raw-product-banner-auto{width:100%;margin:0 auto 18px;}
.raw-product-banner-auto .raw-banner-conjunt{width:100%;height:220px;}
.raw-product-banner-auto .raw-banner-img{width:100%;height:100%;object-fit:cover;}
/* Video: 'contain' en lloc de 'cover'. La caixa es fixa i baixa (160-220px) i molt ampla;
   amb 'cover' un video vertical quedava escapcat quasi del tot per dalt i per baix.
   Amb 'contain' es veu sencer, amb bandes negres als costats quan cal (background
   #000 ja ve heretat de la regla base .raw-banner-video de la linia 5439). */
.raw-product-banner-auto .raw-banner-video{width:100%;height:100%;object-fit:contain;}

.raw-banner-managed .raw-video-toggle{
  position:absolute;
  z-index:20;
  left:16px;
  top:16px;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  background:rgba(30,30,30,.72);
  color:#fff;
  font:700 17px/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.raw-banner-managed .raw-video-toggle:hover{background:rgba(0,0,0,.88);}

.instop-page-with-left-banner{width:100%;min-width:0;box-sizing:border-box;}
.instop-banner-vertical-escriptori{display:none;}

@media (min-width:1400px) and (max-width:1699px){:root{--instop-product-banner-width:360px;}}
@media (min-width:1700px) and (max-width:2099px){:root{--instop-product-banner-width:460px;}}
@media (min-width:2100px){:root{--instop-product-banner-width:560px;}}

@media (min-width:1400px){
  body.instop-banner-actiu{overflow-x:hidden;background:#fff;}
  body.instop-banner-actiu .instop-banner-vertical-escriptori{
    display:block;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:var(--instop-product-banner-width);
    height:100vh;
    overflow:hidden;
    background:#eee;
    z-index:0;
  }
  body.instop-banner-actiu .instop-banner-vertical-escriptori .raw-banner-conjunt,
  body.instop-banner-actiu .instop-banner-vertical-escriptori .raw-banner-frame,
  body.instop-banner-actiu .instop-banner-vertical-escriptori .raw-banner-img,
  body.instop-banner-actiu .instop-banner-vertical-escriptori .raw-banner-video{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
  }
  body.instop-banner-actiu .instop-banner-vertical-escriptori .raw-banner-img,
  body.instop-banner-actiu .instop-banner-vertical-escriptori .raw-banner-video{object-fit:cover!important;}
  body.instop-banner-actiu .instop-banner-vertical-escriptori .raw-video-toggle{top:72px;left:16px;}
  body.instop-banner-actiu .instop-page-with-left-banner{
    position:relative;
    z-index:2;
    width:auto;
    min-height:100vh;
    margin-left:var(--instop-product-banner-width);
    background:#fff;
  }
}

@media (max-width:1399px){
  .instop-banner-vertical-escriptori{display:none!important;}
  .instop-page-with-left-banner{width:100%!important;margin-left:0!important;}
}

@media (max-width:768px){
  .raw-product-banner-auto{margin-bottom:12px;}
  .raw-product-banner-auto .raw-banner-conjunt{height:160px;}
  .raw-banner-managed .raw-video-toggle{width:34px;height:34px;top:10px;left:10px;font-size:15px;}
}
/* =========================================================
   VERSIO 26 - LLIBRERIA ANTIGA EN PLANTILLES 2026
   Les plantilles 2026-ARTICLES-*.dwt no tenen #zona-text2 /
   #zona-din / #zona-fac: la V25 no hi arribava i cada
   #item_2.item-card es quedava amb width:100% = 1 per fila.
   Ara la graella s'activa per estructura, no per id.
   ========================================================= */
#contingut td[valign="top"]:has(> #item_2.item-card){
  display:flex !important;
  flex-flow:row wrap !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:18px 14px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

#contingut td[valign="top"]:has(> #item_2.item-card) > #item_2.item-card{
  float:none !important;
  clear:none !important;
  flex:0 0 calc((100% - 42px) / 4) !important;
  width:calc((100% - 42px) / 4) !important;
  min-width:0 !important;
  max-width:calc((100% - 42px) / 4) !important;
  height:auto !important;
  min-height:356px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

@media (max-width:1050px){
  #contingut td[valign="top"]:has(> #item_2.item-card) > #item_2.item-card{
    flex-basis:calc((100% - 28px) / 3) !important;
    width:calc((100% - 28px) / 3) !important;
    max-width:calc((100% - 28px) / 3) !important;
  }
}

@media (max-width:760px){
  #contingut td[valign="top"]:has(> #item_2.item-card){
    gap:14px 10px !important;
  }
  #contingut td[valign="top"]:has(> #item_2.item-card) > #item_2.item-card{
    flex-basis:calc((100% - 10px) / 2) !important;
    width:calc((100% - 10px) / 2) !important;
    max-width:calc((100% - 10px) / 2) !important;
    min-height:0 !important;
  }
}

@media (max-width:480px){
  #contingut td[valign="top"]:has(> #item_2.item-card) > #item_2.item-card{
    flex-basis:100% !important;
    width:100% !important;
    max-width:100% !important;
  }
}
/* =========================================================
   LEICA RTC300 / RTC500 / RTC700 - COMPARATIVA EN 3 COLUMNES
   S'integra al CSS principal; no necessita icones ni un segon CSS.
   ========================================================= */
.dron-grid-3col,
#contingut .dron-grid-3col{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  align-items:stretch !important;
  gap:18px !important;
  width:100% !important;
  max-width:1046px !important;
  margin:28px auto 34px !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

.dron-grid-3col > .dron-item,
#contingut .dron-grid-3col > .dron-item{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  width:auto !important;
  margin:0 !important;
  padding:20px !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid var(--instop-line,#d7dadd) !important;
  border-top:5px solid var(--instop-red,#b93425) !important;
  border-radius:6px !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}

.dron-grid-3col > .dron-item:nth-child(1){border-top-color:#278346 !important;}
.dron-grid-3col > .dron-item:nth-child(2){border-top-color:#315f8d !important;}
.dron-grid-3col > .dron-item:nth-child(3){border-top-color:var(--instop-red,#b93425) !important;}

.dron-grid-3col > .dron-item > a:first-child,
#contingut .dron-grid-3col > .dron-item > a:first-child{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:210px !important;
  margin:0 0 12px !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#fff !important;
  text-decoration:none !important;
}

.dron-grid-3col > .dron-item > a:first-child img,
#contingut .dron-grid-3col > .dron-item > a:first-child img{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:205px !important;
  margin:auto !important;
  object-fit:contain !important;
}

.dron-grid-3col .dron-info,
#contingut .dron-grid-3col .dron-info{
  min-height:104px !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
}

.dron-grid-3col .dron-info br{display:none !important;}

.dron-grid-3col .dron-info .titol_Producte28,
#contingut .dron-grid-3col .dron-info .titol_Producte28{
  display:block !important;
  margin:0 0 12px !important;
  padding:0 !important;
  color:var(--instop-heading,#20242a) !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-size:27px !important;
  line-height:1.15 !important;
  font-weight:650 !important;
  letter-spacing:-.025em !important;
  text-align:left !important;
  text-decoration:none !important;
}

.dron-grid-3col .dron-info .titol_Producte28:hover,
#contingut .dron-grid-3col .dron-info .titol_Producte28:hover{
  color:var(--instop-red,#b93425) !important;
}

.dron-grid-3col .dron-info .boto-telefon,
#contingut .dron-grid-3col .dron-info .boto-telefon{
  display:inline-flex !important;
  width:auto !important;
  min-width:0 !important;
  min-height:38px !important;
  margin:0 !important;
  padding:8px 15px !important;
  border-radius:2px !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}

.dron-grid-3col > .dron-item > .normal_instop,
#contingut .dron-grid-3col > .dron-item > .normal_instop{
  min-height:72px !important;
  margin:0 0 14px !important;
  padding:13px 0 0 !important;
  border-top:1px solid #eceeef !important;
  color:var(--instop-muted,#697078) !important;
  font-size:14px !important;
  line-height:1.45 !important;
}

.dron-grid-3col > .dron-item > .normal_instop strong{
  display:block !important;
  margin:0 0 3px !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:.045em !important;
}

.dron-grid-3col > .dron-item:nth-child(1) > .normal_instop strong{color:#278346 !important;}
.dron-grid-3col > .dron-item:nth-child(2) > .normal_instop strong{color:#315f8d !important;}
.dron-grid-3col > .dron-item:nth-child(3) > .normal_instop strong{color:var(--instop-red,#b93425) !important;}

.dron-grid-3col .caracteristiques,
#contingut .dron-grid-3col .caracteristiques{
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* PRESUPUESTO: mateixa amplada i alineat a baix a les 3 targetes.
   Compatible amb les dues estructures antigues:
   .principal > a  i  a.boto-telefon > .principal */
.dron-grid-3col .caracteristiques > .principal,
#contingut .dron-grid-3col .caracteristiques > .principal{
  display:flex !important;
  align-items:stretch !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin-top:auto !important;
  padding-top:24px !important;
  box-sizing:border-box !important;
}

.dron-grid-3col .caracteristiques > .principal > a,
#contingut .dron-grid-3col .caracteristiques > .principal > a,
.dron-grid-3col .caracteristiques > a.boto-telefon,
#contingut .dron-grid-3col .caracteristiques > a.boto-telefon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:stretch !important;

  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:58px !important;

  margin:0 !important;
  padding:12px 18px !important;
  box-sizing:border-box !important;

  background:var(--instop-primary,#b93425) !important;
  border:1px solid var(--instop-primary,#b93425) !important;
  border-radius:2px !important;

  color:#fff !important;
  text-decoration:none !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-size:15px !important;
  line-height:1 !important;
  font-weight:700 !important;
  text-align:center !important;
  text-transform:uppercase !important;
  box-shadow:none !important;
}

.dron-grid-3col .caracteristiques > .principal > a:hover,
#contingut .dron-grid-3col .caracteristiques > .principal > a:hover,
.dron-grid-3col .caracteristiques > a.boto-telefon:hover,
#contingut .dron-grid-3col .caracteristiques > a.boto-telefon:hover{
  background:var(--instop-primary-hover,#8f281d) !important;
  border-color:var(--instop-primary-hover,#8f281d) !important;
  color:#fff !important;
  text-decoration:none !important;
}

/* Si el codi antic posa .principal DINS del boto,
   no ha de conservar amplades, marges ni fons propis. */
.dron-grid-3col .caracteristiques > a.boto-telefon > .principal,
#contingut .dron-grid-3col .caracteristiques > a.boto-telefon > .principal{
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  color:inherit !important;
  font:inherit !important;
  line-height:inherit !important;
}

.dron-grid-3col .factor-bloc,
#contingut .dron-grid-3col .factor-bloc{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 0 18px !important;
  padding:0 !important;
  border-top:1px solid var(--instop-line,#d7dadd) !important;
  box-sizing:border-box !important;
}

.dron-grid-3col .factor-row,
#contingut .dron-grid-3col .factor-row{
  display:grid !important;
  grid-template-columns:minmax(112px,1fr) minmax(110px,1.05fr) !important;
  align-items:center !important;
  gap:10px !important;
  min-height:58px !important;
  margin:0 !important;
  padding:9px 0 !important;
  border-bottom:1px solid #eceeef !important;
  box-sizing:border-box !important;
}

.dron-grid-3col .factor-label,
#contingut .dron-grid-3col .factor-label{
  display:block !important;
  min-width:0 !important;
  color:var(--instop-muted,#697078) !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-size:12px !important;
  line-height:1.25 !important;
  font-weight:600 !important;
}

.dron-grid-3col .factor-label strong,
#contingut .dron-grid-3col .factor-label strong{
  display:block !important;
  margin-top:3px !important;
  color:var(--instop-heading,#20242a) !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:750 !important;
}

.dron-grid-3col .factor-bar,
#contingut .dron-grid-3col .factor-bar{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  align-items:center !important;
  gap:4px !important;
  width:100% !important;
  min-width:0 !important;
  color:var(--instop-red,#b93425) !important;
}

.dron-grid-3col > .dron-item:nth-child(1) .factor-bar{color:#278346 !important;}
.dron-grid-3col > .dron-item:nth-child(2) .factor-bar{color:#315f8d !important;}
.dron-grid-3col > .dron-item:nth-child(3) .factor-bar{color:var(--instop-red,#b93425) !important;}

.dron-grid-3col .factor-bar i,
#contingut .dron-grid-3col .factor-bar i{
  display:block !important;
  width:auto !important;
  height:8px !important;
  margin:0 !important;
  padding:0 !important;
  background:#dfe2e4 !important;
  border:0 !important;
  transform:skewX(-17deg) !important;
}

.dron-grid-3col .factor-bar.factor-1 i:nth-child(-n+1),
.dron-grid-3col .factor-bar.factor-2 i:nth-child(-n+2),
.dron-grid-3col .factor-bar.factor-3 i:nth-child(-n+3),
.dron-grid-3col .factor-bar.factor-4 i:nth-child(-n+4),
.dron-grid-3col .factor-bar.factor-5 i:nth-child(-n+5){
  background:currentColor !important;
}

.dron-grid-3col .factor-accio,
#contingut .dron-grid-3col .factor-accio{
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
}

.dron-grid-3col .factor-accio .normal_instop,
#contingut .dron-grid-3col .factor-accio .normal_instop{
  margin:0 0 13px !important;
  padding:0 !important;
  color:var(--instop-ink,#40454a) !important;
  font-size:13px !important;
  line-height:1.5 !important;
  text-align:left !important;
}

.dron-grid-3col .factor-accio .normal_instop strong,
#contingut .dron-grid-3col .factor-accio .normal_instop strong{
  color:var(--instop-heading,#20242a) !important;
  font-weight:700 !important;
}

.dron-grid-3col .factor-accio > .boto-telefon,
#contingut .dron-grid-3col .factor-accio > .boto-telefon{
  display:inline-flex !important;
  align-self:flex-start !important;
  width:auto !important;
  min-width:0 !important;
  min-height:40px !important;
  margin:auto 0 0 !important;
  padding:9px 16px !important;
  border-radius:2px !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.035em !important;
  text-transform:uppercase !important;
}

.dron-grid-3col + .normal_instop,
#contingut .dron-grid-3col + .normal_instop{
  width:100% !important;
  margin:0 auto 34px !important;
  padding:16px 18px !important;
  border:1px solid var(--instop-line,#d7dadd) !important;
  border-left:4px solid var(--instop-red,#b93425) !important;
  background:var(--instop-soft,#f4f5f6) !important;
  box-sizing:border-box !important;
}

.dron-grid-3col + .normal_instop p{margin:0 !important;}

@media (max-width:900px){
  .dron-grid-3col,
  #contingut .dron-grid-3col{
    grid-template-columns:1fr !important;
    max-width:640px !important;
    gap:18px !important;
    padding:0 12px !important;
  }

  .dron-grid-3col > .dron-item,
  #contingut .dron-grid-3col > .dron-item{
    padding:18px !important;
  }

  .dron-grid-3col > .dron-item > a:first-child,
  #contingut .dron-grid-3col > .dron-item > a:first-child{
    height:240px !important;
  }

  .dron-grid-3col > .dron-item > a:first-child img,
  #contingut .dron-grid-3col > .dron-item > a:first-child img{
    max-height:235px !important;
  }

  .dron-grid-3col .dron-info,
  #contingut .dron-grid-3col .dron-info,
  .dron-grid-3col > .dron-item > .normal_instop,
  #contingut .dron-grid-3col > .dron-item > .normal_instop{
    min-height:0 !important;
  }
}

@media (max-width:480px){
  .dron-grid-3col,
  #contingut .dron-grid-3col{
    margin-top:18px !important;
    padding:0 8px !important;
  }

  .dron-grid-3col > .dron-item,
  #contingut .dron-grid-3col > .dron-item{
    padding:15px !important;
  }

  .dron-grid-3col > .dron-item > a:first-child,
  #contingut .dron-grid-3col > .dron-item > a:first-child{
    height:200px !important;
  }

  .dron-grid-3col > .dron-item > a:first-child img,
  #contingut .dron-grid-3col > .dron-item > a:first-child img{
    max-height:195px !important;
  }

  .dron-grid-3col .factor-row,
  #contingut .dron-grid-3col .factor-row{
    grid-template-columns:1fr !important;
    gap:7px !important;
  }

  .dron-grid-3col .factor-bar,
  #contingut .dron-grid-3col .factor-bar{
    max-width:210px !important;
  }
}

/* =========================================================
   RTC - CORRECCIO ICONES I VALORACIONS 2026-08
   ========================================================= */

/* Icones universals reutilitzables, sense llibreries externes. */
.instop-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;color:var(--instop-red,#b93425);font:700 23px/1 Arial,Helvetica,sans-serif;vertical-align:middle;}
.instop-icon::before{display:block;line-height:1;}
.instop-icon--range::before{content:"◎";}
.instop-icon--speed::before{content:"◴";}
.instop-icon--precision::before{content:"⊕";}
.instop-icon--camera::before{content:"▣";}
.instop-icon--productivity::before{content:"▥";}
.instop-icon--resolution::before{content:"⠿";}
.instop-icon--building::before{content:"▦";}
.instop-icon--waveform::before{content:"≋";}
.instop-icon--data::before{content:"◇";}
.instop-icon--cloud::before{content:"☁";}
.instop-icon--support::before{content:"✓";}
.instop-icon--check::before{content:"✓";}

/* Les cinc icones s'insereixen automaticament sense tocar l'HTML. */
.dron-grid-3col .factor-label,
#contingut .dron-grid-3col .factor-label{display:grid !important;grid-template-columns:26px minmax(0,1fr) !important;column-gap:8px !important;align-items:center !important;}
.dron-grid-3col .factor-label::before,
#contingut .dron-grid-3col .factor-label::before{grid-column:1;grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--instop-red,#b93425);font:700 23px/1 Arial,Helvetica,sans-serif;}
.dron-grid-3col .factor-label > br,
#contingut .dron-grid-3col .factor-label > br{display:none !important;}
.dron-grid-3col .factor-label > strong,
#contingut .dron-grid-3col .factor-label > strong{grid-column:2;}
.dron-grid-3col .factor-row:nth-child(1) .factor-label::before,
#contingut .dron-grid-3col .factor-row:nth-child(1) .factor-label::before{content:"◎";}
.dron-grid-3col .factor-row:nth-child(2) .factor-label::before,
#contingut .dron-grid-3col .factor-row:nth-child(2) .factor-label::before{content:"◴";}
.dron-grid-3col .factor-row:nth-child(3) .factor-label::before,
#contingut .dron-grid-3col .factor-row:nth-child(3) .factor-label::before{content:"⊕";}
.dron-grid-3col .factor-row:nth-child(4) .factor-label::before,
#contingut .dron-grid-3col .factor-row:nth-child(4) .factor-label::before{content:"▣";}
.dron-grid-3col .factor-row:nth-child(5) .factor-label::before,
#contingut .dron-grid-3col .factor-row:nth-child(5) .factor-label::before{content:"▥";}

/* Correccio d'especificitat: els trams actius han de guanyar al gris base. */
.dron-grid-3col .factor-bar.factor-1 i:nth-child(-n+1),
#contingut .dron-grid-3col .factor-bar.factor-1 i:nth-child(-n+1),
.dron-grid-3col .factor-bar.factor-2 i:nth-child(-n+2),
#contingut .dron-grid-3col .factor-bar.factor-2 i:nth-child(-n+2),
.dron-grid-3col .factor-bar.factor-3 i:nth-child(-n+3),
#contingut .dron-grid-3col .factor-bar.factor-3 i:nth-child(-n+3),
.dron-grid-3col .factor-bar.factor-4 i:nth-child(-n+4),
#contingut .dron-grid-3col .factor-bar.factor-4 i:nth-child(-n+4),
.dron-grid-3col .factor-bar.factor-5 i:nth-child(-n+5),
#contingut .dron-grid-3col .factor-bar.factor-5 i:nth-child(-n+5){background:currentColor !important;}

/* =========================================================
   CAPCALERA LLOGUER + TELEFON DESTACAT
   ========================================================= */

#contingut .capcalera-lloguer{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 340px !important;
  column-gap:60px !important;
  align-items:center !important;

  width:100% !important;
  margin:40px 0 45px !important;
  padding:0 !important;

  box-sizing:border-box !important;
}


/* Títol esquerra */
#contingut .capcalera-lloguer .titol_Producte_28_ROIG{
  margin:0 !important;
  padding:0 !important;
}


/* Telèfon */
#contingut .capcalera-lloguer .telefon-lloguer-gran{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:100% !important;
  min-height:82px !important;

  margin:0 !important;
  padding:20px 24px !important;

  box-sizing:border-box !important;

  background:#fff !important;

  border:1px solid #d4d4d4 !important;
  border-top:3px solid var(--instop-red) !important;

  color:#292929 !important;
  text-decoration:none !important;

  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-size:30px !important;
  line-height:1 !important;
  font-weight:600 !important;
  letter-spacing:-.5px !important;

  box-shadow:0 4px 14px rgba(0,0,0,.05) !important;
}


/* Hover discret */
#contingut .capcalera-lloguer .telefon-lloguer-gran:hover{
  color:var(--instop-red-hover) !important;
  border-color:#c5c5c5 !important;
  border-top-color:var(--instop-red-hover) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.08) !important;
}


/* MOBIL */
@media(max-width:800px){

  #contingut .capcalera-lloguer{
    grid-template-columns:1fr !important;
    row-gap:22px !important;
    margin:25px 0 35px !important;
  }

  #contingut .capcalera-lloguer .telefon-lloguer-gran{
    min-height:70px !important;
    font-size:25px !important;
  }

}

/* =========================================================
   INTRO LLOGUER SOBRE IMATGE - PRODUCCIO 2026
   Reutilitzable a les intros INSTOP.

   Classes de produccio: .intro-lloguer*
   Alias temporal:       .intro-hire-test*
   L'alias permet que la pagina de prova continuï funcionant
   mentre les noves intros ja poden usar els noms definitius.
   ========================================================= */

#contingut .intro-lloguer,
#contingut .intro-hire-test{
  --intro-hire-width:440px;
  --intro-hire-overlay-width:280px;
  --intro-hire-red:var(--instop-primary,#b93425);
  --intro-hire-red-hover:var(--instop-primary-hover,#8f281d);

  width:var(--intro-hire-width);
  max-width:100%;
  margin:0 auto;
  box-sizing:border-box;
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
}


/* Imatge / video */
#contingut .intro-lloguer__imatge,
#contingut .intro-hire-test__imatge{
  position:relative;
  width:var(--intro-hire-width);
  max-width:100%;
  margin:0 auto;
  overflow:hidden;
  box-sizing:border-box;
}

#contingut .intro-lloguer__imatge img,
#contingut .intro-lloguer__imatge video,
#contingut .intro-hire-test__imatge img,
#contingut .intro-hire-test__imatge video{
  display:block;
  width:var(--intro-hire-width) !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto !important;
}


/* Bloc superposat a la part inferior */
#contingut .intro-lloguer__overlay,
#contingut .intro-hire-test__overlay{
  position:absolute;
  left:20px;
  bottom:20px;
  z-index:2;

  width:var(--intro-hire-overlay-width);
  max-width:calc(100% - 40px);
  padding:0;
  box-sizing:border-box;
}


/* Pastilla / boto de lloguer */
#contingut .intro-lloguer__tag,
#contingut .intro-hire-test__tag{
  display:flex;
  align-items:center;
  justify-content:center;

  width:50%;
  min-height:42px;
  margin:0 0 10px;
  padding:0 15px;
  box-sizing:border-box;

  background:var(--intro-hire-red);
  border:1px solid var(--intro-hire-red);
  border-radius:2px;

  color:#fff !important;
  text-decoration:none !important;

  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;

  box-shadow:0 4px 12px rgba(0,0,0,.14);
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

#contingut .intro-lloguer__tag:hover,
#contingut .intro-lloguer__tag:focus-visible,
#contingut .intro-hire-test__tag:hover,
#contingut .intro-hire-test__tag:focus-visible{
  background:var(--intro-hire-red-hover);
  border-color:var(--intro-hire-red-hover);
  color:#fff !important;
  text-decoration:none !important;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  transform:translateY(-1px);
}

#contingut .intro-lloguer__tag:focus-visible,
#contingut .intro-hire-test__tag:focus-visible{
  outline:2px solid #fff;
  outline-offset:-4px;
}


/* Pastilla blanca de text */
#contingut .intro-lloguer__textwrap,
#contingut .intro-hire-test__textwrap{
  width:100%;
  padding:15px 17px 14px;
  box-sizing:border-box;

  background:rgba(255,255,255,.91);
  border-left:3px solid var(--intro-hire-red);
  box-shadow:0 7px 22px rgba(0,0,0,.10);

  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
}


/* Titular: Abrir una cuenta */
#contingut .intro-lloguer__titol,
#contingut .intro-hire-test__titol{
  margin:0 0 6px !important;
  padding:0 !important;

  color:#222;
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:22px !important;
  line-height:1.08 !important;
  font-weight:600;
  letter-spacing:-.03em;
}


/* Subtitol: servei rapid */
#contingut .intro-lloguer__servei,
#contingut .intro-hire-test__servei{
  margin:0 0 8px !important;
  padding:0 !important;

  color:#404040;
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:15px !important;
  line-height:1.3 !important;
  font-weight:600;
}


/* Text breu variable per pagina */
#contingut .intro-lloguer__text,
#contingut .intro-hire-test__text{
  margin:0 !important;
  padding:0 !important;

  color:#666;
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:12px !important;
  line-height:1.45 !important;
  font-weight:400;
}


/* Responsive propi del component.
   El CSS historic d'INSTOP amaga .col-img per sota de 1045px;
   ho respectem per no alterar ara el comportament global. */
@media(max-width:520px){

  #contingut .intro-lloguer,
  #contingut .intro-lloguer__imatge,
  #contingut .intro-hire-test,
  #contingut .intro-hire-test__imatge{
    width:100%;
  }

  #contingut .intro-lloguer__imatge img,
  #contingut .intro-lloguer__imatge video,
  #contingut .intro-hire-test__imatge img,
  #contingut .intro-hire-test__imatge video{
    width:100% !important;
  }

  #contingut .intro-lloguer__overlay,
  #contingut .intro-hire-test__overlay{
    left:14px;
    bottom:14px;
    width:250px;
    max-width:calc(100% - 28px);
  }

  #contingut .intro-lloguer__tag,
  #contingut .intro-hire-test__tag{
    width:50%;
    min-height:38px;
    padding:0 12px;
    font-size:13px;
  }

  #contingut .intro-lloguer__textwrap,
  #contingut .intro-hire-test__textwrap{
    padding:13px 14px 12px;
  }

  #contingut .intro-lloguer__titol,
  #contingut .intro-hire-test__titol{
    font-size:19px !important;
  }

  #contingut .intro-lloguer__servei,
  #contingut .intro-hire-test__servei{
    font-size:13px !important;
  }

  #contingut .intro-lloguer__text,
  #contingut .intro-hire-test__text{
    font-size:11px !important;
    line-height:1.4 !important;
  }
}


/* =========================================================
   FITXA DE PRODUCTE 2026 - SEPARACIONS I RITME VERTICAL
   Plantilla: 2026-producte-dinamic-06-SEO.dwt i posteriors.

   Corregeix tres defectes de la fitxa de producte:
     1. La columna del text quedava enganxada a la imatge principal.
     2. La galeria de miniatures tocava els blocs de sota.
     3. La tira de videos sobresortia i trepitjava la linia "REF: ...".

   Els selectors porten #contingut al davant perque la plantilla porta
   un <style> incrustat al cos de la pagina: va despres d'aquest full
   i, a igual especificitat, guanyaria ell.
   ========================================================= */

/* 1. Carrer entre la columna de la imatge i la del text. Nomes toquem
      la columna dreta perque la galeria de l'esquerra no es descentri. */
#contingut .contenidor-1050 > .columna-65{
  padding-left:34px;
}

/* 2. Aire per sota de les dues columnes: la galeria de miniatures
      deixa de tocar els blocs .instop-item140 que venen tot seguit. */
#contingut .contenidor-1050 > .columna-35,
#contingut .contenidor-1050 > .columna-65{
  padding-bottom:34px;
}

/* 3. #container tenia alcada fixa de 120px. Com que .contenidor-1050 *
      posa box-sizing:border-box i .centrat hi afegeix 20px de farciment
      a dalt i a baix, l'espai util queda en 80px mentre que la tira de
      videos n'ocupa uns 132: el sobrant sortia de la caixa i es
      superposava a la linia de la referencia. Passem a alcada
      automatica i deixem els 120px com a minim, per no alterar les
      pagines que reserven aquest espai. */
#container{
  height:auto;
  min-height:120px;
}

#contingut .grupyoutube{
  margin-bottom:12px;
}

/* Mobil: el carrer lateral desapareix i passa a separacio vertical. */
@media (max-width:768px){
  #contingut .contenidor-1050 > .columna-65{
    padding-left:0;
    padding-top:22px;
  }

  #contingut .contenidor-1050 > .columna-35,
  #contingut .contenidor-1050 > .columna-65{
    padding-bottom:24px;
  }
}


/* ====== 36  PESTANYES: NOMS DE CLASSE DE jQuery UI 1.12 ====== */
.ui-tabs .ui-tabs-nav li.ui-tabs-active{margin-bottom:0;padding-bottom:1px;}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-state-processing a{cursor:text;}
.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a{cursor:pointer;}


/* ==========================================================================
   37  QUADRICULES DE LA FITXA DE PRODUCTE ANTIGA
   Substitueix les 10 taules imbricades de
   X-OBSOLET-instop-PRODUCTE-taules.dwt. Cap altre full ni plantilla fa
   servir el prefix .prod-, o sigui que aquest bloc no pot afectar res mes.
   ========================================================================== */

.prod-pagina{
  max-width:1046px;
  margin:0 auto;
  padding:0 12px;
  box-sizing:border-box;
  background:#fff;
}

/* Sense aixo, un contingut llarg dins d una cel·la de graella la fa creixer
   i trenca la fila sencera. */
.prod-pagina > *,
.prod-pagina [class^="prod-"]{min-width:0;}

/* Abans les imatges portaven width fix i sortien de la pantalla a mobil. */
.prod-pagina img{max-width:100%;height:auto;}

.prod-barra{min-height:5px;}

.prod-cap{
  display:grid;
  grid-template-columns:1fr 100px;
  gap:12px;
  align-items:start;
}

/* Mateixes declaracions que l style en linia que hi havia al <h1>.
   El vermell es queda a #FF0000 expressament: no es un boto i no entra
   a la unificacio de vermells. */
.prod-titol{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  font-style:normal;
  font-weight:bold;
  word-spacing:normal;
  color:var(--instop-red);
  text-decoration:none;
  text-align:left;
}

.prod-models{margin:6px 0 16px;}

.prod-fitxa{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:16px;
  align-items:start;
  margin:16px 0;
}
.prod-maquina{text-align:center;}

.prod-blocs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:16px 0;
}
.prod-bloc{padding:10px;box-sizing:border-box;}

/* Abans eren id="sombra" i id="libprod" repetits quatre cops cadascun,
   cosa que es HTML invalid. Ara son classes, amb les mateixes regles.
   Les versions #id es queden al full per si alguna altra pagina les usa. */
.sombra{background:#eee;}
.sombra:hover{background:#ddd;}
.libprod{width:100%;cursor:pointer;}

.prod-preu{margin:16px 0;}

/* --- Les dues quadricules de 4 imatges + 4 textos ------------------------
   A escriptori, imatges a dalt i textos a sota, com feia la taula.
   A mobil cada text baixa just sota la seva imatge, cosa que la taula no
   sabia fer. L ordre del HTML no canvia: nomes canvia on es col·loca cada
   peca, o sigui que les regions editables es queden on eren. */
.prod-quadricula{
  display:grid;
  gap:14px;
  margin:16px 0;
  grid-template-columns:repeat(4,1fr);
  grid-template-areas:
    "i1 i2 i3 i4"
    "t1 t2 t3 t4";
}
.prod-i1{grid-area:i1;}
.prod-i2{grid-area:i2;}
.prod-i3{grid-area:i3;}
.prod-i4{grid-area:i4;}
.prod-t1{grid-area:t1;}
.prod-t2{grid-area:t2;}
.prod-t3{grid-area:t3;}
.prod-t4{grid-area:t4;}

.prod-imatge{text-align:center;}

.prod-final{
  display:grid;
  grid-template-columns:390px 1fr;
  gap:16px;
  align-items:start;
  margin:16px 0;
}

.prod-ample{text-align:center;margin:16px 0;}
.prod-centrat{text-align:center;}

@media (max-width:900px){
  .prod-fitxa,
  .prod-final{grid-template-columns:1fr;}

  .prod-quadricula{
    grid-template-columns:repeat(2,1fr);
    grid-template-areas:
      "i1 i2"
      "t1 t2"
      "i3 i4"
      "t3 t4";
  }
}

@media (max-width:600px){
  .prod-cap,
  .prod-blocs{grid-template-columns:1fr;}

  .prod-quadricula{
    grid-template-columns:1fr;
    grid-template-areas:
      "i1" "t1"
      "i2" "t2"
      "i3" "t3"
      "i4" "t4";
  }
}


/* =========================================================
   VERSIO 38 - GRAELLA DE LA PAGINA DE RESULTATS DEL CERCADOR
   ---------------------------------------------------------
   resultats.php pinta les targetes dins de #resultats-productes,
   un contenidor que no tenia cap regla de graella. Per aixo la
   regla base .item-card{width:100% !important} feia que cada
   targeta ocupes tota l amplada i quedessin apilades.
   Repliquem el mateix comportament que .items-grid /
   .product-category-grid: 4 per fila i degradacio responsive.
   Additiu: no es modifica cap linia anterior.
   ========================================================= */

#resultats-productes,
#contingut #resultats-productes{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;
  gap:18px 14px !important;
  width:100% !important;
  margin:0 0 38px !important;
  padding:2px !important;
  box-sizing:border-box !important;
}

#resultats-productes > .item-card,
#contingut #resultats-productes > .item-card{
  float:none !important;
  clear:none !important;
  flex:0 0 calc((100% - 42px) / 4) !important;
  width:calc((100% - 42px) / 4) !important;
  min-width:0 !important;
  max-width:calc((100% - 42px) / 4) !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

@media (max-width:1050px){
  #resultats-productes > .item-card,
  #contingut #resultats-productes > .item-card{
    flex-basis:calc((100% - 28px) / 3) !important;
    width:calc((100% - 28px) / 3) !important;
    max-width:calc((100% - 28px) / 3) !important;
  }
}

@media (max-width:760px){
  #resultats-productes,
  #contingut #resultats-productes{
    gap:14px 10px !important;
  }

  #resultats-productes > .item-card,
  #contingut #resultats-productes > .item-card{
    flex-basis:calc((100% - 10px) / 2) !important;
    width:calc((100% - 10px) / 2) !important;
    max-width:calc((100% - 10px) / 2) !important;
  }
}

@media (max-width:480px){
  #resultats-productes,
  #contingut #resultats-productes{
    padding:0 !important;
  }

  #resultats-productes > .item-card,
  #contingut #resultats-productes > .item-card{
    flex-basis:100% !important;
    width:100% !important;
    max-width:100% !important;
  }
}


/* =========================================================
   ABSOLUTE TRACKERS - RECORREGUT ALTERNAT 2026-09
   Imatge dominant 7/12, text 5/12. Mateixa mida d'imatge.
   Alternanca real: 1 esquerra, 2 dreta, 3 esquerra, 4 dreta.
   ========================================================= */
#contingut .at-recorrido .at-journey .at-step .at-grid{
  direction:ltr !important;
  grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:stretch;
}
#contingut .at-recorrido .at-journey .at-step .at-grid > .at-media{
  grid-column:span 7 !important;
  height:430px;
  min-height:430px;
}
#contingut .at-recorrido .at-journey .at-step .at-grid > .at-panel-pad{
  grid-column:span 5 !important;
  height:430px;
  min-height:430px;
  overflow:auto;
}
#contingut .at-recorrido .at-journey .at-step .at-media img{
  display:block;
  width:100%;
  height:100% !important;
  object-fit:cover;
  object-position:center;
}
/* L'HTML ja esta alternat: imparell = imatge/text, parell = text/imatge. */
#contingut .at-recorrido .at-journey .at-step:nth-child(odd) .at-media{order:1;}
#contingut .at-recorrido .at-journey .at-step:nth-child(odd) .at-panel-pad{order:2;}
#contingut .at-recorrido .at-journey .at-step:nth-child(even) .at-panel-pad{order:1;}
#contingut .at-recorrido .at-journey .at-step:nth-child(even) .at-media{order:2;}

@media (max-width:900px){
  #contingut .at-recorrido .at-journey .at-step .at-grid > .at-media,
  #contingut .at-recorrido .at-journey .at-step .at-grid > .at-panel-pad{
    grid-column:span 12 !important;
    width:100%;
    height:auto;
    min-height:0;
    overflow:visible;
  }
  #contingut .at-recorrido .at-journey .at-step .at-grid > .at-media{
    min-height:300px;
    aspect-ratio:16/10;
  }
  #contingut .at-recorrido .at-journey .at-step .at-media img{
    height:100% !important;
  }
  /* En mobil, imatge abans del text per lectura mes visual. */
  #contingut .at-recorrido .at-journey .at-step .at-media{order:1 !important;}
  #contingut .at-recorrido .at-journey .at-step .at-panel-pad{order:2 !important;}
}

/* ============================================================================
   COMPONENTS EDITORIALS REUTILITZABLES - ABSOLUTE TRACKER / ABSOLUTE ARM
   Integrats des de les pagines de familia Hexagon.
   ============================================================================ */


/* ===== ABSOLUTE ARM ===== */
/* ===== Leica Absolute Arm - recorregut visual ===== */
.aa-recorrido{--aa-gap:24px;--aa-soft:#f5f7f8;--aa-line:#d9dddf;--aa-ink:#30363a;--aa-accent:var(--instop-red);max-width:100%;margin:0 auto;}
.aa-recorrido *{box-sizing:border-box;}
.aa-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--aa-gap);align-items:stretch;margin:30px 0;}
.aa-span-12{grid-column:span 12}.aa-span-8{grid-column:span 8}.aa-span-7{grid-column:span 7}.aa-span-6{grid-column:span 6}.aa-span-5{grid-column:span 5}.aa-span-4{grid-column:span 4}.aa-span-3{grid-column:span 3}
.aa-panel{background:#fff;border:1px solid var(--aa-line);overflow:hidden;}
.aa-panel-pad{padding:28px;}
.aa-panel-soft{background:var(--aa-soft);}
.aa-kicker{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6d7478;margin:0 0 8px;}
.aa-title{margin:0 0 14px;font-size:27px;line-height:1.17;color:#30363a;}
.aa-subtitle{margin:0 0 12px;font-size:21px;line-height:1.25;color:#30363a;}
.aa-panel p{margin:0 0 12px;line-height:1.58;}
.aa-media{height:430px;background:#eef0f1;overflow:hidden;}
.aa-media img{display:block;width:100%;height:100%;object-fit:cover;}
.aa-media.contain img{object-fit:contain;background:#fff;padding:14px;}
.aa-hero{margin-top:10px;}
.aa-hero .aa-panel-pad{padding:34px;}
.aa-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.aa-badge{display:inline-block;padding:7px 10px;background:#eceff0;font-size:12px;font-weight:700;color:#394047;}
.aa-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--aa-line);border:1px solid var(--aa-line);margin:30px 0;}
.aa-stat{background:#fff;padding:20px 12px;text-align:center;}
.aa-stat strong{display:block;font-size:24px;line-height:1.05;color:#30363a;}
.aa-stat span{display:block;font-size:12px;line-height:1.35;margin-top:8px;color:#666;}
.aa-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0 34px;}
.aa-card{padding:22px;border:1px solid var(--aa-line);background:#fff;min-height:170px;}
.aa-card strong{display:block;font-size:22px;margin-bottom:8px;color:#30363a;}
.aa-card p{margin:0;}
.aa-journey{margin:38px 0;}
.aa-step{margin:0 0 30px;}
.aa-step:nth-child(even) .aa-grid{direction:rtl}.aa-step:nth-child(even) .aa-grid>*{direction:ltr}
.aa-list{margin:12px 0 0;padding-left:18px;}.aa-list li{margin:6px 0;line-height:1.45;}
.aa-compare{width:100%;overflow-x:auto;margin:20px 0 34px;border:1px solid var(--aa-line);}
.aa-compare table{width:100%;min-width:820px;border-collapse:collapse;background:#fff;}
.aa-compare th,.aa-compare td{padding:12px 13px;border-bottom:1px solid #e6e8e9;text-align:left;vertical-align:top;}
.aa-compare th{background:#eef0f1;font-weight:700;}.aa-compare tr:last-child td{border-bottom:0;}
.aa-apps{display:grid;grid-template-columns:1.2fr .8fr .8fr;grid-auto-rows:210px;gap:14px;margin:26px 0;}
.aa-app{position:relative;overflow:hidden;background:#ddd;}
.aa-app:first-child{grid-row:span 2;}
.aa-app img{width:100%;height:100%;object-fit:cover;display:block;}
.aa-app span{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;color:#fff;font-weight:700;background:linear-gradient(transparent,rgba(0,0,0,.78));}
.aa-cta{padding:28px;background:#f2f2f2;border-left:5px solid var(--aa-accent);margin:34px 0 18px;}
.aa-cta h3{margin-top:0;}

.aa-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0 34px;}
.aa-gallery-item{position:relative;overflow:hidden;background:#ddd;height:235px;}
.aa-gallery-item img{display:block;width:100%;height:100%;object-fit:cover;}
.aa-gallery-item span{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;color:#fff;font-weight:700;background:linear-gradient(transparent,rgba(0,0,0,.78));}
@media(max-width:900px){.aa-gallery{grid-template-columns:repeat(2,1fr)}.aa-grid{gap:16px}.aa-span-8,.aa-span-7,.aa-span-6,.aa-span-5,.aa-span-4,.aa-span-3{grid-column:span 12}.aa-step:nth-child(even) .aa-grid{direction:ltr}.aa-media{height:360px}.aa-stats{grid-template-columns:repeat(2,1fr)}.aa-cards{grid-template-columns:1fr}.aa-apps{grid-template-columns:1fr 1fr;grid-auto-rows:190px}.aa-app:first-child{grid-column:span 2;grid-row:auto}}
@media(max-width:560px){.aa-gallery{grid-template-columns:1fr}.aa-gallery-item{height:220px}.aa-media{height:290px}.aa-stats{grid-template-columns:1fr}.aa-apps{grid-template-columns:1fr}.aa-app:first-child{grid-column:auto}.aa-hero .aa-panel-pad,.aa-panel-pad{padding:20px}.aa-title{font-size:23px}}


/* ===== ABSOLUTE TRACKER ===== */
/* ===== Absolute Tracker - recorregut visual ===== */
.at-recorrido{--at-gap:24px;--at-soft:#f4f6f7;--at-line:#d9dddf;--at-dark:#30363a;--at-accent:var(--instop-red);max-width:100%;margin:0 auto;}
.at-recorrido *{box-sizing:border-box;}
.at-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--at-gap);align-items:stretch;margin:28px 0;}
.at-span-12{grid-column:span 12}.at-span-8{grid-column:span 8}.at-span-7{grid-column:span 7}.at-span-6{grid-column:span 6}.at-span-5{grid-column:span 5}.at-span-4{grid-column:span 4}.at-span-3{grid-column:span 3}
.at-panel{background:#fff;border:1px solid var(--at-line);border-radius:10px;overflow:hidden;}
.at-panel-pad{padding:26px;}
.at-panel-soft{background:var(--at-soft);}
.at-kicker{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6c7478;margin:0 0 8px;}
.at-title{margin:0 0 14px;font-size:26px;line-height:1.15;color:#333;}
.at-subtitle{margin:0 0 12px;font-size:20px;line-height:1.2;color:#333;}
.at-panel p{margin:0 0 12px;line-height:1.55;}
.at-media{height:100%;min-height:260px;background:#eceff0;overflow:hidden;}
.at-media img{display:block;width:100%;height:100%;object-fit:cover;}
.at-media.contain img{object-fit:contain;background:#fff;padding:12px;}
.at-hero{background:linear-gradient(135deg,#f7f7f7,#fff);}
.at-hero .at-panel-pad{padding:34px;}
.at-models{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:22px 0 34px;}
.at-model{display:block;padding:16px;border:1px solid var(--at-line);border-top:4px solid #8a959b;border-radius:8px;text-decoration:none!important;color:#333!important;background:#fff;min-height:118px;}
.at-model strong{display:block;font-size:20px;margin-bottom:5px;}
.at-model span{display:block;font-size:13px;line-height:1.35;color:#555;}
.at-model:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08);}
.at-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.at-badge{display:inline-block;padding:7px 10px;border-radius:999px;background:#eceff0;font-size:12px;font-weight:700;color:#394047;}
.at-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--at-line);border:1px solid var(--at-line);border-radius:10px;overflow:hidden;margin:30px 0;}
.at-stat{background:#fff;padding:22px 16px;text-align:center;}
.at-stat strong{display:block;font-size:25px;color:#333;line-height:1;}
.at-stat span{display:block;font-size:12px;line-height:1.3;margin-top:8px;color:#666;}
.at-list{margin:12px 0 0;padding-left:18px;}.at-list li{margin:6px 0;line-height:1.4;}
.at-compare{width:100%;overflow-x:auto;margin:20px 0 34px;border-radius:8px;border:1px solid var(--at-line);}
.at-compare table{width:100%;min-width:780px;border-collapse:collapse;background:#fff;}
.at-compare th,.at-compare td{padding:11px 12px;border-bottom:1px solid #e6e8e9;text-align:left;vertical-align:top;}
.at-compare th{background:#eef0f1;font-weight:700;}.at-compare tr:last-child td{border-bottom:0;}
.at-journey{position:relative;margin:38px 0;}
.at-journey:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#e1e4e5;z-index:0;}
.at-step{position:relative;z-index:1;margin:0 0 30px;}
.at-step .at-panel{height:100%;}
.at-step:nth-child(even) .at-grid{direction:rtl}.at-step:nth-child(even) .at-grid>*{direction:ltr}
.at-apps{display:grid;grid-template-columns:1.25fr .75fr .75fr;grid-auto-rows:210px;gap:14px;margin:26px 0;}
.at-app{position:relative;overflow:hidden;border-radius:9px;background:#ddd;}
.at-app:first-child{grid-row:span 2;}
.at-app img{width:100%;height:100%;object-fit:cover;display:block;}
.at-app span{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;color:#fff;font-weight:700;background:linear-gradient(transparent,rgba(0,0,0,.72));}
.at-cta{padding:28px;border-radius:10px;background:#f2f2f2;border-left:5px solid var(--at-accent);margin:34px 0 18px;}
.at-cta h3{margin-top:0;}
@media(max-width:900px){.at-models{grid-template-columns:repeat(2,1fr)}.at-grid{gap:16px}.at-span-8,.at-span-7,.at-span-6,.at-span-5,.at-span-4,.at-span-3{grid-column:span 12}.at-stats{grid-template-columns:repeat(2,1fr)}.at-journey:before{display:none}.at-step:nth-child(even) .at-grid{direction:ltr}.at-apps{grid-template-columns:1fr 1fr;grid-auto-rows:190px}.at-app:first-child{grid-column:span 2;grid-row:auto}}
@media(max-width:560px){.at-models{grid-template-columns:1fr}.at-stats{grid-template-columns:1fr}.at-apps{grid-template-columns:1fr}.at-app:first-child{grid-column:auto}.at-hero .at-panel-pad,.at-panel-pad{padding:20px}.at-title{font-size:23px}}


/* =========================================================
   FIX 2026-09-09 · A · #especifics / #tpreus i el bloc seguent
   ---------------------------------------------------------
   #especifics (linia 1049) i #tpreus (linia 1056) son float:left
   amb width:100%. El bloc d'entrega que ve tot seguit a la
   plantilla de producte es un <div style="display:flex">, que
   crea un context de format de bloc i, per norma de CSS, no es
   pot solapar amb un flotant: si no hi ha text entremig
   s'encabeix a la franja de pocs pixels que queda lliure a la
   dreta del flotant i surt a una lletra per linia.
   Posar un punt a la descripcio ho amagava perque generava una
   linia de text que no hi cabia i empenyia el contingut avall.

   Tots dos ja porten overflow:hidden (linia 1166), que per si
   sol conte els fills flotats, o sigui que el float del pare es
   prescindible i treure'l no desmunta la caixa.
   ========================================================= */
#contingut #especifics,
#contingut #tpreus{float:none;}


/* =========================================================
   FIX 2026-09-09 · B · Boto COMPRAR / CHECK OUT del shop
   ---------------------------------------------------------
   El <button> no tenia cap font-size propi i agafava el del
   navegador (uns 13px). .linia1 i .linia2 tampoc en tenen en
   aquest context (les regles de 1238-1239 son nomes per a
   .boto-comprar-carro), o sigui que hereten d'aqui.
   ========================================================= */
#formulari-shop .boto-comprar{font-size:21px;line-height:1.25;}
#formulari-shop .boto-comprar .linia1{font-weight:700;}
#formulari-shop .boto-comprar .linia2{font-weight:600;}


/* =========================================================
   FIX 2026-09-09 · C · SHOP · aspecte del formulari de compra
   Nomes visual. Cap canvi d'HTML.
   ========================================================= */

/* C1 · Opcio de pagament seleccionada.
   Es la regla :has() que hi havia comentada a la linia 3557. Un
   navegador que no la entengui ignora nomes aquest bloc. */
#formulari-shop label[id^="LAB"]:has(input.pago:checked){
  border-color:var(--instop-red);
  background:#fff5f5;
  box-shadow:inset 0 0 0 1px var(--instop-red);
}

/* C2 · Fora la fletxa "◄" de davant dels textos d'acceptacio.
   Venia de #text-cb::before (linia 726) i, com que l'id esta
   repetit al marcatge, sortia dues vegades. */
#text-cb::before{content:none;}

/* C3 · Casella i text d'acceptacio alineats.
   Les caselles porten height/width/top/left en linia al PHP i
   guanyen al full, o sigui que la compensacio va a la cel-la. */
#formulari-shop td[width="45"]{vertical-align:middle;}
#formulari-shop #text-cb{padding-top:0;vertical-align:middle;line-height:1.4;}
#formulari-shop #CONDICIONS,
#formulari-shop #PRIV{accent-color:var(--instop-red);cursor:pointer;}

/* C4 · Textarea de notes amb el mateix aspecte que la resta de
   camps. Les regles de 3588 i 3753 nomes cobreixen input i
   select, i el textarea es quedava amb el padding de 4px i la
   Verdana de 13px de la linia 900. */
#taula_formulari textarea{
  width:min(520px,100%);
  padding:9px 10px;
  border:1px solid var(--instop-form-border);
  border-radius:2px;
  background:#fff;
  color:#222;
  font-family:var(--font-a,Arial,Helvetica,sans-serif);
  font-size:14px;
  line-height:1.35;
  box-sizing:border-box;
  resize:vertical;
}
#taula_formulari textarea:focus{
  outline:2px solid rgba(198,0,30,.14);
  border-color:var(--instop-form-focus);
}


/* =========================================================
   FIX 2026-09-09 · D · SHOP · menys aire vertical
   ---------------------------------------------------------
   L'espai mort venia per dues vies diferents segons la taula:
   #taula_facturacio per padding als <tr> (son flex, linia 3319)
   i #taula_entrega per padding a les <td> (linia 3584).
   Estalvi aproximat: uns 200px a la columna mes llarga.
   ========================================================= */

/* D1 · Files de FACTURACION: 20px -> 6px per fila. */
#taula_formulari #taula_facturacio tr{padding:3px 0;}

/* D2 · Files d'ENTREGA: 18px -> 6px per fila. Nomes el vertical;
   els 10px horitzontals separen etiqueta i camp.
   La primera fila (MARCAR SI LOS DATOS...) no es veu afectada
   perque la seva regla de la linia 3607 porta !important. */
#taula_formulari #taula_entrega td{padding-top:3px;padding-bottom:3px;}

/* D3 · Camps de ~41px a ~37px d'alcada. */
#taula_formulari #taula_facturacio input[type="text"],
#taula_formulari #taula_entrega input[type="text"],
#taula_formulari #taula_facturacio select,
#taula_formulari #taula_entrega select,
#taula_formulari input[type="password"]{padding-top:7px;padding-bottom:7px;}

/* D4 · Capcaleres de seccio. El min-height iguala les dues
   columnes, o sigui que el mantenim, nomes el rebaixem. */
#taula_formulari h2.titol-seccio-formulari{min-height:48px;margin:0 0 10px;}

/* D5 · Marges dels blocs. */
#formulari-shop{margin-top:14px;}
#taula_formulari div[align="center"] > table{margin-top:16px;}

/* ==========================================================================
   CHECKOUT INSTOP 2026 - V43
   Inspirat en el formulari de compra de Microgamma.
   Compartit per shop.php i presupuesto.php. Tot queda limitat a
   #formulari-shop .checkout-page per no afectar altres formularis.
   ========================================================================== */

#formulari-shop{
  --checkout-red:var(--instop-primary,#b93425);
  --checkout-red-dark:var(--instop-red-hover);
  --checkout-green:#7ea746;
  --checkout-green-dark:#688d36;
  --checkout-blue:#eaf4fc;
  --checkout-blue-line:#c8dbe9;
  --checkout-ink:#30353a;
  --checkout-muted:#6e747a;
  --checkout-line:#cfd4d8;
  --checkout-soft:#f6f7f8;
  width:min(1260px,calc(100vw - 32px));
  max-width:none;
  margin:30px 0 72px 50%;
  padding:0;
  transform:translateX(-50%);
  box-sizing:border-box;
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
}

#formulari-shop .form-shop{margin:0;}

#formulari-shop #carroContenidor.checkout-page{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:34px;
  align-items:start;
  width:100%;
  padding:0;
  box-sizing:border-box;
}

#formulari-shop .checkout-main,
#formulari-shop .checkout-sidebar,
#formulari-shop .checkout-section{min-width:0;}

#formulari-shop .checkout-addresses{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px;
  width:100%;
  margin:0;
  padding:0;
}

#formulari-shop .checkout-addresses--single{
  grid-template-columns:minmax(0,680px);
}

#formulari-shop .checkout-section{
  margin:0;
  padding:0;
  background:#fff;
}

#formulari-shop .checkout-section--payment{
  max-width:720px;
  margin-top:34px;
}

/* Capcaleres numerades */
#formulari-shop .checkout-section .titol-seccio-formulari{
  position:relative;
  min-height:42px !important;
  margin:0 0 17px !important;
  padding:1px 0 0 50px !important;
  color:var(--checkout-red) !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-size:19px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  letter-spacing:-.015em !important;
  text-align:left !important;
}

#formulari-shop .checkout-section .titol-seccio-formulari .num-seccio{
  position:absolute;
  left:0;
  top:0;
  width:38px;
  height:38px;
  border-radius:2px;
  background:var(--checkout-red);
  color:#fff;
  font-size:28px;
  line-height:38px;
  font-weight:700;
  text-align:center;
}

#formulari-shop .checkout-section .titol-seccio-formulari .subtitol{
  display:block;
  margin-top:4px;
  color:var(--checkout-muted);
  font-size:12px;
  line-height:1.25;
  font-weight:400;
  letter-spacing:0;
}

#formulari-shop .checkout-section .titol-seccio-formulari--plain{
  min-height:42px !important;
  padding-left:0 !important;
}

#formulari-shop .checkout-section .titol-seccio-formulari--plain::before{
  content:none !important;
  display:none !important;
}

/* Camps */
#formulari-shop .checkout-fields,
#formulari-shop #taula_facturacio.checkout-fields,
#formulari-shop #taula_entrega.checkout-fields{
  display:grid !important;
  grid-template-columns:1fr;
  gap:10px;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}

#formulari-shop .checkout-field-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

#formulari-shop .checkout-field{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  min-width:0;
  margin:0;
}

#formulari-shop .checkout-field--short .checkout-control{
  max-width:190px;
}

#formulari-shop .checkout-label{
  display:block;
  margin:0;
  padding:0;
  color:#51575d;
  font-size:11px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:.01em;
  text-align:left;
}

#formulari-shop .checkout-control{
  min-width:0;
}

#formulari-shop .checkout-control[id^="error"]{
  margin:-2px;
  padding:2px;
  border-radius:3px;
  transition:background-color .15s ease;
}

#formulari-shop .checkout-page input[type="text"],
#formulari-shop .checkout-page input[type="email"],
#formulari-shop .checkout-page input[type="tel"],
#formulari-shop .checkout-page input[type="password"],
#formulari-shop .checkout-page select,
#formulari-shop .checkout-page textarea,
#formulari-shop .checkout-page .camp-formulari,
#formulari-shop .checkout-page #divPais select,
#formulari-shop .checkout-page #divProvincia select,
#formulari-shop .checkout-page #divPaisEntrega select,
#formulari-shop .checkout-page #divProvinciaEntrega select{
  display:block;
  width:100% !important;
  max-width:100% !important;
  min-height:42px;
  margin:0 !important;
  padding:9px 11px !important;
  border:1px solid #bcc3c8 !important;
  border-radius:2px !important;
  background:#fff !important;
  color:#30353a !important;
  box-shadow:none !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-size:14px !important;
  line-height:1.35 !important;
  font-weight:400 !important;
  box-sizing:border-box !important;
}

#formulari-shop .checkout-page textarea{
  min-height:108px;
  resize:vertical;
}

#formulari-shop .checkout-page input::placeholder,
#formulari-shop .checkout-page textarea::placeholder{
  color:#8a9197;
  opacity:1;
}

#formulari-shop .checkout-page input:focus,
#formulari-shop .checkout-page select:focus,
#formulari-shop .checkout-page textarea:focus{
  border-color:var(--checkout-red) !important;
  outline:0 !important;
  box-shadow:0 0 0 2px rgba(180,58,40,.12) !important;
}

#formulari-shop .checkout-page #divPais,
#formulari-shop .checkout-page #divProvincia,
#formulari-shop .checkout-page #divPaisEntrega,
#formulari-shop .checkout-page #divProvinciaEntrega{
  display:block !important;
  width:100% !important;
  max-width:none !important;
}

/* Copiar dades d'entrega */
#formulari-shop .checkout-copy{
  display:flex;
  align-items:flex-start;
  gap:9px;
  width:100%;
  margin:0 0 12px;
  padding:11px 12px;
  border:1px solid #e0e3e5;
  border-radius:2px;
  background:#f8f8f8;
  color:#40464b;
  cursor:pointer;
  box-sizing:border-box;
}

#formulari-shop .checkout-copy input{
  flex:0 0 18px;
  width:18px !important;
  height:18px !important;
  min-height:18px !important;
  margin:1px 0 0 !important;
  padding:0 !important;
  accent-color:var(--checkout-red);
}

#formulari-shop .checkout-copy span{
  min-width:0;
  font-size:13px;
  line-height:1.35;
}

#formulari-shop .checkout-copy small{
  display:block;
  margin-top:2px;
  color:var(--checkout-muted);
  font-size:11px;
  font-weight:400;
}

/* Acces client */
#formulari-shop .checkout-account{
  margin-top:18px;
  padding:15px;
  border:1px solid #d9dde0;
  border-radius:2px;
  background:var(--checkout-soft);
}

#formulari-shop .checkout-account h3{
  margin:0 0 10px;
  color:var(--checkout-ink);
  font-size:14px;
  line-height:1.3;
  font-weight:700;
  text-transform:uppercase;
}

#formulari-shop .checkout-account-grid{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:8px;
  align-items:end;
}

#formulari-shop .checkout-account .checkout-field{gap:3px;}
#formulari-shop .checkout-account .checkout-label{font-size:10px;}

#formulari-shop .checkout-account input[type="button"]{
  min-width:52px;
  min-height:42px;
  margin:0;
  padding:9px 14px;
  border:1px solid var(--checkout-red);
  border-radius:2px;
  background:#fff;
  color:var(--checkout-red);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

#formulari-shop .checkout-account input[type="button"]:hover{
  background:var(--checkout-red);
  color:#fff;
}

#formulari-shop .checkout-account-links{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
}

#formulari-shop .checkout-account-links a{
  color:#60676d;
  font-size:11px;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Opcions de pagament */
#formulari-shop .checkout-payment-options{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  width:100%;
}

#formulari-shop .checkout-option,
#formulari-shop label.checkout-option,
#formulari-shop label[id^="LAB"].checkout-option{
  display:flex !important;
  align-items:center !important;
  gap:13px !important;
  width:100% !important;
  max-width:none !important;
  min-height:52px !important;
  margin:0 !important;
  padding:12px 14px !important;
  border:1px solid #d7dade !important;
  border-radius:3px !important;
  background:#fff !important;
  color:#3c4247 !important;
  box-shadow:none !important;
  cursor:pointer !important;
  box-sizing:border-box !important;
  transition:border-color .15s ease,background-color .15s ease;
}

#formulari-shop .checkout-option:hover,
#formulari-shop label[id^="LAB"].checkout-option:hover{
  border-color:var(--checkout-red) !important;
  background:#fff8f6 !important;
}

#formulari-shop .checkout-option.is-selected,
#formulari-shop label[id^="LAB"].checkout-option.is-selected,
#formulari-shop .checkout-option:has(input.pago:checked),
#formulari-shop label[id^="LAB"].checkout-option:has(input.pago:checked){
  border-color:var(--checkout-red) !important;
  background:#fbefec !important;
  box-shadow:inset 0 0 0 1px var(--checkout-red) !important;
}

#formulari-shop .checkout-option input.pago{
  position:static !important;
  clip:auto !important;
  clip-path:none !important;
  flex:0 0 22px !important;
  width:22px !important;
  height:22px !important;
  min-height:22px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  opacity:1 !important;
  appearance:auto !important;
  accent-color:var(--checkout-red);
}

#formulari-shop .checkout-option input.pago + span::before{
  content:none !important;
  display:none !important;
}

#formulari-shop .checkout-option span{
  flex:1 1 auto;
  min-width:0;
  font-size:14px;
  line-height:1.35;
  font-weight:500;
}

/* Columna resum */
#formulari-shop .checkout-sidebar{
  position:sticky;
  top:48px;
}

#formulari-shop .checkout-summary{
  padding:18px;
  border:1px solid var(--checkout-blue-line);
  border-radius:3px;
  background:var(--checkout-blue);
  box-shadow:none;
}

#formulari-shop .checkout-summary-head{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin:0 0 13px;
  padding:0 0 12px;
  border-bottom:1px solid rgba(61,91,112,.22);
}

#formulari-shop .checkout-summary-step{
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:2px;
  background:var(--checkout-red);
  color:#fff;
  font-size:24px;
  line-height:34px;
  font-weight:700;
  text-align:center;
}

#formulari-shop .checkout-summary-title{
  margin:1px 0 0;
  color:var(--checkout-red);
  font-size:17px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.01em;
  text-transform:uppercase;
}

#formulari-shop .checkout-summary-title small{
  display:block;
  margin-top:3px;
  color:var(--checkout-muted);
  font-size:11px;
  line-height:1.25;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
}

#formulari-shop .checkout-summary-target,
#formulari-shop #divCarroPetit.checkout-summary-target,
#formulari-shop #divCarroPetit33.checkout-summary-target{
  position:static !important;
  float:none !important;
  width:100% !important;
  max-width:none !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

#formulari-shop .checkout-summary .carro-wrap,
#formulari-shop #divCarroPetit .carro-wrap,
#formulari-shop #divCarroPetit33 .carro-wrap{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  text-align:left !important;
}

#formulari-shop .checkout-summary .carro-box{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#formulari-shop .checkout-summary .carro-items{
  display:flex;
  flex-direction:column;
  gap:0;
}

#formulari-shop .checkout-summary .carro-item{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:11px;
  align-items:start;
  margin:0;
  padding:12px 0;
  border:0;
  border-bottom:1px solid rgba(61,91,112,.26);
}

#formulari-shop .checkout-summary .carro-item:first-child{padding-top:2px;}
#formulari-shop .checkout-summary .carro-item:last-child{border-bottom:0;}

#formulari-shop .checkout-summary .carro-img{
  width:58px;
  height:58px;
  overflow:hidden;
  border:1px solid rgba(61,91,112,.18);
  background:#fff;
}

#formulari-shop .checkout-summary .carro-img img{
  display:block;
  width:100% !important;
  height:100% !important;
  margin:0;
  padding:3px;
  border:0;
  border-radius:0;
  background:#fff;
  box-shadow:none;
  object-fit:contain;
  box-sizing:border-box;
}

#formulari-shop .checkout-summary .carro-main{min-width:0;}

#formulari-shop .checkout-summary .carro-title{
  margin:0 0 8px;
  color:#596168;
  font-size:12px;
  line-height:1.35;
  font-weight:500;
  overflow-wrap:anywhere;
}

#formulari-shop .checkout-summary .carro-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

#formulari-shop .checkout-summary .carro-qtt,
#formulari-shop .checkout-summary input[id^="QTT"]{
  flex:0 0 38px;
  width:38px !important;
  min-height:30px !important;
  height:30px !important;
  padding:4px 5px !important;
  border:1px solid #bec8cf !important;
  border-radius:2px !important;
  text-align:center !important;
  font-size:12px !important;
}

#formulari-shop .checkout-summary .botons-carro-inline{
  display:inline-flex;
  gap:3px;
}

#formulari-shop .checkout-summary .botonet-carro,
#formulari-shop .checkout-summary .boto-treure-carro{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  min-height:28px;
  margin:0;
  padding:0;
  border:1px solid #b9c5cd;
  border-radius:2px;
  background:#fff;
  color:#34506a;
  box-shadow:none;
  font-size:15px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
}

#formulari-shop .checkout-summary .botonet-carro:hover{
  border-color:#7193ad;
  background:#f6fbff;
  color:#1f405d;
}

#formulari-shop .checkout-summary .boto-treure-carro{
  border-color:#d3b5ad;
  color:var(--checkout-red);
}

#formulari-shop .checkout-summary .boto-treure-carro:hover{
  border-color:var(--checkout-red);
  background:var(--checkout-red);
  color:#fff;
}

#formulari-shop .checkout-summary .carro-total-linia{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  margin-top:7px;
  color:#4d555b;
  font-size:12px;
}

#formulari-shop .checkout-summary .carro-total-linia input{
  width:78px !important;
  min-height:30px !important;
  height:30px !important;
  padding:4px 7px !important;
  text-align:right !important;
  font-size:12px !important;
}

#formulari-shop .checkout-summary .carro-totals{
  margin:13px 0 0 !important;
  padding:11px 0 0;
  border-top:1px solid rgba(61,91,112,.35);
}

#formulari-shop .checkout-total-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:34px;
  padding:4px 0;
  color:#4d555b;
  font-size:13px;
}

#formulari-shop .checkout-total-row strong{color:#20262b;}

#formulari-shop .checkout-total-value{
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}

#formulari-shop .checkout-total-value input{
  width:82px !important;
  min-height:30px !important;
  height:30px !important;
  padding:4px 7px !important;
  border:1px solid #bec8cf !important;
  border-radius:2px !important;
  background:#fff !important;
  text-align:right !important;
  font-size:12px !important;
}

#formulari-shop .checkout-total-row--grand{
  margin-top:4px;
  padding-top:9px;
  border-top:1px solid rgba(61,91,112,.26);
  font-size:14px;
  font-weight:700;
}

#formulari-shop .checkout-total-row--grand input{
  font-size:14px !important;
  font-weight:700 !important;
}

#formulari-shop .checkout-summary .carro-add{
  margin:12px 0 0;
  padding:11px 0 0;
  border-top:1px solid rgba(61,91,112,.26);
}

#formulari-shop .checkout-summary .carro-add-title{
  color:var(--checkout-red);
  font-size:13px;
  line-height:1.3;
  font-weight:700;
  text-transform:none;
}

#formulari-shop .checkout-summary .carro-add-inputs{
  display:block;
  margin-top:7px;
}

#formulari-shop .checkout-summary .carro-add-inputs .resaltat{
  width:100% !important;
  min-height:38px !important;
  padding:7px 9px !important;
  border-color:#bec8cf !important;
  font-size:13px !important;
}

/* Accio principal */
#formulari-shop .checkout-submit{
  margin-top:12px;
  padding:0;
  border-radius:3px;
  transition:background-color .15s ease;
}

#formulari-shop .checkout-submit .boto-comprar,
#formulari-shop .checkout-submit .boto-pressupost,
#formulari-shop .checkout-sidebar > .boto-comprar,
#formulari-shop .checkout-sidebar > .boto-pressupost{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:100% !important;
  max-width:none !important;
  min-height:92px;
  margin:0 !important;
  padding:15px 18px !important;
  border:0 !important;
  border-radius:4px !important;
  background:var(--checkout-green) !important;
  color:#fff !important;
  box-shadow:none !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-size:27px !important;
  line-height:1.05 !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  text-align:center;
  cursor:pointer;
}

#formulari-shop .checkout-submit .boto-comprar:hover,
#formulari-shop .checkout-submit .boto-pressupost:hover{
  background:var(--checkout-green-dark) !important;
}

#formulari-shop .checkout-submit .linia1,
#formulari-shop .checkout-submit .boto-pressupost-main{
  display:block;
  color:#fff;
  font-size:27px;
  line-height:1.05;
  font-weight:700;
}

#formulari-shop .checkout-submit .linia2,
#formulari-shop .checkout-submit .boto-pressupost-sub{
  display:block;
  color:#fff;
  font-size:16px;
  line-height:1.15;
  font-weight:600;
}

#formulari-shop .checkout-submit .boto-pressupost-mini,
#formulari-shop .checkout-submit .checkout-button-mini{
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.9);
  font-size:11px;
  line-height:1.2;
  font-weight:400;
}

/* Consentiments i notes */
#formulari-shop .checkout-consents{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin:13px 0 0;
}

#formulari-shop .checkout-consent{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:8px;
  align-items:start;
  margin:0;
  padding:9px 10px;
  border:1px solid #e0e3e5;
  border-radius:2px;
  background:#fff;
  color:#4b5258;
  cursor:pointer;
}

#formulari-shop .checkout-consent input{
  width:18px !important;
  height:18px !important;
  min-height:18px !important;
  margin:1px 0 0 !important;
  padding:0 !important;
  accent-color:var(--checkout-red);
}

#formulari-shop .checkout-consent span{
  min-width:0;
  font-size:11px;
  line-height:1.4;
}

#formulari-shop .checkout-consent a{
  color:var(--checkout-red);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
}

#formulari-shop .checkout-notes{
  margin-top:13px;
}

#formulari-shop .checkout-notes .checkout-label{
  margin-bottom:5px;
  font-size:12px;
  text-transform:uppercase;
}

#formulari-shop .checkout-notes textarea{
  width:100% !important;
  min-height:100px;
}

/* Pressupost: una columna principal mes ampla */
#formulari-shop .checkout-page--budget{
  grid-template-columns:minmax(0,720px) 360px;
  justify-content:space-between;
}

#formulari-shop .checkout-page--budget .checkout-main{
  max-width:720px;
}

#formulari-shop .checkout-page--budget .checkout-section{
  padding:0;
}

#formulari-shop .checkout-page--budget .checkout-field-grid{
  margin-top:0;
}



/* Validacio integrada: evita alertes visuals agressives i porta el focus al camp. */
#formulari-shop .checkout-form-alert{
  grid-column:1 / -1;
  width:100%;
  margin:0 0 2px;
  padding:12px 14px;
  border:1px solid #c64a36;
  border-left:5px solid var(--checkout-red);
  border-radius:2px;
  background:#fff4f1;
  color:#7e2418;
  font-size:13px;
  line-height:1.45;
  font-weight:600;
  box-sizing:border-box;
}

#formulari-shop .checkout-form-alert[hidden]{display:none !important;}

#formulari-shop .checkout-control.is-invalid input,
#formulari-shop .checkout-control.is-invalid select,
#formulari-shop .checkout-control.is-invalid textarea,
#formulari-shop input[aria-invalid="true"],
#formulari-shop select[aria-invalid="true"],
#formulari-shop textarea[aria-invalid="true"]{
  border-color:#c43b27 !important;
  background:#fff8f6 !important;
  box-shadow:0 0 0 2px rgba(180,58,40,.13) !important;
}

#formulari-shop .checkout-consent.is-invalid{
  border-color:#c43b27;
  background:#fff4f1;
}

#formulari-shop .checkout-page input,
#formulari-shop .checkout-page select,
#formulari-shop .checkout-page textarea,
#formulari-shop .checkout-consent{
  scroll-margin-top:82px;
}

#formulari-shop .checkout-empty{
  width:min(720px,100%);
  margin:42px auto 70px;
  padding:28px;
  border:1px solid var(--checkout-line);
  background:var(--checkout-soft);
  text-align:center;
}

@media (prefers-reduced-motion:reduce){
  #formulari-shop *,
  #formulari-shop *::before,
  #formulari-shop *::after{
    scroll-behavior:auto !important;
    transition:none !important;
  }
}

/* Responsive */
@media (max-width:1080px){
  #formulari-shop #carroContenidor.checkout-page{
    grid-template-columns:minmax(0,1fr) 310px;
    gap:24px;
  }

  #formulari-shop .checkout-addresses{gap:22px;}
}

@media (max-width:900px){
  #formulari-shop{
    width:calc(100vw - 24px);
    margin-top:22px;
    margin-bottom:50px;
  }

  #formulari-shop #carroContenidor.checkout-page,
  #formulari-shop .checkout-page--budget{
    grid-template-columns:1fr;
    gap:30px;
  }

  #formulari-shop .checkout-sidebar{
    position:static;
    top:auto;
    width:100%;
    max-width:620px;
    margin:0 auto;
  }

  #formulari-shop .checkout-page--budget .checkout-main{
    max-width:none;
  }
}

@media (max-width:720px){
  #formulari-shop .checkout-addresses,
  #formulari-shop .checkout-addresses--single{
    grid-template-columns:1fr;
    gap:28px;
  }

  #formulari-shop .checkout-section--payment{
    max-width:none;
  }

  #formulari-shop .checkout-field-grid,
  #formulari-shop .checkout-account-grid{
    grid-template-columns:1fr;
  }

  #formulari-shop .checkout-account input[type="button"]{
    width:100%;
  }

  #formulari-shop .checkout-account-links{
    justify-content:flex-start;
  }
}

@media (max-width:480px){
  #formulari-shop{
    width:calc(100vw - 20px);
    margin-top:18px;
  }

  #formulari-shop .checkout-section .titol-seccio-formulari{
    font-size:17px !important;
  }

  #formulari-shop .checkout-summary{
    padding:14px;
  }

  #formulari-shop .checkout-summary .carro-item{
    grid-template-columns:52px minmax(0,1fr);
    gap:9px;
  }

  #formulari-shop .checkout-summary .carro-img{
    width:52px;
    height:52px;
  }

  #formulari-shop .checkout-submit .boto-comprar,
  #formulari-shop .checkout-submit .boto-pressupost{
    min-height:84px;
  }

  #formulari-shop .checkout-submit .linia1,
  #formulari-shop .checkout-submit .boto-pressupost-main{
    font-size:24px;
  }
}

/* ============================================================================
   VERSIO 39 - FITXA DE PRODUCTE RESPONSIVE 2026
   Plantilles: 2026-producte-dinamic-08-SEO.dwt i 2026-producte-dji-02.dwt
   ---------------------------------------------------------------------------
   Objectius:
   1. Una sola graella coherent per titol, galeria, preu/compra i introduccio.
   2. En mobil: titol -> imatge -> compra -> descripcio, sense espais morts.
   3. Galeria quadrada adaptada a les imatges de producte de 1000 x 1000 px.
   4. Blocs auxiliars compactes: imatge 125 px i text al costat, també en mobil.
   5. Compatibilitat visual amb pagines antigues que encara conserven
      .linia-producte / .producte-dreta fins que Dreamweaver les actualitzi.
   ============================================================================ */

/* La fitxa usa un contenidor fluid fins al maxim historic de 1046 px.
   Evita el desbordament entre 769 i 1046 px que provocava #contingut{width:1046px}. */
body.fitxa-producte-page #contingut{
  width:min(1046px,100%) !important;
  max-width:100% !important;
  margin-right:auto !important;
  margin-left:auto !important;
}

/* El banner continua ocupant tota l'amplada, separat de la graella comercial. */
#contingut .fitxa-producte-banner{
  display:block !important;
  width:100% !important;
  max-width:1050px !important;
  margin:0 auto !important;
  padding:0 15px !important;
  overflow:visible !important;
}

#contingut .fitxa-producte-banner .banner-zone{
  width:100%;
  min-width:0;
}

/* Graella principal de la fitxa. */
#contingut .fitxa-producte{
  display:grid !important;
  grid-template-columns:minmax(0,42fr) minmax(0,58fr);
  grid-template-areas:
    "product-title product-buy"
    "product-media product-intro";
  column-gap:clamp(34px,4.5vw,58px);
  row-gap:26px;
  align-items:start;
  width:100% !important;
  max-width:1050px !important;
  margin:0 auto !important;
  padding:30px 15px 46px !important;
  overflow:visible !important;
  background:#fff;
  box-sizing:border-box;
}

#contingut .fitxa-producte > *{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

#contingut .fitxa-producte-titol{
  grid-area:product-title;
  align-self:center;
  margin:0;
  padding:0;
}

/* Algunes fitxes antigues tenen un espai en blanc dins de la regio editable. */
#contingut .fitxa-producte-titol .espai-blanc,
#contingut .fitxa-producte-titol > br:first-child,
#contingut .fitxa-producte-preu > br:first-child,
#contingut .fitxa-producte-carro > br:first-child{
  display:none !important;
}

#contingut .fitxa-producte-titol h1,
#contingut .fitxa-producte-titol .titol_Producte_28_ROIG,
#contingut .fitxa-producte-titol #titol-producte-34,
#contingut .fitxa-producte-titol .titol_Producte28{
  max-width:18ch;
  margin:0 !important;
  padding:0 !important;
  color:var(--instop-red,#b93425) !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-size:clamp(32px,3.6vw,42px) !important;
  line-height:1.12 !important;
  font-weight:650 !important;
  letter-spacing:-.035em !important;
  text-align:left !important;
  overflow-wrap:normal;
  word-break:normal;
}

/* Panell de preu i accio. */
#contingut .fitxa-producte-compra{
  grid-area:product-buy;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(140px,auto);
  align-items:center;
  gap:18px;
  min-height:94px;
  margin:0;
  padding:17px 18px;
  border:1px solid #d9dddf;
  border-top:3px solid var(--instop-red,#b93425);
  background:#f7f8f8;
}

#contingut .fitxa-producte-compra[hidden]{
  display:none !important;
}

#contingut .fitxa-producte-compra--sense-preu,
#contingut .fitxa-producte-compra--sense-carro{
  grid-template-columns:minmax(0,1fr);
}

#contingut .fitxa-producte-compra--sense-preu .fitxa-producte-carro{
  justify-self:end;
  width:auto;
}

#contingut .fitxa-producte-compra--sense-carro .fitxa-producte-preu{
  text-align:right !important;
}

#contingut .fitxa-producte-preu{
  min-width:0;
  max-width:none !important;
  margin:0;
  padding:0;
  color:var(--instop-red);
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  text-align:right !important;
  white-space:normal !important;
}

#contingut .fitxa-producte-preu [align="right"]{
  text-align:inherit !important;
}

#contingut .fitxa-producte-preu .titol_Producte_28_ROIG,
#contingut .fitxa-producte-preu .titol_Producte28,
#contingut .fitxa-producte-preu #titol-producte-34{
  margin:0 !important;
  padding:0 !important;
  color:var(--instop-red) !important;
  font-size:clamp(29px,3.2vw,38px) !important;
  line-height:1.08 !important;
  font-weight:500 !important;
  letter-spacing:-.035em !important;
  text-align:inherit !important;
  white-space:normal !important;
}

#contingut .fitxa-producte-preu .detall{
  display:block;
  margin-top:7px;
  color:#697078 !important;
  font-size:12px !important;
  line-height:1.35 !important;
  text-align:inherit !important;
  white-space:normal !important;
}

#contingut .fitxa-producte-carro{
  min-width:0;
  margin:0;
  padding:0;
  text-align:right;
}

#contingut .fitxa-producte-carro > a,
#contingut .fitxa-producte-carro > button,
#contingut .fitxa-producte-carro .boto-carro,
#contingut .fitxa-producte-carro .boto-comprar,
#contingut .fitxa-producte-carro .boton-consulta{
  max-width:100%;
  margin:0 !important;
}

#contingut .fitxa-producte-carro .boto-carro{
  min-width:150px;
  min-height:48px;
  height:auto;
  padding:10px 18px;
  gap:8px;
  font-size:15px;
  line-height:1.2;
  text-transform:uppercase;
}

/* Galeria principal. */
#contingut .fitxa-producte-media{
  grid-area:product-media;
  align-self:start;
  width:100%;
  margin:0;
  padding:0;
  text-align:center;
}

#contingut .fitxa-producte-media > p{
  margin:0;
}

#contingut .fitxa-producte-media .mg-product-gallery,
#contingut .fitxa-producte-media #wrap{
  width:100%;
  max-width:520px;
  margin:0 auto;
}

#contingut .fitxa-producte-media .mg-gallery-main,
#contingut .fitxa-producte-media .mg-gallery-main-link{
  width:100%;
  min-height:0 !important;
  aspect-ratio:1 / 1;
}

#contingut .fitxa-producte-media .mg-gallery-main{
  border:1px solid #e1e4e6;
  background:#fff;
}

#contingut .fitxa-producte-media .mg-gallery-main-link{
  padding:clamp(8px,2vw,20px);
}

#contingut .fitxa-producte-media .mg-gallery-main-img{
  display:block;
  width:100%;
  max-width:100%;
  height:100%;
  max-height:none !important;
  margin:0 auto;
  object-fit:contain;
}

#contingut .fitxa-producte-media .mg-gallery-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid #cfd3d5;
  background:rgba(255,255,255,.94);
  color:#363b3f;
  font-size:22px;
  line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.10);
}

#contingut .fitxa-producte-media .mg-gallery-prev{left:10px;}
#contingut .fitxa-producte-media .mg-gallery-next{right:10px;}

#contingut .fitxa-producte-media .mg-gallery-thumbs{
  max-width:100%;
  margin:12px auto 0;
  gap:8px;
}

#contingut .fitxa-producte-media .mg-gallery-thumb{
  flex:0 0 70px;
  width:70px;
  height:70px;
  margin:0;
  border-radius:3px;
}

/* Imatges directes de fitxes antigues que encara no usen la galeria. */
#contingut .fitxa-producte-media > img,
#contingut .fitxa-producte-media > a > img,
#contingut .fitxa-producte-media > p > img,
#contingut .fitxa-producte-media > p > a > img{
  display:block;
  width:auto;
  max-width:100%;
  max-height:520px;
  margin:0 auto;
  object-fit:contain;
}

/* Introduccio del producte. */
#contingut .fitxa-producte-intro{
  grid-area:product-intro;
  width:100%;
  max-width:68ch;
  margin:0;
  padding:0;
  align-self:start;
}

#contingut .fitxa-producte-intro > :first-child{
  margin-top:0 !important;
}

#contingut .fitxa-producte-intro > :last-child{
  margin-bottom:0 !important;
}

/* Blocs auxiliars: mantenim la imatge de 125 px i el text a la dreta. */
#contingut .fitxa-producte + .instop-grid,
#contingut .fitxa-producte ~ .instop-grid{
  width:100%;
  max-width:1050px;
  margin:4px auto 34px;
  padding:0 15px;
  gap:16px;
  box-sizing:border-box;
}

#contingut .fitxa-producte ~ .instop-grid > *{
  overflow:visible;
}

/* Compatibilitat temporal amb les pagines que encara tenen l'HTML antic. */
#contingut .linia-producte .producte-nom[style],
#contingut .linia-producte .producte-dreta[style]{
  margin-top:0 !important;
}

/* --------------------------------------------------------------------------
   MOBIL I TAULETA ESTRETA: un únic bloc final per evitar regles disperses.
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  #contingut .fitxa-producte-banner{
    padding:0 12px !important;
  }

  #contingut .fitxa-producte{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "product-title"
      "product-media"
      "product-buy"
      "product-intro";
    row-gap:0;
    width:100% !important;
    margin:0 auto !important;
    padding:24px 14px 38px !important;
  }

  #contingut .fitxa-producte-titol{
    margin:0 0 18px;
  }

  #contingut .fitxa-producte-titol h1,
  #contingut .fitxa-producte-titol .titol_Producte_28_ROIG,
  #contingut .fitxa-producte-titol #titol-producte-34,
  #contingut .fitxa-producte-titol .titol_Producte28{
    max-width:none;
    font-size:clamp(28px,8.2vw,35px) !important;
    line-height:1.14 !important;
    letter-spacing:-.03em !important;
  }

  #contingut .fitxa-producte-media{
    margin:0;
  }

  #contingut .fitxa-producte-media .mg-product-gallery,
  #contingut .fitxa-producte-media #wrap{
    width:100%;
    max-width:100%;
  }

  #contingut .fitxa-producte-media .mg-gallery-main,
  #contingut .fitxa-producte-media .mg-gallery-main-link{
    min-height:0 !important;
    aspect-ratio:1 / 1;
  }

  #contingut .fitxa-producte-media .mg-gallery-main-link{
    padding:10px;
  }

  #contingut .fitxa-producte-media .mg-gallery-btn{
    width:42px;
    height:42px;
    font-size:24px;
  }

  #contingut .fitxa-producte-media .mg-gallery-prev{left:8px;}
  #contingut .fitxa-producte-media .mg-gallery-next{right:8px;}

  #contingut .fitxa-producte-media .mg-gallery-thumbs{
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    width:100%;
    max-width:100%;
    margin:10px 0 0;
    padding:2px 1px 7px;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }

  #contingut .fitxa-producte-media .mg-gallery-thumb{
    flex:0 0 62px;
    width:62px;
    height:62px;
    padding:4px;
    scroll-snap-align:start;
  }

  #contingut .fitxa-producte-compra{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(118px,42%);
    align-items:center;
    gap:12px;
    width:100%;
    min-height:0;
    margin:16px 0 0;
    padding:14px;
    border-top-width:3px;
  }

  #contingut .fitxa-producte-compra[hidden]{
  display:none !important;
}

#contingut .fitxa-producte-compra--sense-preu,
#contingut .fitxa-producte-compra--sense-carro{
  grid-template-columns:minmax(0,1fr);
}

#contingut .fitxa-producte-compra--sense-preu .fitxa-producte-carro{
  justify-self:end;
  width:auto;
}

#contingut .fitxa-producte-compra--sense-carro .fitxa-producte-preu{
  text-align:right !important;
}

#contingut .fitxa-producte-preu{
    text-align:left !important;
  }

  #contingut .fitxa-producte-preu [align="right"]{
    text-align:left !important;
  }

  #contingut .fitxa-producte-preu .titol_Producte_28_ROIG,
  #contingut .fitxa-producte-preu .titol_Producte28,
  #contingut .fitxa-producte-preu #titol-producte-34{
    font-size:clamp(25px,7.6vw,33px) !important;
  }

  #contingut .fitxa-producte-carro,
  #contingut .fitxa-producte-carro > a,
  #contingut .fitxa-producte-carro > button,
  #contingut .fitxa-producte-carro .boto-carro,
  #contingut .fitxa-producte-carro .boto-comprar,
  #contingut .fitxa-producte-carro .boton-consulta{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  #contingut .fitxa-producte-carro .boto-carro{
    min-height:48px;
    padding:9px 8px;
    font-size:14px;
    white-space:normal;
  }

  #contingut .fitxa-producte-intro{
    max-width:none;
    margin-top:28px;
  }

  /* Quatre/dos blocs de servei: compactes i llegibles, no una imatge gegant. */
  #contingut .fitxa-producte ~ .instop-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100%;
    margin:0 auto 30px !important;
    padding:0 14px !important;
    gap:12px !important;
  }

  #contingut .fitxa-producte ~ .instop-grid .instop-item,
  #contingut .fitxa-producte ~ .instop-grid .instop-item140{
    display:grid !important;
    grid-template-columns:clamp(92px,27vw,118px) minmax(0,1fr);
    align-items:stretch;
    width:100% !important;
    min-height:112px;
    margin:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
    transform:none !important;
  }

  #contingut .fitxa-producte ~ .instop-grid .instop-img,
  #contingut .fitxa-producte ~ .instop-grid .instop-img125{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    height:100% !important;
    min-height:112px;
    margin:0 !important;
    padding:8px !important;
    border-radius:0 !important;
    background:#f3f4f4 !important;
  }

  #contingut .fitxa-producte ~ .instop-grid .instop-img img,
  #contingut .fitxa-producte ~ .instop-grid .instop-img125 img{
    display:block;
    width:100%;
    max-width:100%;
    height:100%;
    max-height:112px;
    margin:0 auto;
    object-fit:contain;
  }

  #contingut .fitxa-producte ~ .instop-grid .instop-text,
  #contingut .fitxa-producte ~ .instop-grid .instop-text.dreta{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    margin:0 !important;
    padding:13px 14px !important;
    border-radius:0 !important;
    text-align:left !important;
  }

  #contingut .fitxa-producte ~ .instop-grid .titol_Producte20,
  #contingut .fitxa-producte ~ .instop-grid .titol-Porducte10,
  #contingut .fitxa-producte ~ .instop-grid .normal,
  #contingut .fitxa-producte ~ .instop-grid .normal_instop{
    text-align:left !important;
  }

  /* Compatibilitat amb fitxes no actualitzades encara per Dreamweaver. */
  #contingut .linia-global{
    width:100%;
    margin:0 !important;
  }

  #contingut .linia-producte{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    align-items:start !important;
    width:100% !important;
    gap:16px !important;
  }

  #contingut .linia-producte > .espai-blanc{
    display:none !important;
  }

  #contingut .producte-nom{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  #contingut .producte-dreta{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(118px,42%) !important;
    align-items:center !important;
    width:100% !important;
    margin:0 !important;
    padding:14px !important;
    gap:12px !important;
    border:1px solid #d9dddf;
    border-top:3px solid var(--instop-red,#b93425);
    background:#f7f8f8;
  }

  #contingut .producte-preu{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    text-align:left !important;
    white-space:normal !important;
  }

  #contingut .producte-preu [align="right"]{
    text-align:left !important;
  }

  #contingut .producte-carro,
  #contingut .producte-carro > a,
  #contingut .producte-carro .boto-carro{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    text-align:center !important;
  }
}

/* ============================================================================
   VERSIO 40 - FITXA DE PRODUCTE SENSE REQUADRES DECORATIUS
   ---------------------------------------------------------------------------
   1. El bloc de preu / oferta deixa de ser una caixa gran: nomes es mostren
      el preu i l'accio, alineats amb la columna de contingut.
   2. La imatge principal deixa de tenir marc. La galeria continua reservant
      una zona estable, pero visualment queda integrada sobre el fons de pagina.
   3. Les miniatures i les fletxes es mantenen perquè son controls funcionals.
   ============================================================================ */

/* Preu i accio integrats, sense targeta ni espai decoratiu. */
#contingut .fitxa-producte-compra{
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  border-top:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  align-self:end;
}

/* Quan nomes hi ha un boto (oferta / pressupost), el contenidor es contrau
   al contingut i s'alinea amb l'inici de la columna de text. */
#contingut .fitxa-producte-compra--sense-preu{
  grid-template-columns:auto !important;
  justify-content:start !important;
  justify-self:start !important;
  width:max-content !important;
  max-width:100% !important;
}

#contingut .fitxa-producte-compra--sense-preu .fitxa-producte-carro{
  justify-self:start !important;
  width:auto !important;
  text-align:left !important;
}

/* Quan nomes hi ha preu, tampoc no s'estira artificialment. */
#contingut .fitxa-producte-compra--sense-carro{
  grid-template-columns:auto !important;
  justify-content:start !important;
  justify-self:start !important;
  width:max-content !important;
  max-width:100% !important;
}

#contingut .fitxa-producte-compra--sense-carro .fitxa-producte-preu{
  text-align:left !important;
}

/* Galeria principal integrada al fons, sense marc rectangular. */
#contingut .fitxa-producte-media,
#contingut .fitxa-producte-media .mg-product-gallery,
#contingut .fitxa-producte-media #wrap,
#contingut .fitxa-producte-media .mg-gallery-main,
#contingut .fitxa-producte-media .mg-gallery-main-link{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#contingut .fitxa-producte-media .mg-gallery-main-link{
  padding:clamp(4px,1.25vw,14px) clamp(18px,2.2vw,30px) !important;
}

/* Les imatges directes antigues tampoc no reben caixa ni fons. */
#contingut .fitxa-producte-media > img,
#contingut .fitxa-producte-media > a > img,
#contingut .fitxa-producte-media > p > img,
#contingut .fitxa-producte-media > p > a > img{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

@media (max-width:820px){
  #contingut .fitxa-producte-compra{
    width:100% !important;
    margin:18px 0 0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  #contingut .fitxa-producte-compra--sense-preu,
  #contingut .fitxa-producte-compra--sense-carro{
    justify-self:stretch !important;
    width:100% !important;
    max-width:none !important;
  }

  #contingut .fitxa-producte-compra--sense-preu .fitxa-producte-carro{
    justify-self:start !important;
    width:100% !important;
    text-align:left !important;
  }

  /* Un boto d'oferta sense preu es manté compacte; no crea una falsa targeta. */
  #contingut .fitxa-producte-compra--sense-preu .boto-cotitzacio,
  #contingut .fitxa-producte-compra--sense-preu .boto-pressupost,
  #contingut .fitxa-producte-compra--sense-preu .boton-consulta{
    width:auto !important;
    max-width:min(100%,290px) !important;
    margin:0 !important;
  }

  #contingut .fitxa-producte-media .mg-gallery-main-link{
    padding:4px 14px !important;
  }
}

/* Oferta i informacio: mateixa mida, una sola fila sota la introduccio.
   El script de la plantilla mou els nodes originals; el carro no es duplica. */
#contingut .fitxa-producte .fitxa-producte-preu[hidden],
#contingut .fitxa-producte .fitxa-producte-carro[hidden]{display:none !important;}

/* Sense un preu/boto de compra a dalt, el titol aprofita tota l'amplada. */
#contingut .fitxa-producte.fitxa-producte--sense-compra-capcalera{
  grid-template-areas:"product-title product-title" "product-media product-intro";
}
#contingut .fitxa-producte--sense-compra-capcalera .fitxa-producte-titol h1,
#contingut .fitxa-producte--sense-compra-capcalera .fitxa-producte-titol .titol_Producte_28_ROIG,
#contingut .fitxa-producte--sense-compra-capcalera .fitxa-producte-titol #titol-producte-34,
#contingut .fitxa-producte--sense-compra-capcalera .fitxa-producte-titol .titol_Producte28{max-width:100%;text-wrap:balance;}

#contingut .fitxa-producte .fitxa-producte-accions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,180px));
  align-items:stretch;
  justify-content:start;
  gap:12px;
  width:100%;
  max-width:372px;
  margin:22px 0 20px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
#contingut .fitxa-producte .fitxa-producte-accions--unica{grid-template-columns:minmax(0,180px);}
#contingut .fitxa-producte .fitxa-producte-accions > .fitxa-producte-accio{
  position:static !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:44px !important;
  min-height:44px !important;
  margin:0 !important;
  padding:8px 10px !important;
  border:0 !important;
  border-radius:3px !important;
  box-sizing:border-box;
  color:#fff !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
  text-align:center !important;
  text-transform:none !important;
  text-decoration:none !important;
  white-space:normal !important;
  box-shadow:none !important;
  transform:none !important;
  cursor:pointer;
}
#contingut .fitxa-producte .fitxa-producte-accio--oferta{background:var(--instop-red,#b93425) !important;}
#contingut .fitxa-producte .fitxa-producte-accio--oferta:hover{background:var(--instop-red-hover,#8f281d) !important;}
#contingut .fitxa-producte .fitxa-producte-accio--informacio{background:var(--instop-form-green,#5c8328) !important;}
#contingut .fitxa-producte .fitxa-producte-accio--informacio:hover{background:var(--instop-form-green-hover,#496b1e) !important;}
#contingut .fitxa-producte .fitxa-producte-accions > .fitxa-producte-accio:focus-visible{outline:2px solid #30363a !important;outline-offset:3px;}
/* Variant antiga: l'enllac d'informacio pot contenir un div.boto-carro. */
#contingut .fitxa-producte .fitxa-producte-accio > .boto-carro{
  width:auto !important;min-width:0 !important;max-width:none !important;
  height:auto !important;min-height:0 !important;margin:0 !important;padding:0 !important;
  border:0 !important;background:transparent !important;box-shadow:none !important;
  color:inherit !important;font:inherit !important;letter-spacing:inherit !important;
}

/* Reserva visual compacta abans d'executar el script; no afecta altres pagines. */
#contingut .fitxa-producte .boto-cotitzacio:not(.fitxa-producte-accio){
  display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:0 4px;min-height:44px;padding:8px 14px;font-size:14px;
}
#contingut .fitxa-producte .boto-cotitzacio .traduccio{display:none !important;}
#contingut .fitxa-producte .boto-cotitzacio .titol,
#contingut .fitxa-producte .boto-cotitzacio .subtitol{
  min-height:0 !important;height:auto !important;margin:0 !important;padding:0 !important;
  font-size:14px !important;line-height:1.2 !important;letter-spacing:0 !important;
}

@media (max-width:820px){
  #contingut .fitxa-producte.fitxa-producte--sense-compra-capcalera{
    grid-template-areas:"product-title" "product-media" "product-intro";
  }
}
@media (max-width:360px){
  #contingut .fitxa-producte .fitxa-producte-accions{gap:8px;}
  #contingut .fitxa-producte .fitxa-producte-accions > .fitxa-producte-accio{padding-right:6px !important;padding-left:6px !important;}
}

/* La foto queda dins del quadrat, tambe si l'original no es quadrat.
   Evita que height:auto !important d'una regla mobil tapi titol i miniatures. */
#contingut .fitxa-producte-media .mg-gallery-main-img,
#contingut .fitxa-producte-media .mg-gallery-thumb img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:contain;
}