/* =========================================================
   A) GRID 6 ZONES (2x3)
   ========================================================= */

/* 6 ZONES EN GRID 2×3 */
.six-zones33 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;          /* ajusta l’espaiat */
  margin: 20px auto;  /* separació respecte el contingut anterior */
  max-width: 1050px;  /* igual que el teu contenidor principal */
}

/* AMAGA les zones completament buides */
.six-zone33:empty {
  display: none;
}

/* Opcional: estil bàsic de cada zona */
.six-zone33 {
  padding: 12px;
  border: 1px solid #ddd;
  background: #fff;
  text-align: center;
}

/* Responsive: passa a 1×6 en pantalles petites */
@media (max-width: 768px) {
  .six-zones33 {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   B) BLOC “TAULA ANTIGA” ? FLEX (barra-top / fila-principal)
   ========================================================= */

/* ---------- Barra de 27 px ---------- */
.barra-top{
  height:27px;            /* mateixa alçada que <td height="27"> */
}

/* ---------- Cos principal ---------- */
.bloc-contingut{
  padding:0;              /* imita cellpadding="0" */
}

/* ---------- Dues columnes ---------- */
.fila-principal{
  display:flex;
  flex-wrap:nowrap;          /* clau: que no salti a sota */
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-top:20px;
  width:min(1050px, 100%);   /* ample “web” */
  margin-left:auto;
  margin-right:auto;
  padding:0 15px;
  text-align:left;           /* anul·la centrats heretats */
}
/* ? Columna imatge (RECUPERADA: col-img) */
.col-img{
  flex:0 0 420px;            /* mida estable (ajusta si vols) */
  max-width:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.col-img img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Columna text1 (antiga width="620") */
.col-text{
  flex:1 1 auto;
  max-width:none;            /* important: treu el topall de 500px */
  padding-left:0;            /* el gap ja fa la separació */
  box-sizing:border-box;
  text-align:left;
}

/* ---------- Títol alineat a l’esquerra ---------- */
.titol_Producte_28_ROIG {
  text-align: left;
  margin: 0 0 10px 0px; /* igual al padding-left de .col-text */
}

/* ---------- Zones addicionals ---------- */
.text2,
.din,
.fac{
  margin-top:1rem;
}

/* ---------- Responsivitat (=768 px) ---------- */
@media (max-width:768px){
  .fila-principal{
    flex-wrap:wrap;
    flex-direction:column;
    gap:12px;
  }
  .col-text{
    order:1;                 /* text passa primer */
    flex:1 1 100%;
    min-height:auto;
  }
  .col-img{order:2;flex:0 0 auto;max-width:100%;}
}


/* =========================================================
   C) IMATGE RESPONSIVE UNIVERSAL
   ========================================================= */

/* Imatge responsive universal centrada */
.img-res {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}


/* =========================================================
   D) CARRO (taules responsives)
   ========================================================= */

#carroContenidor {
  max-width: 950px;
  margin: 0 auto;
  width: 100%;
}

/* Fes les taules flexibles */
#carroContenidor table {
  width: 100%;
  table-layout: fixed;
}

/* Per pantalles petites, canviem a display:block per apilar */
@media (max-width: 768px) {
  #carroContenidor tr,
  #carroContenidor td {
    display: block;
    width: 100% !important;
  }

  #carroContenidor td {
    padding: 10px 0;
  }

  #carroContenidor table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
}


/* =========================================================
   E) GUIA ELEMENTS EMPRESA (mcca-*)
   ========================================================= */

.mcca-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  max-width: 630px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.mcca-producte {
  border: 1px solid #ccc;
  padding: 10px;
  background: #fff;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mcca-producte img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  display: block;
  margin: 0 auto 10px auto;
}

.mcca-producte p {
  font-size: 13px;
  color: #333;
  line-height: 1.3;
  margin: 0;
}

/* Efecte hover */
.mcca-producte:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-color: #999;
}

/* Mòbils petits */
@media (max-width: 768px) {
  .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 auto;
    display: block;
  }
}


/* =========================================================
   F) CONTENIDORS DE PÀGINA / COLUMNES (layout)
   ========================================================= */

.contenidor-pagina {
  max-width: 950px;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

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

.contenidor-1046 {
  max-width: 1046px;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
}

.area-contingut {
  flex: 1 1 auto;
  min-width: 0; /* evita overflow */
}

.area-lateral {
  width: 180px;
  flex-shrink: 0;
}

/* duplicat al teu text: el deixo igual però sense repetir-lo més cops */
.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;
  overflow-x: hidden;
  max-width: 100%;
}

.columna-esquerra {
  flex: 1 1 0;
  min-width: 0;
}

.columna-dreta {
  width: 165px;
  flex-shrink: 0;
}

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

@media (max-width: 768px) {
  .nomostrar-en-mobil {
    display: none;
  }
  
  .linia-global {
    flex-direction: column;
    gap: 0;
  }  
}




/* =========================================================
   J) COLUMNES DE TEXT (2 / 3 / 5)
   ========================================================= */

.dos-columnes-text {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.dos-columnes-text .columna {
  flex: 1 1 45%;
}

.tres-columnes-text {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

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

.cinc-columnes-text {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.cinc-columnes-text .columna {
  flex: 1 1 18%;
  min-width: 220px;
}

@media (max-width: 768px) {
  .dos-columnes-text .columna,
  .tres-columnes-text .columna,
  .cinc-columnes-text .columna {
    flex: 1 1 100%;
  }
}


/* =========================================================
   K) IMG-RESPONSIVE (unificat: el teu fitxer el repetia)
   ========================================================= */

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