<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tercer Kilometro</title>
    <link rel="icon" href="images/zoom_icon.jpg">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- WaveSurfer.js -->
    <script src="https://unpkg.com/wavesurfer.js"></script>
</head>
<style>
body{
    font-family: 'Times New Roman', Times, serif;
    background-image: url(/images/DSC_0194.JPG);   
    background-size: cover;
    background-repeat: no-repeat;  /* Sin repetición */
    background-attachment: fixed;  /* Lo importante: fondo fijo */
    margin: 0;
    width: 100vw;
    height: 100vh;             
}
/*Titulo*/
h1 {
    color: rgb(244, 244, 244);
    font-size: xx-large;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 15px 50px;
    border: 1px solid rgb(244, 244, 244);
}
/*Barra de Navegación*/
.nav {
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid rgb(244, 244, 244);
}
.nav__list{
    margin: 0;
    display: flex;
    list-style: none;
}
.nav__item {
    display: inline-block;
}
.nav__link{
    color: #F4F4F4;
    font-size: larger;
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px;
}
.nav__link--right {
    margin-left: auto;
    margin-right: 40px;
}
.nav__link:hover{
    background-color: rgb(244, 244, 244);
    color: rgba(0, 0, 0, 0.933);
}

/*Reproductor de Audio*/
#audio-player {
    margin: 0;
    padding: 20px;
    border: 1px solid rgb(244, 244, 244);
    background: rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
}
#waveform {
    color: rgba(0, 0, 0, 0.8);
    width: 100%;
    margin: auto;
}
.controls {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 28%;
    padding: 10px;
    margin: auto;
}
.play-btn {
    background: none;
    padding: 10px;
    cursor: pointer;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.play-btn:hover {
    background: rgb(244, 244, 244);
}
.play-btn svg {
    transition: transform 0.2s ease;
}
.icon-p {
    fill: #F4F4F4;
    transition: transform 0.2s ease;
}
.icon-p:hover {
    transform: scale(1.2);
    fill: rgba(0, 0, 0, 0.933);
}
.volume-bar {
    width: 200px;   /* ancho deseado */
    height: 5px;   /* altura deseada */
    background-color: rgb(154, 154, 154);  /* color de fondo (barra vacía) */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}
.volumeFill {
    background-color: rgba(159, 228, 255, 0.933);  /* Cambia este color al que prefieras */
    height: 100%;
    width: 0; /* Se controla desde JS */
    -webkit-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
    transition: width 0.3s ease;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.time {
    font-size: 0.85em;
    text-align: right;
    color: rgb(244, 244, 244) ;
    background-color: none;
}


/*Playlist*/
.playlist-box {
    border: 1px solid rgb(244, 244, 244);
    background-color: rgba(0, 0, 0, 0.8);
    text-align: center;
    position: relative;
}
.playlist__title {
    font-size: 1.8em;
    font-weight: bold;
    color: rgb(244, 244, 244);
}
.playlist {
    list-style: none;
    padding: 0;
    margin: auto;
    margin-top: 50px;
}
.playlist li {
    cursor: pointer;
    padding: 10px 70px;
    border-top: 4px solid rgb(204, 204, 204);
    background-color: rgb(30, 30, 30);
    color: rgb(244, 244, 244);
    font-size: 1em;
    transition: 0.3s;
    display: inline-block;
}

.playlist li:hover {
    background-color: rgb(51, 51, 51);
}
.playlist li.active {
    background-color: rgb(142, 142, 142);
    color: rgb(255, 255, 255);
    font-weight: bold;
}

/*Contenido e información*/
.content-point{
    position: relative;
    box-sizing: border-box;
    margin: auto;
}
.point-box {
    width: 100%;
    max-width: 580px;
    background-color: rgba(244, 244, 244, 0.89);
    border: 1px solid rgb(255, 255, 255);
    box-shadow: 4px 4px 10px rgb(0, 0, 0);
    color: rgb(0, 0, 0);
    padding: 20px;
    margin: 15px 0 0 30px;
    position: relative;
    box-sizing: border-box;
}
.point__title {
    font-size: 1.8em;
    font-weight: bold;
    box-sizing: border-box;
}
.point__text {
    font-size: 1.4em;
    text-align: justify;
    box-sizing: border-box;
}
/*Galeria*/
.img-box{
    width: 100%;
    max-width: 650px;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    margin: 10px;
    margin-top: 50px;
}
.img__button {
    margin: 10px;
    width: 100px;
    height: 40px;
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid rgb(255, 255, 255);
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    position: relative;
}
.galeria-img {
    border: 1px solid rgb(255, 255, 255);
    box-shadow: 4px 4px 10px rgb(0, 0, 0);
}
/*Mapa*/
.mapa-box {
    width: 100%;
    max-width: 600px;
    text-align: center;
    padding: 20px;
    box-sizing: content-box;
    position: absolute;
    right: 2%;
    top: 0%;
}
.mapa {
    width: 500px;
    height: 500px;
    margin: auto;
    box-shadow: 4px 4px 10px rgb(0, 0, 0);
    border-radius: 10px;
}
.mapa__title {
    width: 200px;
    margin: auto;
    color: #F4F4F4;
    font-size: 1.3em;
    margin-bottom: 20px;
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid rgb(255, 255, 255);
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.933);
    border-radius: 10px;
}

/* Contenedor lateral */
.sidebar {
    position:absolute;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 950px;
    background-color: rgb(255, 255, 255);
    transition: width 0.5s ease;
    overflow: hidden;
    z-index: 1000;
    cursor: pointer;
    border-bottom-left-radius: 20px;
}
/* Al hacer hover, se expande */
.sidebar:hover {
    width: 600px; /* tamaño del mapa + margen */
}
.map_title_slide {
    writing-mode: vertical-rl;
    background-color: rgb(255, 255, 255);
    text-align: center;
    color: rgb(0, 0, 0);
    padding: 20px 5px;
    margin: 10px;
    z-index: 2000;
}
/* Mapa interactivo */
#mapa_int {
    display: flex;
    width: 100%;
    max-width: 410px;
    margin: auto;
    flex: 1 1 300px; /* ocupa espacio flexible */
    aspect-ratio: 1/2; /* mantiene proporción */
    background: url(Ruta_fix.jpg) no-repeat center center;
    background-size: cover;
    position:relative;
    z-index: 50;
    border-radius: 20px;
}

