XLI Caminada Popular Nit de Sant Bonós 2026 còpia2

[[[<!-- STREAMING_CHUNK: Definint les capes de fons dinàmiques per a l'efecte de scroll -->
<div class="fons-fusions-global">
<div class="capa-foto activa" style="background-image: url('/oiapdocs.nsf/14fbe7c612d4ef45c12579b1003dd6db/5ce13d02c5a86b16c1257f5700334437/$FILE/3arcs.png');"></div>
<div class="capa-foto" style="background-image: url('/oiapdocs.nsf/14fbe7c612d4ef45c12579b1003dd6db/5ce13d02c5a86b16c1257f5700334437/$FILE/4gegant.png');"></div>
<div class="capa-foto" style="background-image: url('/oiapdocs.nsf/14fbe7c612d4ef45c12579b1003dd6db/5ce13d02c5a86b16c1257f5700334437/$FILE/2noia.png');"></div>
<div class="capa-foto" style="background-image: url('/oiapdocs.nsf/14fbe7c612d4ef45c12579b1003dd6db/5ce13d02c5a86b16c1257f5700334437/$FILE/1xindria.png');"></div>
<div class="filtre-obscur-total"></div>
</div>

<!-- STREAMING_CHUNK: Inicialitzant el botó de menú superior dret -->
<div class="zona-superior-menu">
<button class="boto-menu" id="boto-obrir-menu-hamburguesa" aria-label="Obrir menú">
<span class="icona-hamburguesa">&#9776;</span>
</button>
</div>

<nav class="menu-lateral" id="panell-menu-lateral">
<button class="boto-tancar" id="boto-tancar-menu-lateral" aria-label="Tancar menú">&times;</button>
<ul class="enllaços-menu">
<li><a href="#inici">Inici</a></li>
<li><a href="#recorregut">Recorregut</a></li>
<li><a href="#inscripcions">Inscripcions</a></li>
<li><a href="#reglament">Reglament</a></li>
</ul>
</nav>

<!-- STREAMING_CHUNK: Creant el contenidor principal de seccions de text -->
<div class="pantalla-completa-container">

<!-- Secció 1: Hero / Inici (FORÇADA BEN A DALT) -->
<section class="seccio-text" id="inici" data-foto="0">
<div class="centrador-contingut">
<!-- Contenidor gegant per al logo oficial de la marxa -->
<div class="contenidor-logo-central">
<img id="logo-oficial-marxa" src="/oiapdocs.nsf/14fbe7c612d4ef45c12579b1003dd6db/5ce13d02c5a86b16c1257f5700334437/$FILE/WhatsApp%20Image%202026-07-10%20at%2021.21.13.jpeg" alt="Logo Nit de Sant Bonós" class="logo-principal-centrat">
</div>

<a href="#inscripcions" class="btn-inscripcio">Inscriu-t'hi ara</a>
</div>
</section>

<!-- Secció 2: Recorregut -->
<section class="seccio-text" id="recorregut" data-foto="1">
<div class="centrador-contingut contingut-ajustat-mapa">
<span class="icona-gran">🗺️</span>
<h2 class="titol-seccio">Recorregut Oficial</h2>
<p class="text-seccio">Un circuit totalment urbà i accessible per gaudir en família, corrent o caminant sota els estels pels carrers de c. Fes clic al mapa per ampliar-lo.</p>

<div class="contenidor-mapa-jpg" id="mapa-clicable-zoom">
<img src="/oiapdocs.nsf/14fbe7c612d4ef45c12579b1003dd6db/5ce13d02c5a86b16c1257f5700334437/$FILE/recorregut.jpg" alt="Mapa del Recorregut" class="imatge-mapa-ruta">
</div>
</div>
</section>

<!-- STREAMING_CHUNK: Creant les seccions d'inscripcions i reglament final -->
<section class="seccio-text" id="inscripcions" data-foto="2">
<div class="centrador-contingut">
<span class="icona-gran">👕</span>
<h2 class="titol-seccio">Inscripcions i Camiseta</h2>
<p class="text-seccio">El gran element col·leccionable d'aquesta edició especial. Assegura la teva talla realitzant la teva inscripció oficial a temps a través de la plataforma municipal.</p>
<div style="margin-top: 2rem;">
<a href="#" class="btn-inscripcio">Anar al formulari d'inscripció</a>
</div>
</div>
</section>

<section class="seccio-text" id="reglament" data-foto="3">
<div class="centrador-contingut">
<span class="icona-gran">🍉</span>
<h2 class="titol-seccio">Reglament i Avituallament</h2>
<p class="text-seccio">Aigua, fruita i la tradicional i merescuda síndria en arribar a la meta. L'esdeveniment és obert a tothom i cal respectar les indicacions del personal del circuit i gaudir de la festa de l'estiu.</p>
</div>
</section>

</div>

<!-- STREAMING_CHUNK: Estilant els elements i forçant el comportament responsiu adaptatiu mòbil -->
<style>
html, body {
overflow-y: auto !important;
overflow-x: hidden !important;
height: auto !important;
background-color: #0b0f19 !important;
}

.pantalla-completa-container {
position: relative !important;
width: 100% !important;
z-index: 1000 !important;
overflow: visible !important;
}

.pantalla-completa-container *,
.zona-superior-menu *,
.menu-lateral * {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
color: #ffffff !important;
box-sizing: border-box;
}

.fons-fusions-global {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 100 !important;
background-color: #0b0f19;
}

.capa-foto {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transition: opacity 0.8s ease-in-out !important;
}

.capa-foto.activa {
opacity: 1 !important;
}

.filtre-obscur-total {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(11, 15, 25, 0.65) 0%, rgba(11, 15, 25, 0.88) 100%) !important;
z-index: 2;
}

.seccio-text {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
position: relative;
z-index: 5;
}

/* POSICIONAMENT ALT I EXTREMADAMENT CONTROLAT PER A LA SECCIÓ D'INICI */
#inici {
align-items: flex-start !important; /* Mou el contingut cap a dalt de tot */
padding-top: 2vh !important; /* Mínim absolut per ordinador per aixecar-ho al màxim */
}

.centrador-contingut {
text-align: center;
max-width: 1100px !important; /* Ampliat per permetre una mida gegant */
width: 100%;
margin: 0 auto !important;
}

/* CONTENIDOR DEL LOGOTIP GEGANT */
.contenidor-logo-central {
margin: 0 auto 2.5rem auto !important; /* Lleugerament reduït a sota per apropar el botó grog */
display: flex !important;
justify-content: center !important;
align-items: center !important;
max-width: 1100px !important; /* Mida ampliada per al contenidor */
width: 100% !important;
}

.logo-principal-centrat {
width: 100% !important;
max-width: 1100px !important; /* Logotip en mida màxima imponent */
height: auto !important;
display: block !important;
opacity: 0;
transition: opacity 0.4s ease-in-out !important;
filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.95)) !important;
}

