/* 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;
  /* si vols hover, pots reciclar .factor-flex:hover… */
}

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


/* seccions formulari de compra */

.titol-seccio-formulari {
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #d60000;
  margin: 30px 0 15px;
  line-height: 1.3;
  position: relative;
  padding-left: 60px;
}

.titol-seccio-formulari .num-seccio {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 36px;
  font-weight: bold;
  color: #fff;
  background-color: #d60000;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
}

.titol-seccio-formulari .subtitol {
  display: block;
  font-size: 14px;
  color: #666;
  font-weight: normal;
  margin-top: 3px;
}






<!-- ======================
     CSS BÀSIC (afegiu-lo al vostre fitxer .css)
     ======================-->

/* ---------- Dimensió i centrament global ---------- */
.wrap-1046{
  max-width:1046px;       /* mateix ample que la taula antiga          */
  margin:0 auto;          /* centra tot el bloc                        */
  background:#fff;        /* equival a bgcolor="#FFFFFF"               */
}

/* ---------- 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:wrap;
}

/* Columna imatge (antiga cel·la height="420")       */
.col-img{
  flex:0 0 420px;         /* amplada “mínima” ≈ alçada de 420 de la taula
                             (canvia’l al que et convingui realment)    */
  min-height:420px;
  box-sizing:border-box;
  margin-top: 20px; /* Ajusta la quantitat segons calgui */
}

/* Columna text1 (antiga width="620")                */
.col-text{
  flex:1 1 620px;         /* 1 fr flexible però, si cap, 620 px         */
  box-sizing:border-box;
  padding-left:0px;      /* separació opcional                         */
}

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

/* ---------- Responsivitat (≤1045 px) ---------- */
@media (max-width:1045px){
  .fila-principal{
    flex-direction:column;   /* imatge a sobre, text a sota             */
  }
  .col-img{ display:none !important; }   /* ← afegit */
  .col-text{
    flex:1 1 100%;
    min-height:auto;         /* deixem créixer segons el contingut      */
  }
}