@charset "utf-8";

/* FONTS */
@font-face { font-family: din_light;  src: url("../fonts/dinpro-l.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: din_medium; src: url("../fonts/dinpro-m.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: din_bold;   src: url("../fonts/dinpro-1.ttf") format("truetype"); font-display: swap; }

/* VARIABLES */
:root {
	--ample-web: 945px;
	--ample-lateral: 280px;
	--ample-contingut: 600px;
	--verd-fons: #73d57e;
	--verd-bloc: #d9f4dc;
	--verd-menu: #b9eabf;
	--verd-menu-hover: #d5f2d9;
	--verd-fosc: #205626;
	--verd-vora: #5dac67;
	--verd-vora-clara: #8ed697;
	--verd-linia: #95bd9b;
	--verd-llegat: #2c6132;
	--verd-data: #00cc00;
	--text: #000;
	--text-menu: #202020;
	--text-gris: #585858;
	--blanc: #fff;
	--radi: 4px;
}

/* BASE */
* { padding: 0; margin: 0; text-decoration: none; box-sizing: content-box; }
html { height: 100%; }
body { min-height: 100%; font-family: din_light, sans-serif; font-size: 16px; color: var(--text); }
img { border: 0; max-width: 100%; height: auto; }
a { color: #090; }
h1, h2, .titol_seccio { color: var(--verd-fosc); font-size: 24px; font-family: din_light, sans-serif; font-weight: normal; }
h1.titol_pla { font-size: 20px; font-family: din_medium, sans-serif; }
h3 { color: var(--verd-fosc); font-size: 20px; font-family: din_medium, sans-serif; font-weight: normal; padding: 18px 18px 10px 18px; border-bottom: 1px solid var(--verd-linia); }

/* ESTRUCTURA */
.cos { width: 100%; min-height: 500px; background: var(--verd-fons) url("../img/bg_site.jpg") repeat-x; }
.web { width: 100%; max-width: var(--ample-web); margin: 0 auto; padding: 0 12px; box-sizing: border-box; }
.cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.cap .logo { margin-left: -13px; }
.cap .navegacio { margin-top: 18px; }
#idiomes { text-align: right; font-size: 13px; }
#idiomes a { color: #505050; margin-left: 6px; }
#content { padding-bottom: 30px; }

/* COLUMNES (lateral + contingut) */
.columnes { display: flex; flex-direction: column; gap: 24px; }
.lateral { width: 100%; }
.principal { width: 100%; }
.text_lateral { color: var(--blanc); font-size: 20px; font-family: din_medium, sans-serif; margin: 57px 0 0 30px; width: 200px; }
.text_lateral_serveis { font-size: 18px; margin-top: 0; }

@media (min-width: 992px) {
	.columnes { flex-direction: row; justify-content: space-between; gap: 0; }
	.lateral { flex: 0 0 var(--ample-lateral); width: var(--ample-lateral); border-right: 1px solid var(--verd-vora); }
	.principal { flex: 0 0 var(--ample-contingut); width: var(--ample-contingut); }
}

/* MENU SUPERIOR */
#menu { display: flex; flex-wrap: wrap; justify-content: flex-end; list-style: none; font-family: din_medium, sans-serif; margin-top: 10px; margin-right: -7px; max-width: 700px; }
#menu li { margin-left: 12px; text-shadow: var(--blanc) 1px 1px; text-transform: uppercase; }
#menu li a { display: block; padding: 2px 8px; color: var(--text-menu); }
#menu li a:hover { background-color: var(--verd-menu-hover); border-radius: 3px; }

/* MENU LATERAL */
.menu_lat { padding-left: 20px; list-style: none; font-family: din_medium, sans-serif; }
.menu_lat li a {
	display: block;
	padding: 7px 0 8px 18px;
	font-size: 18px;
	color: var(--blanc);
	border-top: 1px solid var(--verd-vora-clara);
	border-bottom: 1px solid var(--verd-vora);
	background: var(--verd-menu) url("../img/menu_lat_hover.jpg") no-repeat 0 0;
	transition: background-position .3s;
}
.menu_lat li:first-child a { border-top: none; }
.menu_lat li a img { visibility: hidden; float: left; margin: 7px 10px 0 0; }
.menu_lat li a:hover, .menu_lat li a.active { color: var(--verd-fosc); background-position: -280px 0; }
.menu_lat li a:hover img, .menu_lat li a.active img { visibility: visible; }

/* BLOCS */
.bloc { font-size: 14px; margin-top: 24px; background-color: var(--verd-bloc); border-radius: var(--radi); }
.bloc_text { padding: 28px 24px; margin-bottom: 23px; }
.hover_blanc:hover { background-color: var(--blanc); }
.foto_vora { border: 5px solid var(--blanc); }
.foto_marc { border: 1px solid var(--verd-llegat); }
.principal > img, .principal > .mapa { display: block; max-width: 100%; box-sizing: border-box; }
.principal > .foto_vora { margin-bottom: 0; }
.principal > h1, .principal > h2, .principal > .titol_seccio { margin-bottom: 12px; }
.principal > .titol_seccio { display: block; margin-bottom: 4px; }

/* MAPA */
.mapa { height: 491px; }
.mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

/* FORMULARI */
.text_blanc { color: var(--blanc); }
.bloc_form { margin-bottom: 20px; }
.form { padding: 14px 20px; border-top: 1px solid #c6e7ca; }
.camp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.label { color: var(--verd-fosc); font-size: 18px; }
.opcions { display: flex; gap: 20px; margin: 0 0 5px 15px; }
.input { box-sizing: border-box; width: 360px; max-width: 100%; margin: 4px 0 10px; padding: 4px 5px; height: 31px; background: var(--blanc); border: 1px solid #cddbce; border-radius: 5px; font-family: din_light, sans-serif; font-size: 16px; color: var(--verd-fosc); }
.input_gran { height: 200px; }
.trampa { position: absolute; left: -9999px; }
.botons { display: flex; justify-content: flex-end; gap: 20px; }
.boto { padding: 7px 28px 6px; color: var(--blanc); background-color: var(--verd-fosc); border: 0; border-radius: 5px; font-family: din_light, sans-serif; font-size: 16px; cursor: pointer; }
.avis { margin: 12px 0; padding: 10px 14px; border-radius: 5px; background: var(--blanc); }
.avis_ok { color: var(--verd-fosc); }
.avis_error { color: #a00; }

/* LLISTATS I DETALLS */
.principal img.separat { margin-bottom: 18px; }
.titol_pla { padding: 0; margin-bottom: 12px; border: none; }
.ampliar { text-align: right; text-decoration: underline; color: var(--text-gris); }
.fila_producte { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 15px 10px; margin-bottom: 20px; color: var(--text); }
.fila_producte > img { flex: 0 0 auto; max-width: 100%; height: auto; align-self: flex-start; }
.fila_text { flex: 1 1 260px; max-width: 298px; display: flex; flex-direction: column; }
.fila_text .titol_pla { margin-bottom: 0; }
.fila_text .resum { flex: 1; min-height: 128px; margin: 18px 0 10px; color: var(--text-gris); }
.fila_text .ampliar { color: var(--verd-fosc); }
.bloc_detall { margin-bottom: 20px; }
.bloc_detall .detall { padding: 20px; font-size: 16px; overflow-x: auto; }
.bloc_text { overflow-x: auto; }
.noticia_fila { display: block; margin-bottom: 20px; color: var(--text); }
.noticia_fila .noticia_cos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 10px 20px; }
.noticia_fila .noticia_cos > img { flex: 0 0 auto; align-self: flex-start; }
.noticia_fila .noticia_text { flex: 1 1 260px; max-width: 453px; }
.noticia_fila .ampliar { padding: 0 20px 10px; }
.data_noticia { display: block; color: var(--verd-data); }
.data_detall { display: block; margin-bottom: 8px; font-family: din_medium, sans-serif; color: var(--blanc); }
.tornar { display: inline-block; margin-top: 18px; color: var(--text-gris); text-decoration: underline; }
.text_lateral.sense_marge { margin-top: 0; }

/* AVIS DE COOKIES */
#msg_cookies_fbox { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px max(12px, calc((100% - var(--ample-web)) / 2)); background: var(--verd-bloc); border-top: 5px solid var(--verd-vora); box-shadow: 0 -4px 16px rgba(0, 0, 0, .18); font-size: 14px; line-height: 1.5; color: var(--text); }
#msg_cookies_fbox[hidden], .cookies_detalls[hidden] { display: none; }
.cookies_missatge { flex: 1 1 100%; }
.cookies_missatge a { color: var(--verd-fosc); text-decoration: underline; }
.cookies_barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; flex: 1 1 100%; }
.cookies_tipus { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-family: din_medium, sans-serif; color: var(--verd-fosc); }
.cookies_tipus label { white-space: nowrap; cursor: pointer; }
.cookies_tipus input { margin-right: 6px; accent-color: var(--verd-fosc); vertical-align: middle; }
.cookies_detalls_boto { padding: 0; border: 0; background: none; font: inherit; color: var(--verd-fosc); text-decoration: underline; cursor: pointer; }
.cookies_detalls { display: flex; flex-wrap: wrap; gap: 12px 24px; flex: 1 1 100%; max-height: 200px; overflow: auto; padding: 12px 16px; background: var(--blanc); border: 1px solid var(--verd-linia); border-radius: var(--radi); }
.cookies_detall { flex: 1 1 280px; }
.cookies_detall strong { font-family: din_medium, sans-serif; color: var(--verd-fosc); }
.cookies_detall p { margin-top: 4px; color: var(--text-gris); }
.cookies_botons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; flex: 1 1 100%; }
.cookies_botons .boto { background: var(--blanc); color: var(--verd-fosc); border: 1px solid var(--verd-fosc); }
.cookies_botons .boto.boto_destacat { background: var(--verd-fosc); color: var(--blanc); }
.cookies_botons .boto:hover { background: var(--verd-menu-hover); }
.cookies_botons .boto.boto_destacat:hover { background: #17401c; }
@media (max-width: 600px) { .cookies_botons .boto { flex: 1 1 100%; } #msg_cookies_fbox { max-height: 85vh; overflow: auto; } }

/* MAPA WEB */
.mapa_web ul { list-style: none; }
.mapa_web .mapa_nivell_1 > li { margin-bottom: 14px; }
.mapa_web .mapa_nivell_1 > li > a { font-family: din_medium, sans-serif; font-weight: bold; }
.mapa_web .mapa_nivell > li > .mapa_nivell { padding-left: 18px; }
.mapa_web a { color: var(--text); }
.mapa_web a:hover { text-decoration: underline; }

/* PAGINADOR */
.paginar { display: flex; justify-content: flex-end; gap: 4px; }
.paginar .page { padding: 2px 7px; color: var(--verd-llegat); background-color: var(--blanc); border-radius: 3px; }
.paginar .pag_selected, .paginar a.page:hover { color: var(--blanc); background-color: var(--verd-llegat); }

/* NOTICIES (lateral) */
.noticies { width: 260px; max-width: 100%; margin: 24px 0 0 10px; font-size: 12px; background-color: var(--verd-bloc); border-radius: var(--radi); }
.noticia { padding: 15px; }
.noticia + .noticia { border-top: 1px solid #9fc9a4; }
.noticia a { display: block; padding: 15px 10px; color: var(--text); }
.noticia .titol { display: block; font-family: din_medium, sans-serif; color: #143418; }
.noticia .data { display: block; font-family: din_light, sans-serif; color: var(--verd-data); }

/* HOME */
.home_banner { display: flex; align-items: flex-end; min-height: 240px; border: 5px solid var(--blanc); background: url("../img/img_home.jpg") center / cover; }
.home_titulars { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 0 0 28px 15px; }
.titulars_home { min-height: 26px; line-height: 26px; padding: 0 12px; font-family: din_bold, sans-serif; font-size: 24px; color: #343434; background: #e9e9e9 url("../img/deg_titols_home.jpg") repeat-x; }
.home_text { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 30px 20px; }
.home_text .descripcio { flex: 1 1 320px; max-width: 675px; font-family: din_medium, sans-serif; font-size: 20px; color: #1c1c1c; }

/* PEU */
#peu { width: 100%; padding: 55px 0 20px 0; background: url("../img/bg_peu.jpg") repeat-x; }
#peu, #peu a { color: var(--text-menu); }
#peu a:hover { border-bottom: 1px solid #569a5e; }
.peu_dades { display: flex; flex-wrap: wrap; row-gap: 20px; padding-bottom: 15px; border-bottom: 1px solid #cce1ce; }
.peu_dades .adreca { width: 190px; margin-left: 10px; }
.peu_dades .contacte { width: 195px; }
.peu_dades .segell { flex: 0 1 352px; min-width: 0; margin-left: auto; }
.peu_legal { display: flex; justify-content: flex-end; gap: 6px; margin-top: 5px; }
#menu_peu { list-style: none; text-transform: uppercase; width: 170px; }
#menu_peu li a { font-size: 15px; color: var(--text-menu); }
#menu_peu li a:hover { font-family: din_medium, sans-serif; border-bottom: none; }