/* STREAMING_CHUNK: Estilant el recquadre del mapa del recorregut i el seu zoom ampliat */
.contenidor-mapa-jpg {
margin: 2rem auto 0 auto !important;
width: 500px !important;
max-width: 100% !important;
border: 3px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
background-color: rgba(11, 15, 25, 0.5);
cursor: zoom-in;
display: block !important;
line-height: 0 !important;
font-size: 0 !important;
padding: 0 !important;
}

.imatge-mapa-ruta {
width: 100% !important;
height: auto !important;
display: block !important;
vertical-align: bottom !important;
margin: 0 !important;
padding: 0 !important;
}

.contenidor-mapa-jpg.ampliat {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
max-width: 100vw !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
z-index: 9999999 !important;
background-color: rgba(7, 10, 17, 0.96) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: zoom-out;
}

.contenidor-mapa-jpg.ampliat .imatge-mapa-ruta {
max-width: 90vw !important;
max-height: 90vh !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
box-shadow: 0 15px 50px rgba(0,0,0,0.9);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
}

.btn-inscripcio {
display: inline-block !important;
background-color: #f39c12 !important;
color: #000000 !important;
padding: 1.1rem 3rem !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
text-decoration: none !important;
border-radius: 50px !important;
box-shadow: 0 4px 20px rgba(243, 156, 18, 0.5) !important;
transition: transform 0.2s ease;
}

.btn-inscripcio:hover {
transform: scale(1.03) !important;
}

