JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<div class="pasaje intro-pasaje"> <video class="visual-video" autoplay muted loop playsinline preload="auto" > <source src="https://video.wixstatic.com/video/642d9e_6fa4077338194ec389699eb5987ae326/720p/mp4/file.mp4" type="video/mp4"> </video> <div class="intro-atmosfera"></div> <!-- ================================================= CABECERA ================================================= --> <div class="intro-superior"> <div class="intro-cabecera-izquierda"> <button class="intro-menu-boton" aria-label="Abrir menú" aria-expanded="false"> <svg class="icono-menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linecap="square"> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> <div class="intro-proyecto">PERTURBACIONES</div> </div> <div class="intro-cabecera-derecha"> <div class="intro-seccion">INTRO</div> </div> </div> <!-- ================================================= MENÚ ================================================= --> <div class="intro-menu-panel"> <button class="intro-menu-cerrar" aria-label="Cerrar menú">×</button> <nav class="intro-menu-lista"> <a data-passage="INTRO">INTRO</a> <a data-passage="UMBRAL">01 — UMBRAL</a> <a data-passage="INMERSIÓN">02 — INMERSIÓN</a> <a data-passage="INTERFERENCIA">03 — INTERFERENCIA</a> <a data-passage="SATURACIÓN">04 — SATURACIÓN</a> <a data-passage="RETORNO">05 — RETORNO</a> <a data-passage="BUCLE">06 — BUCLE</a> </nav> </div> <!-- ================================================= TÍTULO Y FRASES ================================================= --> <div class="intro-centro"> <h1 class="intro-titulo">PERTURBACIONES</h1> </div> <div class="intro-frase intro-frase-izquierda">Lo que permanece,</div> <div class="intro-frase intro-frase-derecha">también se altera.</div> <!-- ================================================= INTERFAZ INFERIOR ================================================= --> <div class="intro-inferior"> <a class="intro-comenzar" data-passage="UMBRAL">COMENZAR →</a> </div> </div>
<div class="pasaje umbral-pasaje"> <!-- ================================================= INTERFAZ SUPERIOR ================================================= --> <div class="interfaz-superior"> <div class="cabecera-izquierda"> <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false"> <svg class="icono-menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linecap="square"> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> <span class="proyecto">PERTURBACIONES</span> </div> <div class="cabecera-derecha"> <span class="indice"> 01 / 12 </span> <span class="seccion"> UMBRAL </span> </div> </div> <!-- ================================================= MENÚ ================================================= --> <div class="menu-panel"> <button class="menu-cerrar" aria-label="Cerrar menú" > × </button> <nav class="menu-lista"> <a data-passage="INTRO"> INTRO </a> <a data-passage="UMBRAL"> 01 — UMBRAL </a> <a data-passage="INMERSIÓN"> 02 — INMERSIÓN </a> <a data-passage="INTERFERENCIA"> 03 — INTERFERENCIA </a> <a data-passage="SATURACIÓN"> 04 — SATURACIÓN </a> <a data-passage="RETORNO"> 05 — RETORNO </a> <a data-passage="BUCLE"> 06 — BUCLE </a> </nav> </div> <!-- ================================================= CONTENIDO — LECTURA EN Z ================================================= --> <div class="contenido-umbral"> <!-- BLOQUE 1 — ARRIBA / IZQUIERDA --> <div class="texto-umbral umbral-bloque-1"> <p> Hay lugares que parecen pedirnos que bajemos la voz. Entramos. El ruido de afuera queda un poco más lejos. </p> </div> <!-- BLOQUE 2 — ARRIBA / DERECHA --> <div class="texto-umbral umbral-bloque-2"> <p> El agua sigue su curso. Las hojas se mueven. </p> </div> <!-- BLOQUE 3 — ABAJO / IZQUIERDA --> <div class="texto-umbral umbral-bloque-3"> <p> Algo pasa entre los árboles. Por un momento, parece suficiente con estar aquí. Pero ¿qué significa entrar en un lugar sin llevarlo con nosotros? </p> </div> <!-- BLOQUE 4 — ABAJO / DERECHA --> <div class="texto-umbral umbral-bloque-4"> <p> ¿En qué momento comienza nuestra presencia? ¿Y cuándo deja de pertenecernos aquello que estamos mirando? </p> </div> </div> <!-- ================================================= INTERFAZ INFERIOR ================================================= --> <div class="interfaz-inferior"> <audio controls autoplay preload="metadata" src="https://static.wixstatic.com/mp3/642d9e_2ec1ad6f970e4157bab5d61208b78c8d.mp3" ></audio> <a class="continuar" data-passage="INMERSIÓN" > CONTINUAR → </a> </div> </div>
<div class="pasaje inmersion-pasaje"> <!-- ================================================= VIDEO DE FONDO ================================================= --> <video class="inmersion-video" autoplay loop playsinline preload="auto" > <!-- VIDEO PROVISIONAL --> <source src="https://video.wixstatic.com/video/642d9e_58dbae1552de4c359764235ff535a432/1080p/mp4/file.mp4" type="video/mp4" > </video> <!-- ================================================= INTERFAZ SUPERIOR ================================================= --> <div class="interfaz-superior"> <div class="cabecera-izquierda"> <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false" > <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false"> <!-- Nuevo icono de tres líneas (SVG) --> <svg class="icono-menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linecap="square"> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> </button> <span class="proyecto"> PERTURBACIONES </span> </div> <div class="cabecera-derecha"> <span class="indice"> 02 / 12 </span> <span class="seccion"> INMERSIÓN </span> </div> </div> <!-- ================================================= MENÚ ================================================= --> <div class="menu-panel"> <button class="menu-cerrar" aria-label="Cerrar menú" > × </button> <nav class="menu-lista"> <a data-passage="INTRO"> INTRO </a> <a data-passage="UMBRAL"> 01 — UMBRAL </a> <a data-passage="INMERSIÓN"> 02 — INMERSIÓN </a> <a data-passage="INTERFERENCIA"> 03 — INTERFERENCIA </a> <a data-passage="SATURACIÓN"> 04 — SATURACIÓN </a> <a data-passage="RETORNO"> 05 — RETORNO </a> <a data-passage="BUCLE"> 06 — BUCLE </a> </nav> </div> <!-- ================================================= TEXTO ================================================= --> <div class="inmersion-texto"> <p> Camino.<br> No busco nada en particular.<br> Miro.<br> Escucho.<br> Dejo que el lugar ocupe un poco de espacio dentro de mí.<br> Pero algo ya estaba sonando antes de llegar.<br> Un ruido que no pertenece a este lugar.<br> ¿Puede un paisaje permanecer silencioso cuando quien lo habita lleva ruido consigo? </p> </div> <!-- ================================================= INTERFAZ INFERIOR ================================================= --> <div class="inmersion-inferior"> <button class="inmersion-control" type="button" onclick=" const video = this.closest('.inmersion-pasaje').querySelector('.inmersion-video'); const icono = this.querySelector('.inmersion-icono'); if (video.paused) { video.play(); icono.textContent = '❚❚'; this.setAttribute('aria-label', 'Pausar video'); } else { video.pause(); icono.textContent = '▶'; this.setAttribute('aria-label', 'Reproducir video'); } " > <span class="inmersion-icono">❚❚</span> </button> <a class="continuar" data-passage="INTERFERENCIA" > CONTINUAR → </a> </div>
<div class="pasaje interferencia-pasaje"> <!-- ================================================= INTERFAZ SUPERIOR ================================================= --> <div class="interfaz-superior"> <div class="cabecera-izquierda"> <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false" > <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false"> <!-- Nuevo icono de tres líneas (SVG) --> <svg class="icono-menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linecap="square"> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> </button> <span class="proyecto"> PERTURBACIONES </span> </div> <div class="cabecera-derecha"> <span class="indice"> 03 / 12 </span> <span class="seccion"> INTERFERENCIA </span> </div> </div> <!-- ================================================= MENÚ ================================================= --> <div class="menu-panel"> <button class="menu-cerrar" aria-label="Cerrar menú" > × </button> <nav class="menu-lista"> <a data-passage="INTRO"> INTRO </a> <a data-passage="UMBRAL"> 01 — UMBRAL </a> <a data-passage="INMERSIÓN"> 02 — INMERSIÓN </a> <a data-passage="INTERFERENCIA"> 03 — INTERFERENCIA </a> <a data-passage="SATURACIÓN"> 04 — SATURACIÓN </a> <a data-passage="RETORNO"> 05 — RETORNO </a> <a data-passage="BUCLE"> 06 — BUCLE </a> </nav> </div> <!-- ================================================= CONTENIDO LECTURA EN Z ================================================= --> <div class="contenido-interferencia"> <!-- ================================================= BLOQUE 1 — ARRIBA / DERECHA ================================================= --> <div class="texto-interferencia interferencia-bloque-1"> <p> Algo cambia.<br> No sé si cambió el lugar.<br> O si cambió la manera de mirarlo.<br> La imagen permanece.<br> Pero algo la atraviesa.<br> Un sonido.<br> Una pulsación.<br> Una interrupción. </p> </div> <!-- ================================================= BLOQUE 2 — ABAJO / IZQUIERDA ================================================= --> <div class="texto-interferencia interferencia-bloque-2"> <p> Quizás siempre estuvo ahí.<br> Quizás apareció en mí.<br> ¿Es posible observar sin intervenir? </p> </div> </div> <!-- ================================================= INTERFAZ INFERIOR ================================================= --> <div class="interfaz-inferior"> <audio controls autoplay preload="metadata" src="https://static.wixstatic.com/mp3/642d9e_0760e48a2acb485f876da70a850059ae.mp3" ></audio> <a class="continuar" data-passage="SATURACIÓN" > CONTINUAR → </a> </div> </div>
<div class="pasaje saturacion-pasaje"> <!-- ================================================= VIDEO DE FONDO ================================================= --> <video class="saturacion-video" autoplay loop playsinline preload="auto" > <!-- VIDEO PROVISIONAL — REEMPLAZAR --> <source src="https://video.wixstatic.com/video/642d9e_cef41e81cac54c4e87d613bcaefa08aa/1080p/mp4/file.mp4" type="video/mp4" > </video> <!-- ================================================= INTERFAZ SUPERIOR ================================================= --> <div class="interfaz-superior"> <div class="cabecera-izquierda"> <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false" > <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false"> <!-- Nuevo icono de tres líneas (SVG) --> <svg class="icono-menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linecap="square"> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> </button> <span class="proyecto"> PERTURBACIONES </span> </div> <div class="cabecera-derecha"> <span class="indice"> 04 / 12 </span> <span class="seccion"> SATURACIÓN </span> </div> </div> <!-- ================================================= MENÚ ================================================= --> <div class="menu-panel"> <button class="menu-cerrar" aria-label="Cerrar menú" > × </button> <nav class="menu-lista"> <a data-passage="INTRO"> INTRO </a> <a data-passage="UMBRAL"> 01 — UMBRAL </a> <a data-passage="INMERSIÓN"> 02 — INMERSIÓN </a> <a data-passage="INTERFERENCIA"> 03 — INTERFERENCIA </a> <a data-passage="SATURACIÓN"> 04 — SATURACIÓN </a> <a data-passage="RETORNO"> 05 — RETORNO </a> <a data-passage="BUCLE"> 06 — BUCLE </a> </nav> </div> <!-- ================================================= TEXTO ================================================= --> <div class="saturacion-texto"> <p> Ahora ya no sé qué estoy escuchando.<br> El agua. Las hojas. Los pasos. La música. Mi propio ruido.<br> Todo comienza a ocupar el mismo espacio.<br> El paisaje se fragmenta.<br> O quizá soy yo quien se fragmenta frente a él.<br> Durante un instante, dejamos de ser dos cosas.<br> Hay un cuerpo dentro de otro cuerpo.<br> Una perturbación dentro de otra perturbación.<br> ¿Quién está transformando a quién? </p> </div> <!-- ================================================= INTERFAZ INFERIOR ================================================= --> <div class="saturacion-inferior"> <button class="saturacion-control" type="button" onclick=" const video = this.closest('.saturacion-pasaje').querySelector('.saturacion-video'); const icono = this.querySelector('.saturacion-icono'); if (video.paused) { video.play(); icono.textContent = '❚❚'; this.setAttribute('aria-label', 'Pausar video'); } else { video.pause(); icono.textContent = '▶'; this.setAttribute('aria-label', 'Reproducir video'); } " > <span class="saturacion-icono">❚❚</span> </button> <a class="continuar" data-passage="RETORNO" > CONTINUAR → </a> </div> </div>
<div class="pasaje retorno-pasaje"> <!-- ================================================= CAPA DE ANIMACIÓN INICIAL (Franjas Gigantes) ================================================= --> <div class="retorno-intro-overlay"> <div class="retorno-intro-franja retorno-intro-franja-superior"> <span class="retorno-intro-palabra">RETORNO RETORNO RETORNO RETORNO RETORNO</span> </div> <div class="retorno-intro-franja retorno-intro-franja-inferior"> <span class="retorno-intro-palabra">RETORNO RETORNO RETORNO RETORNO RETORNO</span> </div> </div> <!-- ================================================= INTERFAZ SUPERIOR ================================================= --> <div class="interfaz-superior"> <div class="cabecera-izquierda"> <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false"> <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false"> <!-- Nuevo icono de tres líneas (SVG) --> <svg class="icono-menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linecap="square"> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> </button> <span class="proyecto">PERTURBACIONES</span> </div> <div class="cabecera-derecha"> <span class="indice">05 / 12</span> <span class="seccion">RETORNO</span> </div> </div> <!-- ================================================= MENÚ ================================================= --> <div class="menu-panel"> <button class="menu-cerrar" aria-label="Cerrar menú">×</button> <nav class="menu-lista"> <a data-passage="INTRO">INTRO</a> <a data-passage="UMBRAL">01 — UMBRAL</a> <a data-passage="INMERSIÓN">02 — INMERSIÓN</a> <a data-passage="INTERFERENCIA">03 — INTERFERENCIA</a> <a data-passage="SATURACIÓN">04 — SATURACIÓN</a> <a data-passage="RETORNO">05 — RETORNO</a> <a data-passage="BUCLE">06 — BUCLE</a> </nav> </div> <!-- ================================================= PRIMER TEXTO ARRIBA DE LA CINTA / IZQUIERDA ================================================= --> <div class="retorno-texto retorno-texto-1"> <p> Y entonces, poco a poco, vuelve el silencio.<br> La música se aleja.<br> La imagen recupera su ritmo.<br> El agua sigue ahí.<br> Las hojas siguen moviéndose. </p> </div> <!-- ================================================= CINTA CENTRAL ESTÁTICA ================================================= --> <div class="retorno-cinta-contenedor"> <div class="retorno-cinta"> <span class="retorno-palabra retorno-difusa">RETORNO</span> <span class="retorno-separador">/</span> <span class="retorno-palabra retorno-central">RETORNO</span> <span class="retorno-separador">/</span> <span class="retorno-palabra retorno-difusa">RETORNO</span> </div> </div> <!-- ================================================= SEGUNDO TEXTO DEBAJO DE LA CINTA / DERECHA ================================================= --> <div class="retorno-texto retorno-texto-2"> <p> Nada parece haber cambiado.<br> Pero algo cambió.<br> Quizás el lugar. Quizás yo.<br> Quizás solamente la forma en que ahora lo escucho. </p> </div> <!-- ================================================= PREGUNTA ================================================= --> <div class="retorno-pregunta"> <p>¿Volver es regresar?</p> </div> <!-- ================================================= INTERFAZ INFERIOR ================================================= --> <div class="interfaz-inferior"> <audio controls autoplay preload="metadata" src="https://static.wixstatic.com/mp3/642d9e_5913ff0efdda425da76617a027995122.mp3"></audio> <a class="continuar" data-passage="BUCLE" > CONTINUAR → </a> </div> </div>
<div class="pasaje bucle-pasaje"> <!-- ================================================= VIDEO DE FONDO ================================================= --> <video class="bucle-video" autoplay loop playsinline preload="auto" > <!-- VIDEO PROVISIONAL --> <source src="https://video.wixstatic.com/video/642d9e_94b6153e40af4994b90d592b89193641/1080p/mp4/file.mp4" type="video/mp4" > </video> <!-- ================================================= INTERFAZ SUPERIOR ================================================= --> <div class="interfaz-superior"> <div class="cabecera-izquierda"> <div class="cabecera-izquierda"> <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false"> <svg class="icono-menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linecap="square"> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> <span class="proyecto">PERTURBACIONES</span> </div> <span class="proyecto"> PERTURBACIONES </span> </div> <div class="cabecera-derecha"> <span class="indice"> 06 / 12 </span> <span class="seccion"> BUCLE </span> </div> </div> <!-- ================================================= MENÚ ================================================= --> <div class="menu-panel"> <button class="menu-cerrar" aria-label="Cerrar menú" > × </button> <nav class="menu-lista"> <a data-passage="INTRO"> INTRO </a> <a data-passage="UMBRAL"> 01 — UMBRAL </a> <a data-passage="INMERSIÓN"> 02 — INMERSIÓN </a> <a data-passage="INTERFERENCIA"> 03 — INTERFERENCIA </a> <a data-passage="SATURACIÓN"> 04 — SATURACIÓN </a> <a data-passage="RETORNO"> 05 — RETORNO </a> <a data-passage="BUCLE"> 06 — BUCLE </a> </nav> </div> <!-- ================================================= TEXTO ================================================= --> <div class="bucle-texto"> <p> El lugar permanece.<br> Yo vuelvo a entrar.<br> Y algo vuelve a alterarse.<br> La calma no es la misma.<br> La perturbación tampoco.<br> Nunca hubo un principio.<br> Quizás tampoco hay un afuera.<br> Solo este movimiento:<br> entrar,<br> afectar,<br> ser afectado,<br> volver.<br> <strong>¿Qué ocurre si lo repetimos?</strong> </p> </div> <!-- ================================================= INTERFAZ INFERIOR ================================================= --> <div class="bucle-inferior"> <button class="bucle-control" type="button" onclick=" const video = this.closest('.bucle-pasaje').querySelector('.bucle-video'); const icono = this.querySelector('.bucle-icono'); if (video.paused) { video.play(); icono.textContent = '❚❚'; this.setAttribute('aria-label', 'Pausar video'); } else { video.pause(); icono.textContent = '▶'; this.setAttribute('aria-label', 'Reproducir video'); } " > <span class="bucle-icono">❚❚</span> </button> <a class="continuar" data-passage="UMBRAL-2" > CONTINUAR → </a> </div> </div>
<div class="pasaje umbral-pasaje umbral-2-pasaje"> <!-- ================================================= INTERFAZ SUPERIOR ================================================= --> <div class="interfaz-superior"> <div class="cabecera-izquierda"> <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false" > <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false"> <!-- Nuevo icono de tres líneas (SVG) --> <svg class="icono-menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linecap="square"> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> </button> <span class="proyecto"> PERTURBACIONES </span> </div> <div class="cabecera-derecha"> <span class="indice"> 07 / 12 </span> <span class="seccion"> UMBRAL </span> </div> </div> <!-- ================================================= MENÚ ================================================= --> <div class="menu-panel"> <button class="menu-cerrar" aria-label="Cerrar menú" > × </button> <nav class="menu-lista"> <a data-passage="INTRO"> INTRO </a> <a data-passage="UMBRAL-2"> 07 — UMBRAL </a> <a data-passage="INMERSION-2"> 08 — INMERSIÓN </a> <a data-passage="INTERFERENCIA-2"> 09 — INTERFERENCIA </a> <a data-passage="SATURACION-2"> 10 — SATURACIÓN </a> <a data-passage="RETORNO-2"> 11 — RETORNO </a> <a data-passage="BUCLE-2"> 12 — BUCLE </a> </nav> </div> <!-- ================================================= CONTENIDO — LECTURA EN Z ================================================= --> <div class="contenido-umbral"> <!-- BLOQUE 1 — ARRIBA / IZQUIERDA --> <div class="texto-umbral umbral-bloque-1"> <p> Siempre he estado aquí, pero cuando algo entra, algo cambia. </p> </div> <!-- BLOQUE 2 — ARRIBA / DERECHA --> <div class="texto-umbral umbral-bloque-2"> <p> Aunque el agua siga su curso. O las hojas se muevan. </p> </div> <!-- BLOQUE 3 — ABAJO / IZQUIERDA --> <div class="texto-umbral umbral-bloque-3"> <p> Algo pasa entre los árboles. Y por un momento, parece que nada necesita ser nombrado. Pero ¿qué queda de un lugar cuando alguien intenta conocerlo? </p> </div> <!-- BLOQUE 4 — ABAJO / DERECHA --> <div class="texto-umbral umbral-bloque-4"> <p> ¿Puede existir algo sin ser observado? ¿Y qué parte de aquello que creemos conocer alguna vez nos perteneció? </p> </div> </div> <!-- ================================================= INTERFAZ INFERIOR ================================================= --> <div class="interfaz-inferior"> <audio controls autoplay preload="metadata" src="https://static.wixstatic.com/mp3/642d9e_85b34bcaf4374bfc9f3e9beb881a6eae.mp3" ></audio> <a class="continuar" data-passage="INMERSION-2" > CONTINUAR → </a> </div> </div>
<div class="pasaje inmersion-pasaje inmersion-2-pasaje"> <!-- ================================================= VIDEO DE FONDO ================================================= --> <video class="inmersion-video" autoplay loop playsinline preload="auto" > <!-- VIDEO PROVISIONAL --> <source src="https://video.wixstatic.com/video/642d9e_acbce5da1e624dd589b60c082f2c441c/1080p/mp4/file.mp4" type="video/mp4" > </video> <!-- ================================================= INTERFAZ SUPERIOR ================================================= --> <div class="interfaz-superior"> <div class="cabecera-izquierda"> <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false" > <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false"> <!-- Nuevo icono de tres líneas (SVG) --> <svg class="icono-menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linecap="square"> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> </button> <span class="proyecto"> PERTURBACIONES </span> </div> <div class="cabecera-derecha"> <span class="indice"> 08 / 12 </span> <span class="seccion"> INMERSIÓN </span> </div> </div> <!-- ================================================= MENÚ ================================================= --> <div class="menu-panel"> <button class="menu-cerrar" aria-label="Cerrar menú" > × </button> <nav class="menu-lista"> <a data-passage="INTRO"> INTRO </a> <a data-passage="UMBRAL-2"> 07 — UMBRAL </a> <a data-passage="INMERSION-2"> 08 — INMERSIÓN </a> <a data-passage="INTERFERENCIA-2"> 09 — INTERFERENCIA </a> <a data-passage="SATURACION-2"> 10 — SATURACIÓN </a> <a data-passage="RETORNO-2"> 11 — RETORNO </a> <a data-passage="BUCLE-2"> 12 — BUCLE </a> </nav> </div> <!-- ================================================= TEXTO ================================================= --> <div class="inmersion-texto"> <p> He estado aquí todo este tiempo, con el anhelo de crecer. Me transformo. No siempre lo logro. Cambian los árboles. Algo se detiene. Algo se escucha. Hay cosas que pasan sin dejar rastro. Otras permanecen mucho después de haberse ido. ¿Es posible habitar sin dejar una huella? ¿En qué momento transformarse comienza a significar desaparecer? </p> </div> <!-- ================================================= INTERFAZ INFERIOR ================================================= --> <div class="inmersion-inferior"> <button class="inmersion-control" type="button" onclick=" const video = this.closest('.inmersion-pasaje').querySelector('.inmersion-video'); const icono = this.querySelector('.inmersion-icono'); if (video.paused) { video.play(); icono.textContent = '❚❚'; this.setAttribute('aria-label', 'Pausar video'); } else { video.pause(); icono.textContent = '▶'; this.setAttribute('aria-label', 'Reproducir video'); } " > <span class="inmersion-icono">❚❚</span> </button> <a class="continuar" data-passage="INTERFERENCIA-2" > CONTINUAR → </a> </div> </div>
<div class="pasaje interferencia-pasaje interferencia-2-pasaje"> <!-- ================================================= INTERFAZ SUPERIOR ================================================= --> <div class="interfaz-superior"> <div class="cabecera-izquierda"> <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false" > <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false"> <!-- Nuevo icono de tres líneas (SVG) --> <svg class="icono-menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linecap="square"> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> </button> <span class="proyecto"> PERTURBACIONES </span> </div> <div class="cabecera-derecha"> <span class="indice"> 09 / 12 </span> <span class="seccion"> INTERFERENCIA </span> </div> </div> <!-- ================================================= MENÚ ================================================= --> <div class="menu-panel"> <button class="menu-cerrar" aria-label="Cerrar menú" > × </button> <nav class="menu-lista"> <a data-passage="INTRO"> INTRO </a> <a data-passage="UMBRAL-2"> 07 — UMBRAL </a> <a data-passage="INMERSION-2"> 08 — INMERSIÓN </a> <a data-passage="INTERFERENCIA-2"> 09 — INTERFERENCIA </a> <a data-passage="SATURACION-2"> 10 — SATURACIÓN </a> <a data-passage="RETORNO-2"> 11 — RETORNO </a> <a data-passage="BUCLE-2"> 12 — BUCLE </a> </nav> </div> <!-- ================================================= CONTENIDO LECTURA EN Z ================================================= --> <div class="contenido-interferencia"> <!-- ================================================= BLOQUE 1 — ARRIBA / DERECHA ================================================= --> <div class="texto-interferencia interferencia-bloque-1"> <p> Algo cambia. Quizás llega poco a poco. Quizás de golpe. El agua sigue ahí. Los árboles también. Pero algo ya no es igual. </p> </div> <!-- ================================================= BLOQUE 2 — ABAJO / IZQUIERDA ================================================= --> <div class="texto-interferencia interferencia-bloque-2"> <p> Aprendí a reconocer presencias que no se ven, pero dejan de hacer posible el silencio. ¿El ruido nos empezó a ensordecer? </p> </div> </div> <!-- ================================================= INTERFAZ INFERIOR ================================================= --> <div class="interfaz-inferior"> <audio controls autoplay preload="metadata" src="https://static.wixstatic.com/mp3/642d9e_d074e3b4195146538aac5a21fbb93675.mp3" ></audio> <a class="continuar" data-passage="SATURACION-2" > CONTINUAR → </a> </div> </div>
<div class="pasaje saturacion-pasaje saturacion-2-pasaje"> <!-- ================================================= VIDEO DE FONDO ================================================= --> <video class="saturacion-video" autoplay loop playsinline preload="auto" > <!-- VIDEO PROVISIONAL — REEMPLAZAR --> <source src="https://video.wixstatic.com/video/642d9e_55dcbf461eae4f989217b1f22f505aea/1080p/mp4/file.mp4" type="video/mp4" > </video> <!-- ================================================= INTERFAZ SUPERIOR ================================================= --> <div class="interfaz-superior"> <div class="cabecera-izquierda"> <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false" > <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false"> <!-- Nuevo icono de tres líneas (SVG) --> <svg class="icono-menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linecap="square"> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> </button> <span class="proyecto"> PERTURBACIONES </span> </div> <div class="cabecera-derecha"> <span class="indice"> 10 / 12 </span> <span class="seccion"> SATURACIÓN </span> </div> </div> <!-- ================================================= MENÚ ================================================= --> <div class="menu-panel"> <button class="menu-cerrar" aria-label="Cerrar menú" > × </button> <nav class="menu-lista"> <a data-passage="INTRO"> INTRO </a> <a data-passage="UMBRAL-2"> 07 — UMBRAL </a> <a data-passage="INMERSION-2"> 08 — INMERSIÓN </a> <a data-passage="INTERFERENCIA-2"> 09 — INTERFERENCIA </a> <a data-passage="SATURACION-2"> 10 — SATURACIÓN </a> <a data-passage="RETORNO-2"> 11 — RETORNO </a> <a data-passage="BUCLE-2"> 12 — BUCLE </a> </nav> </div> <!-- ================================================= TEXTO ================================================= --> <div class="saturacion-texto"> <p> Ya no sé qué permanece. El agua. Los árboles. Los pasos. El ruido. Todo comienza a ocupar el mismo espacio. El paisaje se transforma. O quizás soy yo quien ya no sabe reconocerse en él. Durante un instante, dejamos de ser dos cosas. Una presencia dentro de otra. Una perturbación dentro de otra perturbación. ¿Dónde termina lo que soy y comienza aquello que me transforma? </p> </div> <!-- ================================================= INTERFAZ INFERIOR ================================================= --> <div class="saturacion-inferior"> <button class="saturacion-control" type="button" onclick=" const video = this.closest('.saturacion-pasaje').querySelector('.saturacion-video'); const icono = this.querySelector('.saturacion-icono'); if (video.paused) { video.play(); icono.textContent = '❚❚'; this.setAttribute('aria-label', 'Pausar video'); } else { video.pause(); icono.textContent = '▶'; this.setAttribute('aria-label', 'Reproducir video'); } " > <span class="saturacion-icono">❚❚</span> </button> <a class="continuar" data-passage="RETORNO-2" > CONTINUAR → </a> </div> </div>
<div class="pasaje retorno-2-pasaje"> <!-- ================================================= CAPA DE ANIMACIÓN INICIAL (Franjas Gigantes) ================================================= --> <div class="retorno-intro-overlay"> <div class="retorno-intro-franja retorno-intro-franja-superior"> <span class="retorno-intro-palabra">RETORNO RETORNO RETORNO RETORNO RETORNO</span> </div> <div class="retorno-intro-franja retorno-intro-franja-inferior"> <span class="retorno-intro-palabra">RETORNO RETORNO RETORNO RETORNO RETORNO</span> </div> </div> <!-- ================================================= INTERFAZ SUPERIOR ================================================= --> <div class="interfaz-superior"> <div class="cabecera-izquierda"> <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false"> <img class="icono-menu" src="https://static.wixstatic.com/media/642d9e_45b3e640076b4835ae5cb6de424d4050~mv2.png" alt=""> </button> <span class="proyecto">PERTURBACIONES</span> </div> <div class="cabecera-derecha"> <span class="indice">05 / 12</span> <span class="seccion">RETORNO</span> </div> </div> <!-- ================================================= MENÚ ================================================= --> <div class="menu-panel"> <button class="menu-cerrar" aria-label="Cerrar menú">×</button> <nav class="menu-lista"> <a data-passage="INTRO">INTRO</a> <a data-passage="UMBRAL">01 — UMBRAL</a> <a data-passage="INMERSIÓN">02 — INMERSIÓN</a> <a data-passage="INTERFERENCIA">03 — INTERFERENCIA</a> <a data-passage="SATURACIÓN">04 — SATURACIÓN</a> <a data-passage="RETORNO">05 — RETORNO</a> <a data-passage="BUCLE">06 — BUCLE</a> </nav> </div> <!-- ================================================= PRIMER TEXTO ARRIBA DE LA CINTA / IZQUIERDA ================================================= --> <div class="retorno-texto retorno-texto-1"> <p> Y entonces, poco a poco, vuelve el silencio.<br> La música se aleja.<br> La imagen recupera su ritmo.<br> El agua sigue ahí.<br> Las hojas siguen moviéndose. </p> </div> <!-- ================================================= CINTA CENTRAL ESTÁTICA ================================================= --> <div class="retorno-cinta-contenedor"> <div class="retorno-cinta"> <span class="retorno-palabra retorno-difusa">RETORNO</span> <span class="retorno-separador">/</span> <span class="retorno-palabra retorno-central">RETORNO</span> <span class="retorno-separador">/</span> <span class="retorno-palabra retorno-difusa">RETORNO</span> </div> </div> <!-- ================================================= SEGUNDO TEXTO DEBAJO DE LA CINTA / DERECHA ================================================= --> <div class="retorno-texto retorno-texto-2"> <p> Nada parece haber cambiado.<br> Pero algo cambió.<br> Quizás el lugar. Quizás yo.<br> Quizás solamente la forma en que ahora lo escucho. </p> </div> <!-- ================================================= PREGUNTA ================================================= --> <div class="retorno-pregunta"> <p>¿Volver es regresar?</p> </div> <!-- ================================================= INTERFAZ INFERIOR ================================================= --> <div class="interfaz-inferior"> <audio controls autoplay preload="metadata" src="https://static.wixstatic.com/mp3/642d9e_85b34bcaf4374bfc9f3e9beb881a6eae.mp3"> </audio> <a class="continuar" data-passage="BUCLE-2" > CONTINUAR → </a> </div> </div>
<div class="pasaje bucle-pasaje bucle-2-pasaje"> <!-- ================================================= VIDEO DE FONDO ================================================= --> <video class="bucle-video" autoplay loop playsinline preload="auto" > <!-- VIDEO PROVISIONAL --> <source src="https://video.wixstatic.com/video/642d9e_16b88289f74547bfa42a0cfbb9449400/1080p/mp4/file.mp4" type="video/mp4" > </video> <!-- ================================================= INTERFAZ SUPERIOR ================================================= --> <div class="interfaz-superior"> <div class="cabecera-izquierda"> <button class="menu-boton" aria-label="Abrir menú" aria-expanded="false"> <svg class="icono-menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linecap="square"> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> <span class="proyecto">PERTURBACIONES</span> </div> <div class="cabecera-derecha"> <span class="indice"> 12 / 12 </span> <span class="seccion"> BUCLE </span> </div> </div> <!-- ================================================= MENÚ ================================================= --> <div class="menu-panel"> <button class="menu-cerrar" aria-label="Cerrar menú" > × </button> <nav class="menu-lista"> <a data-passage="INTRO"> INTRO </a> <a data-passage="UMBRAL-2"> 07 — UMBRAL </a> <a data-passage="INMERSION-2"> 08 — INMERSIÓN </a> <a data-passage="INTERFERENCIA-2"> 09 — INTERFERENCIA </a> <a data-passage="SATURACION-2"> 10 — SATURACIÓN </a> <a data-passage="RETORNO-2"> 11 — RETORNO </a> <a data-passage="BUCLE-2"> 12 — BUCLE </a> </nav> </div> <!-- ================================================= TEXTO ================================================= --> <div class="bucle-texto"> <p> El lugar permanece. Algo vuelve a entrar. Y algo vuelve a cambiar. La calma no es la misma. La perturbación tampoco. Cada vez queda algo. Nunca hubo un principio. Tampoco existe un regreso. Solo este movimiento: cambiar, permanecer, transformarse, volver. <strong>¿En qué momento dejamos de volver al mismo lugar?</strong> </p> </div> <!-- ================================================= INTERFAZ INFERIOR ================================================= --> <div class="bucle-inferior"> <button class="bucle-control" type="button" onclick=" const video = this.closest('.bucle-pasaje').querySelector('.bucle-video'); const icono = this.querySelector('.bucle-icono'); if (video.paused) { video.play(); icono.textContent = '❚❚'; this.setAttribute('aria-label', 'Pausar video'); } else { video.pause(); icono.textContent = '▶'; this.setAttribute('aria-label', 'Reproducir video'); } " > <span class="bucle-icono">❚❚</span> </button> <a class="continuar" data-passage="INTRO" > CONTINUAR → </a> </div> </div>