/* =========================
   1) LAYOUT: 2 COLUMNES (GRID)
   ========================= */
.dos-columnes-text{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:900px;margin:0 auto 40px;}
.dos-columnes-text .columna{float:none !important;width:auto !important;max-width:100%;}
.dos-columnes-text img{display:block;width:100%;height:auto;max-width:100%;border-radius:6px;}
.dos-columnes-text h3{margin:0 0 8px;}
.dos-columnes-text p{margin:8px 0 0;line-height:1.45;}
@media (max-width:768px){.dos-columnes-text{grid-template-columns:1fr;}}

/* =========================
   2) TIMELINE / HISTÒRIA
   ========================= */
.timeline-entry{margin:32px 0;font-family:Arial,sans-serif;}
.timeline-img-container{position:relative;width:100%;max-width:800px;margin:0 auto;overflow:hidden;border-radius:8px;}
.timeline-img-container img{width:100%;height:auto;display:block;}
.year-label{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.75);color:#fff;font-size:18px;font-weight:700;padding:6px 12px;border-radius:4px;}
.timeline-content{text-align:center;padding:16px;}
.timeline-title{color:#5a2a83;font-size:18px;margin:0 0 8px;}
.timeline-text{font-size:16px;color:#333;}

/* =========================
   3) BLOCS / CAPÇALERA / WRAPPERS
   ========================= */
.bloc-2020{display:flex;flex-wrap:wrap;justify-content:space-between;}


/* Quan està dins .bloc-intro, l’ample el marca .bloc-intro */
.bloc-intro{max-width:900px;margin:0 auto;text-align:center;padding:15px;box-sizing:border-box;}
.col-2020.gran{flex:0 0 40%;max-width:40%;}
.col-2020.petita{flex:0 0 60%;max-width:60%;}
.capcalera-superior{max-width:900px;margin:0 auto;box-sizing:border-box;}
@media (max-width:768px){.col-2020.gran,.col-2020.petita{flex:1 1 100%;max-width:100%;}}

/* =========================
   4) WRAPPER PÀGINA
   ========================= */
.cos-pagina{max-width:900px;margin:0 auto;padding:20px;box-sizing:border-box;}
@media (max-width:768px){.cos-pagina{padding:10px;}}

/* =========================
   5) GALERIA
   ========================= */
.vea-galeria{max-width:900px;margin:40px auto;padding:15px;background:#fff;border:0;border-radius:8px;display:flex;flex-wrap:wrap;justify-content:center;gap:15px;}
.vea-galeria a{flex:1 1 220px;max-width:220px;display:block;transition:transform .3s ease;}
.vea-galeria a:hover{transform:scale(1.02);}
.vea-galeria img{width:100%;height:auto;display:block;border-radius:4px;}
.vea-galeria a span{display:block;text-align:center;margin-top:8px;font-size:14px;font-weight:700;color:#555;line-height:1.3;}

/* =========================
   6) BLOCS PRODUCTES (GRID FLEX + 2 COLUMNES EN MÒBIL)
   ========================= */
/* BLOCS HOME (6 quadres) */
.blocs-productes{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:25px;
  width:90%;
  max-width:830px;
  margin:0 auto;
  padding:0;
  box-sizing:border-box;
  transform: translateX(-50px);
}
.bloc-producte{max-width:none;}
.bloc-producte a{display:block; text-decoration:none;}
.bloc-producte img{width:100%; height:auto; display:block; border-radius:4px;}

@media (max-width:768px){
  .blocs-productes{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

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

/* =========================
   7) FITXA PRODUCTE
   ========================= */
.producte-flex{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;align-items:flex-start;max-width:950px;margin:0 auto;}
.producte-image,.producte-info{flex:1 1 400px;min-width:300px;}
.producte-intro{margin-top:20px;font-size:14px;line-height:24px;color:#464646;max-width:100%;}
.producte-imatge{margin-top:40px;display:flex;justify-content:center;}
@media (max-width:768px){.producte-flex{flex-direction:column;padding:10px;}.text_normal_vea{font-size:15px;line-height:26px;padding:0 15px;}}
@media (max-width:480px){.text_normal_vea{font-size:16px;line-height:28px;}}
@media (min-width:769px){.producte-intro{padding-right:10px;}.producte-flex{align-items:flex-start;}.producte-image{max-width:45%;}.producte-info{max-width:55%;}}

/* =========================
   8) UTILITATS + LINKS
   ========================= */
.img_border{border:2px solid #AFB487;}
.transparencia{opacity:.5;filter:alpha(opacity=50);}

/* =========================
   9) BARRA IDIOMES (TOP)
   ========================= */
.idiomes-barra{text-align:right;padding:8px 20px 0 0;font:9px Verdana,Arial,Helvetica,sans-serif;color:#999;text-shadow:1px 0 #CFCFCF;letter-spacing:2px;}
.idiomes-barra a{color:#999;text-decoration:none;margin:0 5px;transition:color .3s;}
.idiomes-barra a:hover{color:#727633;}

/* =========================
   10) BOTONS
   ========================= */
.boto-vea{display:inline-flex;align-items:center;background:#4b4b87;color:#fff;font-family:Georgia,serif;font-size:16px;padding:8px 16px;border-radius:6px;border:2px solid transparent;text-decoration:none;transition:all .3s ease;min-height:48px;}
.boto-vea:hover{background:#eaeaf5;color:#4b4b87;border-color:#4b4b87;}
.boto-clean{display:inline-block;background:#eaeaf5;color:#727633;border:2px solid #727633;padding:12px 24px;font-family:Georgia,serif;font-size:16px;text-decoration:none;border-radius:8px;transition:all .3s ease;}

/* =========================
   11) FOOTER
   ========================= */
.peu-pagina{max-width:900px;margin:0 auto;padding:20px;font:12px Verdana,sans-serif;color:#727633;}
.footer-contenidor{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:flex-start;max-width:900px;margin:0 auto;padding:20px 20px 0;}
.footer-text{flex:1 1 300px;text-align:left;}
.footer-text a{color:#727633;text-decoration:none;}
.footer-text a:hover{text-decoration:underline;}
.footer-icons{display:flex;justify-content:flex-end;align-items:center;gap:15px;flex:0 0 auto;}
.footer-icons img{max-width:100%;height:auto;transition:opacity .3s ease;}
.footer-logo{text-align:center;margin-top:30px;}
.footer-logo img{max-width:100%;height:auto;}
@media (max-width:768px){.footer-contenidor{flex-direction:column;align-items:center;text-align:center;}.footer-text{text-align:center;}.footer-icons{justify-content:center;margin-top:10px;}}

/* =========================
   12) TIPOGRAFIES
   ========================= */

html, body { font-family:'Montserrat', sans-serif; font-weight:400; color:#464646; }

.text-normal { font-size:14px; line-height:24px; }
.text-normal-responsive { font-size:16px; line-height:28px; padding:0 15px; }
.text_normal_vea_petit_verd { font-size:11px; color:#727633; line-height:18px; }
.text-petit-verd { font-size:11px; color:#727633; line-height:18px; }
.text-vincle-mini { font-size:10px; color:#333; line-height:18px; text-decoration:underline; }
.titol-producte { font-size:15px; color:#727633; margin-top:10px; line-height:20px; }
.titol-verd { color:#727633; font-weight:normal; text-transform:none; font-size:13px; line-height:21px; text-align:left; box-shadow:none; }
.titol-verd-2 { color:#727633; font-weight:normal; text-transform:none; font-size:17px; line-height:24px; text-align:left; }
.titol-verd-2-lila { color:#6D58AD; font-size:20px; line-height:30px; font-weight:500; text-transform:none; }
.titol-verd-4 { color:#727633; font-weight:500; text-transform:uppercase; font-size:28px; margin-top:40px; margin-bottom:25px; line-height:34px; }
.detall2 { font-size:11px; color:#333; line-height:16px; }
a { color:#727633; text-decoration:none; transition:color 0.3s ease; }
a:hover { color:#555; text-decoration:underline; }
.normal_11_formulari { font-size:12px; color:#727633; line-height:20px; cursor:pointer; margin:2px; border:1px solid #727633; padding:4px 8px; border-radius:3px; }

@media (max-width:768px) { .nomobil { display:none !important; } }
@media (max-width:480px) { .text-normal { font-size:17px; line-height:30px; } .text-normal-responsive { font-size:17px; line-height:30px; } .titol-verd-4 { font-size:24px; } }


/* =========================
   14) MENU
   ========================= */


.idiomes-barra-top { text-align:right; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; color:#999999; text-shadow:1px 0px #CFCFCF; letter-spacing:2px; padding:5px 20px 0 20px; max-width:900px; margin:0 auto; }

.idiomes-barra-top a { color:#999999; text-decoration:none; margin:0 5px; transition:color 0.3s; }
.idiomes-barra-top a:hover { color:#727633; }
.capcalera-vea { max-width:900px; margin:0 auto; padding-top:5px; }
.capcalera-superior { max-width:900px; margin:0 auto; padding:0 20px; display:flex; justify-content:space-between; flex-wrap:wrap; }
.capcalera-superior .logo img { display:block; height:auto; max-width:100%; }

@media (max-width:768px) { .idiomes-barra-top { text-align:center; padding-top:10px; } .capcalera-superior { flex-direction:column; align-items:center; text-align:center; } .capcalera-superior .logo { margin-bottom:10px; } }

.menu-css { background-color:#ffffff; font-family:Verdana, sans-serif; position:relative; border-bottom:1px solid #dcdcdc; }
.menu-css input[type="checkbox"] { display:none; }
.menu-icon { display:none; font-size:28px; padding:10px 15px; cursor:pointer; color:#727633; }
.menu-items { list-style:none; margin:0; padding:0; display:flex; flex-direction:row; justify-content:center; align-items:center; border-top:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; }
.menu-items > li { position:relative; border-right:1px solid #dcdcdc; min-width:140px; text-align:center; }
.menu-items > li:last-child { border-right:none; }
.menu-items > li > label { display:block; padding:14px 20px; color:#727633; cursor:pointer; transition:background-color 0.3s, color 0.3s; }
.menu-items > li > label:hover { background-color:#afb487; color:#ffffff; }
.menu-items > li > a { display:block; padding:14px 20px; color:#727633; text-decoration:none; transition:background-color 0.3s, color 0.3s; }
.menu-items > li > a:hover { background-color:#afb487; color:#ffffff; }
.menu-items .submenu { display:none; position:absolute; top:100%; left:0; min-width:220px; background-color:#ffffff; border:1px solid #afb487; z-index:1000; flex-direction:column; }
.menu-items .submenu li { border-bottom:1px solid #e0e0e0; }
.menu-items .submenu li:last-child { border-bottom:none; }
.menu-items .submenu li a { display:block; text-align:left; padding:10px 15px; color:#727633; text-decoration:none; background-color:#ffffff; transition:background-color 0.3s, color 0.3s; }
.menu-items .submenu li a:hover { background-color:#afb487; color:#ffffff; }
.menu-css input[type="checkbox"]:checked ~ .menu-items li input[type="checkbox"]:checked + label + .submenu { display:flex; }
.menu-items li:hover .submenu { display:flex; flex-direction:column; }

@media (max-width:768px) { .menu-icon { display:block; } .menu-items { flex-direction:column; display:none; border-top:none; } #toggle-menu:checked + .menu-icon + .menu-items { display:flex; } .menu-items > li { border-right:none; border-top:1px solid #dcdcdc; width:100%; } .menu-items > li > label, .menu-items > li > a { padding:12px 15px; width:100%; } .menu-items .submenu { position:static; border:none; } .menu-items li:hover .submenu { display:none; } .menu-css input[type="checkbox"]:checked + label + .submenu { display:flex; } }

/* --- SUBMENU amb imatge 50px davant --- */
.menu-items .submenu li a{
  display:flex;
  align-items:center;
  gap:12px;
}

.menu-items .submenu li a img{
  width:50px;
  height:50px;
  object-fit:cover; /* o contain si vols que no retalli */
  flex:0 0 50px;
  border-radius:6px; /* opcional */
}