.icona-gran { font-size: 3.5rem !important; margin-bottom: 0.5rem; display: inline-block; }
.titol-seccio { font-size: 2.5rem !important; margin-bottom: 1rem !important; font-weight: 700 !important; }
.text-seccio { font-size: 1.2rem !important; color: #e5e7eb !important; line-height: 1.6 !important; text-shadow: 0 2px 6px rgba(0,0,0,0.8) !important; }

/* MENU HAMBURGUESA */
.zona-superior-menu {
position: fixed !important;
top: 25px !important;
right: 25px !important;
z-index: 500000 !important;
}

.boto-menu {
background-color: #f39c12 !important;
border: none !important;
border-radius: 50% !important;
width: 50px !important;
height: 50px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
transition: transform 0.2s ease !important;
}

.boto-menu:hover { transform: scale(1.08) !important; }

.icona-hamburguesa {
font-size: 1.8rem !important;
color: #000000 !important;
font-weight: bold !important;
line-height: 1 !important;
}

.menu-lateral {
position: fixed !important;
top: 0 !important;
right: -360px !important;
width: 300px !important;
height: 100vh !important;
background-color: #0b0f19 !important;
border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
z-index: 600000 !important;
padding: 80px 40px !important;
transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease !important;
opacity: 0 !important;
}

.menu-lateral.obert {
right: 0 !important;
opacity: 1 !important;
box-shadow: -10px 0 30px rgba(0,0,0,0.7) !important;
}

.boto-tancar {
position: absolute !important;
top: 20px !important;
right: 25px !important;
background: transparent !important;
border: none !important;
font-size: 2.5rem !important;
color: #ffffff !important;
cursor: pointer !important;
}

.enllaços-menu { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.enllaços-menu li { margin-bottom: 2rem !important; }
.enllaços-menu a { font-size: 1.4rem !important; font-weight: 600 !important; text-decoration: none !important; color: #ffffff !important; display: block !important; transition: color 0.2s; }
.enllaços-menu a:hover { color: #f39c12 !important; }

/* STREAMING_CHUNK: Dissenyant els ajustos clau de tamany i alçada extrema per a pantalles mòbils */
@media (max-width: 768px) {
.menu-lateral { width: 100% !important; right: -100% !important; }
.contenidor-mapa-jpg { width: 100% !important; }

.logo-principal-centrat {
max-width: 100% !important;
width: 100% !important;
padding: 0 10px;
}

.contenidor-logo-central {
max-width: 100% !important;
margin-top: 0 !important;
margin-bottom: 2rem !important;
}

/* Puja la capçalera cap a dalt de tot de la pantalla i compacta la secció */
#inici {
padding-top: 15vh !important; /* Un xic més de marge en mòbils pel menú */
padding-left: 10px !important;
padding-right: 10px !important;
align-items: flex-start !important;
min-height: 85vh !important;
}
}
</style>

<!-- STREAMING_CHUNK: Programant la interacció dinàmica de l'aplicació i el processador d'imatges -->
<script>
window.addEventListener('DOMContentLoaded', () => {
const seccions = document.querySelectorAll('.seccio-text');
const fotos = document.querySelectorAll('.capa-foto');

const botoObrir = document.getElementById('boto-obrir-menu-hamburguesa');
const botoTancar = document.getElementById('boto-tancar-menu-lateral');
const panellMenu = document.getElementById('panell-menu-lateral');
const enllaços = document.querySelectorAll('.enllaços-menu a');

const mapaBox = document.getElementById('mapa-clicable-zoom');

// --- SISTEMA DEFINITIU D'EXTRACCIÓ DE FONS DE COLOR NEGRE ---
const logoImg = document.getElementById('logo-oficial-marxa');
if (logoImg) {
const tempImg = new Image();
tempImg.crossOrigin = "anonymous";
tempImg.src = logoImg.src;

tempImg.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = tempImg.naturalWidth;
canvas.height = tempImg.naturalHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(tempImg, 0, 0);

const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imgData.data;

const llindarBaix = 35;
const llindarAlt = 145;

for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i+1];
const b = data[i+2];

const brillantorMax = Math.max(r, g, b);

let opacitatAlpha = 0;
if (brillantorMax > llindarAlt) {
opacitatAlpha = 255;
} else if (brillantorMax > llindarBaix) {
opacitatAlpha = ((brillantorMax - llindarBaix) / (llindarAlt - llindarBaix)) * 255;
}

data[i+3] = opacitatAlpha;

if (opacitatAlpha > 0) {
const factorMultiplicador = 255 / (brillantorMax || 1);
data[i] = Math.min(255, r * factorMultiplicador);
data[i+1] = Math.min(255, g * factorMultiplicador);
data[i+2] = Math.min(255, b * factorMultiplicador);
}
}

ctx.putImageData(imgData, 0, 0);
logoImg.src = canvas.toDataURL('image/png');
logoImg.style.opacity = '1';
};
}

// --- CONTROLS DEL MENÚ ---
if(botoObrir && panellMenu) {
botoObrir.addEventListener('click', (e) => {
e.preventDefault();
panellMenu.classList.add('obert');
});
}

if(botoTancar && panellMenu) {
botoTancar.addEventListener('click', (e) => {
e.preventDefault();
panellMenu.classList.remove('obert');
});
}

enllaços.forEach(enllaç => {
enllaç.addEventListener('click', (e) => {
e.preventDefault();
panellMenu.classList.remove('obert');

const idDesti = enllaç.getAttribute('href');
const elementDesti = document.querySelector(idDesti);

if (elementDesti) {
window.scrollTo({
top: elementDesti.offsetTop,
behavior: 'smooth'
});
}
});
});

// --- ZOOM DEL MAPA ---
if(mapaBox) {
mapaBox.addEventListener('click', function(e) {
e.stopPropagation();
this.classList.toggle('ampliat');
});
}

window.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && mapaBox && mapaBox.classList.contains('ampliat')) {
mapaBox.classList.remove('ampliat');
}
});

// --- SISTEMA DE FUSION DE FONS (SCROLL) ---
window.addEventListener('scroll', () => {
let seccioActivaIndex = 0;
let menorDistancia = window.innerHeight;

seccions.forEach((seccio, index) => {
const box = seccio.getBoundingClientRect();
const distanciaAlCentre = Math.abs(box.top);

if (distanciaAlCentre < menorDistancia) {
menorDistancia = distanciaAlCentre;
seccioActivaIndex = index;
}
});

fotos.forEach((foto, index) => {
if (index === seccioActivaIndex) {
foto.classList.add('activa');
} else {
foto.classList.remove('activa');
}
});
});
});
</script>]]]