/* --- ESTILOS AISLADOS (Solo aplican dentro de #widget-mapa-barris) --- */ #widget-mapa-barris { font-family: 'Source Sans Pro', Arial, sans-serif; box-sizing: border-box; } #widget-mapa-barris * { box-sizing: border-box; } #widget-mapa-barris .container-district-header { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2em; margin-bottom: 2rem; } #widget-mapa-barris .map-title { text-align: center; } #widget-mapa-barris .map-title h1 { color: #424242; font-size: 40px; font-weight: 700; margin: 0 0 0.5em 0; /* Reseteamos el margen por si la web lo cambia */ line-height: 1.2; } #widget-mapa-barris .map-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 3em; margin-bottom: 3rem; align-items: flex-start; } #widget-mapa-barris .district-wrapper { display: flex; flex-direction: column; width: 118px; cursor: pointer; gap: 8px; outline: none; margin: 0; padding: 0; } #widget-mapa-barris .district-wrapper:focus-visible { outline: 2px dashed #E0004D; outline-offset: 4px; } #widget-mapa-barris .district-box { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 118px; height: 111px; background-color: #e2e8f0; color: #64748b; font-weight: 900; text-transform: uppercase; padding: 10px 10px 5px 10px; border-bottom: 6px solid #64748b; transition: all 0.15s ease-in-out; margin: 0; } #widget-mapa-barris .district-box span { display: block; line-height: 0.9; letter-spacing: -0.5px; margin: 0; padding: 0; } #widget-mapa-barris .box-size-m { font-size: 32px; } #widget-mapa-barris .box-size-s { font-size: 19px; } #widget-mapa-barris .box-size-xl { font-size: 48px; } #widget-mapa-barris .box-size-l { font-size: 38px; } #widget-mapa-barris .district-title { font-size: 14px; font-weight: bold; color: #333; line-height: 1.2; text-transform: uppercase; margin: 0; } #widget-mapa-barris .district-wrapper:hover .district-box, #widget-mapa-barris .district-wrapper:focus .district-box, #widget-mapa-barris .district-wrapper.active-hover .district-box { background-color: #E0004D; color: #ffffff; border-bottom-color: #E0004D; } #widget-mapa-barris .map-container { display: flex; justify-content: center; margin-top: 2rem; } #widget-mapa-barris svg#mapa-viladecans { max-width: 100%; height: auto; display: block; } #widget-mapa-barris #Fill-1, #widget-mapa-barris #Fill-12, #widget-mapa-barris #Fill-22, #widget-mapa-barris #Fill-24, #widget-mapa-barris #Fill-11, #widget-mapa-barris #Fill-10 { cursor: pointer; transition: fill 0.25s ease; }

Participa al teu barri!

CAN SEL LARÈS

CAN SELLARÈS

MONT SERRA TINA MAS RATÈS

MONTSERRATINA I
MAS RATÈS

SA LES

SALES

LLE VANT

LLEVANT

ALBA ROSA

ALBA-ROSA

document.addEventListener("DOMContentLoaded", () => { const groups = [ { polygonIds: ["Fill-1"], color: "#E0004D", url: "/assemblies/forumbarricansellares", boxId: "box-first" }, { polygonIds: ["Fill-22", "Fill-24"], color: "#E0004D", url: "/assemblies/forumbarrimontserratina", boxId: "box-second" }, { polygonIds: ["Fill-12"], color: "#E0004D", url: "/assemblies/forumbarrisales", boxId: "box-third" }, { polygonIds: ["Fill-11"], color: "#E0004D", url: "/assemblies/forumbarrillevant", boxId: "box-fourth" }, { polygonIds: ["Fill-10"], color: "#E0004D", url: "/assemblies/forumbarrialbarosa", boxId: "box-fifth" } ]; groups.forEach(group => { const wrapper = document.getElementById(group.boxId); const polygons = group.polygonIds.map(id => document.getElementById(id)).filter(Boolean); const activate = () => { polygons.forEach(p => p.style.fill = group.color); if (wrapper) wrapper.classList.add("active-hover"); }; const deactivate = () => { polygons.forEach(p => p.style.fill = ""); if (wrapper) wrapper.classList.remove("active-hover"); }; if (wrapper) { wrapper.addEventListener("mouseenter", activate); wrapper.addEventListener("mouseleave", deactivate); wrapper.addEventListener("click", () => window.location.href = group.url); wrapper.addEventListener("focus", activate); wrapper.addEventListener("blur", deactivate); wrapper.addEventListener("keydown", (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); window.location.href = group.url; } }); } polygons.forEach(polygon => { polygon.addEventListener("mouseenter", activate); polygon.addEventListener("mouseleave", deactivate); polygon.addEventListener("click", () => window.location.href = group.url); }); }); });