/* ==========================================================
   IMATGES RESPONSIVE (unificat)
   ========================================================== */
.img-res,.img-responsive,.contenidor-pagina img{display:block;max-width:100%;height:auto;margin:0 auto;}

/* ==========================================================
   CARRO
   ========================================================== */
#carroContenidor{max-width:950px;width:100%;margin:0 auto;}
#carroContenidor table{width:100%;table-layout:fixed;}

/* ==========================================================
   GUIA ELEMENTS EMPRESA
   ========================================================== */
.mcca-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:25px;max-width:950px;margin:0 auto;padding:20px;box-sizing:border-box;}
.mcca-producte{border:1px solid #ccc;padding:12px;background:#fff;text-align:center;transition:transform .2s,box-shadow .2s;}
.mcca-producte img{width:100%;max-width:220px;height:auto;display:block;margin:0 auto 12px;}
.mcca-producte p{font-size:13px;color:#333;line-height:1.4;margin:0;}
.mcca-producte:hover{transform:translateY(-4px);box-shadow:0 4px 10px rgba(0,0,0,.1);border-color:#999;}

/* ==========================================================
   PÀGINA / LAYOUT
   ========================================================== */
.contenidor-pagina{max-width:950px;width:100%;margin:0 auto;padding:0 10px;}
.contenidor-1046{max-width:1046px;margin:0 auto;padding:10px;box-sizing:border-box;}
.fons-blanc{background:#fff;}
.linia-global{display:flex;flex-wrap:wrap;gap:20px;box-sizing:border-box;max-width:100%;overflow-x:hidden;}
.columna-esquerra{flex:1 1 0;min-width:0;}
.columna-dreta{width:165px;flex-shrink:0;}
.area-contingut{flex:1 1 auto;min-width:0;}
.area-lateral{width:180px;flex-shrink:0;}
.nomostrar-en-mobil{display:block;}


/* ==========================================================
   COLUMNES TEXT
   ========================================================== */
.dos-columnes-text,.tres-columnes-text,.cinc-columnes-text{display:flex;flex-wrap:wrap;gap:20px;margin:0 auto;}
.dos-columnes-text{max-width:900px;}
.tres-columnes-text{max-width:1200px;}
.cinc-columnes-text{max-width:1400px;}
.dos-columnes-text .columna{flex:1 1 45%;}
.tres-columnes-text .columna{flex:1 1 30%;min-width:280px;}
.cinc-columnes-text .columna{flex:1 1 18%;min-width:220px;}

/* ==========================================================
   RESPONSIVE (768px)
   ========================================================== */
@media (max-width:768px){

  /* Carro: apilar */
  #carroContenidor tr,#carroContenidor td{display:block;width:100%!important;}
  #carroContenidor td{padding:10px 0;}
  #carroContenidor table{display:block;width:100%;overflow-x:auto;}

  /* MCCA: 1 columna + centrats */
  .mcca-grid{grid-template-columns:1fr;}
  .mcca-producte{max-width:320px;margin:0 auto;width:100%;box-sizing:border-box;}
  .mcca-producte img{width:100%;max-width:150px;height:auto;margin:0 auto 10px;}

  /* Layout */
  .nomostrar-en-mobil{display:none;}
  .linia-global{flex-direction:column;gap:0;}

  /* Peu */
  .llista_inferior{flex-direction:column;gap:10px;}
  .fons_ul{width:100%;min-height:unset;padding-top:0!important;}

  /* Columnes text */
  .dos-columnes-text .columna,.tres-columnes-text .columna,.cinc-columnes-text .columna{flex:1 1 100%;}
}