/* Puntos en el mapa */
.punto {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: rgb(255, 0, 0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.punto:hover {
    background-color: rgb(3, 255, 251);
    transition: background-color 0.2s;
}

/* Posiciones relativas al tamaño del mapa (en %) */
.punto1  { bottom: 7%;  left: 13%;  }
.punto2  { bottom: 14%; left: 12%;  }
.punto3  { bottom: 21%; left: 16%;  }
.punto4  { bottom: 25%; left:  8%;  }
.punto5  { bottom: 24%; left: 28%;  }
.punto6  { bottom: 33%; left: 38%;  }
.punto7  { bottom: 45%; left: 50%;  }
.punto8  { bottom: 52%; right: 18%; }
.punto9  { bottom: 59%; right:  8%; }
.punto10 { bottom: 61%; right: 20%; }
.punto11 { bottom: 67%; right: 32%; }
.punto12 { bottom: 76%; right: 52%; }
.punto13 { bottom: 73%; left:  28%; }

/*Mobiles*/
@media (max-width: 768px) {
    h1 {
        font-size: 1.5rem;
        text-align: center;
    }

    .nav__link--right {
        margin-left: 0;
        margin-right: 0;
    }

    .nav__list {
        flex-direction: column;
        align-items: left;}
        
    .nav__item {
        border: 1px solid rgb(244, 244, 244);
        margin: 0;
    }

    .controls {
        width: 90%;
    }
    
    .playlist li{
        width: 60%;
        flex-direction: column;
        margin: auto;
    }
    .content-point {
        width: 80%;
        margin-left: 0%;
        margin: auto;
        flex-direction: column;
        align-items: center;
    }
    .point-box{
        margin: auto;
        margin-top: 20px;
    }
    .mapa-box {
        width: 90%;
        right: 0%;
        top: 0%;
        position: relative;
        margin: 0 0;
        margin-top: 20px;
    }
    .mapa {
        margin: auto;
        width: 100%;
        height: 400px;
    }
    .video-box{
        margin-top: 20px;
        width: 100%;
        margin: auto;
    }
    .botones{
        margin-bottom: 50px;
    }
    #galeria-video{
        width: 100%;
    }
    
    /* Contenedor lateral */
    .sidebar {
        position:relative;
        top: 0px;
        right: 0px;
        width: 100%;
        height: auto;
        padding-bottom: 5%;
        margin: auto;
        background-color: transparent;
        transition: width 0.5s ease;
        overflow: visible;
        cursor: auto;
        border-radius: 20px;
    }
    .map_title_slide {
        writing-mode: horizontal-tb;
        width: 200px;
        margin: auto;
        margin-bottom: 20px;
        color: #F4F4F4;
        font-size: 1.3em;
        background-color: transparent;
        color: rgb(255, 255, 255);
        padding: 5px 0;
        background-color: rgba(0, 0, 0, 0.8);
        border: 1px solid rgb(255, 255, 255);
        text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.933);
        border-radius: 10px;
    }
    #mapa_int {
    display: relative;
    width: 90%;
    left: 0%;
}
.sidebar:hover {
    width: 100%; /* tamaño del mapa + margen */
}

}

