/* =========================================================
   2026-pagines-02.css (prova) — versió neta i reordenada
   ========================================================= */

/* ---------- Tokens ---------- */
:root{--max:1050px;--max-narrow:950px;--pad:15px;--gap:16px;--b:#ddd;--bg:#fff}

/* =========================================================
   F) CONTENIDOR DE PŔGINA
   ========================================================= */
.contenidor-pagina{max-width:var(--max-narrow);width:100%;margin:0 auto;padding:0 10px}
.contenidor-pagina img{max-width:100%;height:auto;display:block}

/* opcional (si encara el fas servir en altres pŕgines) */
.contenidor-1046{max-width:1046px;margin:0 auto;padding:10px;box-sizing:border-box}

/* =========================================================
   B) BLOC PRINCIPAL (banner + imatge + text)
   ========================================================= */
.banner-zone{min-height:27px}
.bloc-contingut{padding:0}

/* desktop: 2 columnes */
.fila-principal{display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:space-between;gap:24px;max-width:var(--max);margin:20px auto 0;padding:0 var(--pad);text-align:left}
.col-img{flex:0 0 420px;max-width:420px;display:flex;align-items:center;justify-content:center}
.col-img img{max-width:100%;height:auto;display:block}
.col-text{flex:1 1 auto;max-width:none;padding:0;box-sizing:border-box;text-align:left}
.titol_Producte_28_ROIG{text-align:left;margin:0 0 10px}
.text2,.din,.fac{margin-top:1rem}

/* mňbil */
@media (max-width:768px){
.fila-principal{flex-wrap:wrap;flex-direction:column;gap:12px}
.col-text{order:1;flex:1 1 100%}
.col-img{order:2;flex:0 0 auto;max-width:100%}
}

/* =========================================================
   A) GRID 6 ZONES (2×3)
   ========================================================= */
.six-zones33{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin:20px auto;max-width:var(--max);padding:0 var(--pad)}
.six-zone33{padding:12px;border:1px solid var(--b);background:var(--bg);text-align:center}
.six-zone33:empty{display:none}
@media (max-width:768px){.six-zones33{grid-template-columns:1fr}}

/* =========================================================
   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 .2s ease, box-shadow .2s ease}
.mcca-producte img{width:150px;height:150px;object-fit:cover;margin:0 auto 10px;display:block}
.mcca-producte p{font-size:13px;color:#333;line-height:1.3;margin:0}
.mcca-producte:hover{transform:translateY(-4px);box-shadow:0 4px 10px rgba(0,0,0,.1);border-color:#999}
@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}
}

/* =========================================================
   D) CARRO (taules responsives)
   ========================================================= */
#carroContenidor{max-width:var(--max-narrow);margin:0 auto;width:100%}
#carroContenidor table{width:100%;table-layout:fixed}
@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}
}

/* =========================================================
   J) COLUMNES DE TEXT (2 / 3 / 5)
   ========================================================= */
.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}

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

/* ====== BLOQUE CALIBRACIÓN 3 PASOS ====== */
.calibracio-steps .columna{display:flex;flex-direction:column;gap:12px;text-align:center}
.calibracio-steps img{border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.08)}

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