@media (max-width: 480px) {
    .box__text {
        font-size: 1rem;
    }
}
</style>
<body id="body_p7">
    <!--Titulo-->
    <h1>Paisaje Sonoro: Parque Nacional Cerro Castillo</h1>

    <!--Barra Navegación-->
    <nav class="nav">
        <ul class="nav__list">
            <li class="nav__item"><a href="index.html" class="nav__link">Inicio</a></li>
            <li class="nav__item"><a href="audio-archive.html" class="nav__link">Recorrido Sonoro</a></li>
            <li class="nav__item"><a href="gallery.html" class="nav__link">Galería</a></li>
            <li class="nav__item nav__link--right"><a href="about.html" class="nav__link">About</a></li>
        </ul>
    </nav>

    <!--Lista de reproducción-->
    <div class="playlist-box">
        <h3 class="playlist__title">Punto 7: Camino Empinado: Tercer Kilometro</h3>
        <ul id="playlist" class="playlist">
            <li data-src="mp3/CC_018 - 3Km.mp3">Registro 01</li>
            <li data-src="mp3/CC_019 - 3Km.mp3">Registro 02</li>
            <li data-src="mp3/CC_020 - 3Km.mp3">Registro 03</li>
            <li data-src="mp3/CC_021 - 3Km.mp3">Registro 04</li>
        </ul>
    </div>

    <!--Reproductor WaveSurfer.js-->
    <div id="audio-player">
        <div id="waveform"></div>
        <div class="controls">
            <button id="playPause" class="play-btn" aria-label="Reproducir">
                <svg id="icon" class="icon-p" width="20px" height="20px" viewBox="0 0 24 24" fill="#F4F4F4"><path d="M8 5v14l11-7z"/></svg>
            </button>
            <div class="volume-container" style="display: flex; align-items: center; gap: 8px;"></div>
        <svg id="volumeIcon" width="24" height="24" viewBox="0 0 24 24" fill="#F4F4F4" xmlns="http://www.w3.org/2000/svg" style="cursor:pointer;">
            <path id="volPath" d="M3 9v6h4l5 5V4L7 9H3z"/>
            <path id="volWave" d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.06c1.48-.74 2.5-2.26 2.5-4.03z"/>
        </svg>
            <div class="volume-bar" id="volumeBar">
                <div id="volumeFill" class="volumeFill"></div>
            </div>
            <div class="time">
                <span id="currentTime">0:00</span> / <span id="totalTime">0:00<span>
            </div>
        </div>
    </div>

    <!--Contenido e información-->
    <div class="content-point">
        <div class="point-box">
            <h3 class="point__title">Descripción</h3>
            <p class="point__text">
                Posterior a la salida del bosque, el camino comienza a tener una pendiente considerablemente pronunciada, la cual se prolonga al resto del tramo. En cuanto a la vegetación, se encuentran arboles de lenga, además de otras variantes, en menor medida que el bosque y una alta presencia de arbustos.
            </p>
        </div>
        <!--Mapa-->
        <div class="mapa-box">
            <h3 class="mapa__title">Ubicación</h3>
            <iframe class="mapa" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"
            src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d2864.1263353574536!2d-72.1892469878451!3d-46.093885150857055!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zNDbCsDA1JzM4LjAiUyA3MsKwMTEnMTIuMCJX!5e1!3m2!1ses-419!2scl!4v1750624774627!5m2!1ses-419!2scl"  width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
            </iframe>
        </div>
        <!--Java imagen-->
        <div class="img-box">
            <h3 class="mapa__title">Fotos</h3>
            <img id="galeria-img" src="/images/IMG_0600.jpeg" alt="Galería" width="500" class="galeria-img">
            <div class="botones">
                <button onclick="anterior()" class="img__button">⬅</button>
                <button onclick="siguiente()" class="img__button">➡</button>
            </div>
        </div>
            <!--Slide Map-->
        <div class="sidebar parallax2">
            <h2 class="map_title_slide ">Mapa</h2>
            <div id="mapa_int">
                <a href="punto01" class="punto punto1" title="Punto 1"></a>
                <a href="punto02" class="punto punto2" title="Punto 2"></a>
                <a href="punto03" class="punto punto3" title="Punto 3"></a>
                <a href="punto04" class="punto punto4" title="Punto 4"></a>        
                <a href="punto05" class="punto punto5" title="Punto 5"></a>
                <a href="punto06" class="punto punto6" title="Punto 6"></a>
                <a href="punto07" class="punto punto7" title="Punto 7"></a>
                <a href="punto08" class="punto punto8" title="Punto 8"></a>
                <a href="punto09" class="punto punto9" title="Punto 9"></a>
                <a href="punto10" class="punto punto10" title="Punto 10"></a>
                <a href="punto11" class="punto punto11" title="Punto 11"></a>
                <a href="punto12" class="punto punto12" title="Punto 12"></a>
                <a href="punto13" class="punto punto13" title="Punto 13"></a>
            </div>
        </div>
    </div>

    <!--Script imagen-->
    <script>
        const imagenes = ["/images/IMG_0600.jpeg", "/images/IMG_0601.jpeg", "/images/IMG_0602.jpeg"]; 
        let indice = 0;
        function mostrarImagen() {
        const img = document.getElementById('galeria-img');
        img.src = imagenes[indice];
        }
        function siguiente() {
        indice = (indice + 1) % imagenes.length; 
        mostrarImagen();
        }
        function anterior() {
        indice = (indice - 1 + imagenes.length) % imagenes.length; 
        mostrarImagen();
        }
    </script>

    <!-- Wavesurfer y control de audio -->
    <script>
        const wavesurfer = WaveSurfer.create({
            container: '#waveform',
            waveColor: '#283337ee',
            progressColor: '#9fe4ffee',
            cursorColor: '#F4F4F4',
            height: 200,
            responsive: true,
            barWidth: 2,
        });

        const playBtn = document.getElementById('playPause');
        const icon = playBtn.querySelector('svg');
        const volumeBar = document.getElementById('volumeBar');
        const volumeFill = document.getElementById('volumeFill');
        const currentTime = document.getElementById('currentTime');
        const totalTime = document.getElementById('totalTime');
        const volumeIcon = document.getElementById('volumeIcon');
        const volPath = document.getElementById('volPath');
        const volWave = document.getElementById('volWave');
        const playlist = document.getElementById('playlist');
        const tracks = playlist.querySelectorAll('li');

        let isMuted = false;
        let lastVolume = 1;
        let isDragging = false;
        let currentTrack = 0;

        function formatTime(seconds) {
            const mins = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60).toString().padStart(2, '0');
            return `${mins}:${secs}`;
        }

        function setVolumeFromEvent(e) {
            const rect = volumeBar.getBoundingClientRect();
            let x = e.clientX - rect.left;
            x = Math.max(0, Math.min(x, rect.width));
            const percent = x / rect.width;
            wavesurfer.setVolume(percent);
            volumeFill.style.width = `${percent * 100}%`;
            isMuted = percent === 0;
        }

        function loadTrack(index) {
            const src = tracks[index].getAttribute('data-src');
            wavesurfer.load(src);
            tracks.forEach((track, i) => {
                track.classList.toggle('active', i === index);
            });
            currentTrack = index;
        }

        loadTrack(currentTrack);

        //Play/Pause 
        playBtn.addEventListener('click', () => wavesurfer.playPause());
        wavesurfer.on('play', () => {
        icon.innerHTML = '<path d="M6 5h4v14H6zm8 0h4v14h-4z"/>';
        });
        wavesurfer.on('pause', () => {
        icon.innerHTML = '<path d="M8 5v14l11-7z"/>';
        });
        wavesurfer.on('ready', () => {
        totalTime.textContent = formatTime(wavesurfer.getDuration());
        });
        wavesurfer.on('audioprocess', () => {
        currentTime.textContent = formatTime(wavesurfer.getCurrentTime());
        });
        wavesurfer.on('finish', () => {
        if (currentTrack + 1 < tracks.length) {
            loadTrack(currentTrack + 1);
            wavesurfer.once('ready', () => wavesurfer.play());
        }
        });

        // Control de Volumen Slide
        volumeBar.addEventListener('mousedown', (e) => {
        isDragging = true;
        setVolumeFromEvent(e);
        });

        window.addEventListener('mouseup', () => isDragging = false);
        window.addEventListener('mousemove', (e) => {
        if (isDragging) setVolumeFromEvent(e);
        });

        volumeIcon.addEventListener('click', () => {
        if (!isMuted) {
            lastVolume = wavesurfer.getVolume();
            wavesurfer.setVolume(0);
            volumeFill.style.width = '0%';
            isMuted = true;
            volPath.setAttribute('d', 'M16 7L14.59 8.41 18.17 12...');
            volWave.style.display = 'none';
            volumeIcon.setAttribute('aria-label', 'Volumen apagado');
        } else {
            wavesurfer.setVolume(lastVolume);
            volumeFill.style.width = `${lastVolume * 100}%`;
            isMuted = false;
            volPath.setAttribute('d', 'M3 9v6h4l5 5V4L7 9H3z');
            volWave.style.display = 'block';
            volumeIcon.setAttribute('aria-label', 'Volumen alto');
        }
        });

        // Volumen inicial
        wavesurfer.setVolume(1);
        volumeFill.style.width = '100%';

        // Clic en elementos de la playlist
            tracks.forEach((track, index) => {
                track.addEventListener('click', () => loadTrack(index));
            });
    </script>

    <!--Scroll Animación Parallax-->
    <script>
        window.addEventListener('scroll', () => {
        const scrolled = window.scrollY;
        document.querySelectorAll('.parallax').forEach(el => {
            el.style.transform = `translateY(${scrolled * 0.3}px)`;
        });
        });
    </script>
</body>
</html>