<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lorena Pedraza — Danza Kathak & Butoh</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background-color: #f9f9f7;
color: #222;
font-family: 'Courier New', monospace;
overflow-x: hidden;
}
header {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
background: rgba(255,255,255,0.8);
backdrop-filter: blur(8px);
border-radius: 9999px;
padding: 0.5rem 1rem;
display: flex;
gap: 1.5rem;
z-index: 50;
}
header a {
color: #333;
text-decoration: none;
font-size: 0.9rem;
transition: opacity 0.3s ease;
}
header a:hover {
opacity: 0.6;
}
section {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 6rem 1rem 4rem;
opacity: 0;
transition: opacity 2s ease;
}
section.visible {
opacity: 1;
}
.carousel img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 4s ease;
}
.carousel img.active {
opacity: 1;
}
.cursor {
position: fixed;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(0,0,0,0.1);
pointer-events: none;
transform: translate(-50%, -50%);
transition: transform 0.1s ease;
}
</style>
</head>
<body class="relative overflow-hidden">
<header>
<a href="#inicio">Inicio</a>
<a href="#kathak">Kathak</a>
<a href="#butoh">Butoh</a>
<a href="#performance">Colaboraciones</a>
<a href="#talleres">Talleres</a>
<a href="#sobre">Sobre mí</a>
<a href="#contacto">Contacto</a>
</header>
<div class="cursor" id="cursor"></div>
<section id="inicio" class="relative carousel">
<img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e" class="active" alt="agua">
<img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee" alt="sombra">
<img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="tela">
<div class="relative z-10 text-center text-white">
<h1 class="text-5xl md:text-7xl font-semibold mb-4 drop-shadow-lg">Lorena Pedraza</h1>
<p class="text-xl md:text-2xl">Danza Kathak & Butoh</p>
</div>
</section>
<section id="kathak" class="bg-white">
<h2 class="text-4xl mb-6">Danza Kathak</h2>
<p class="max-w-2xl mx-auto text-lg mb-8">Giro, ritmo, huella. El sonido del cascabel abre el espacio: memoria de pasos antiguos y nuevos círculos de luz.</p>
<img src="https://images.unsplash.com/photo-1517836357463-d25dfeac3438" class="w-2/3 rounded-2xl shadow-lg" alt="kathak">
<audio id="audioKathak" src="https://cdn.pixabay.com/download/audio/2023/01/25/audio_28ad3489e4.mp3?filename=tabla-loop-139bpm-13205.mp3" preload="auto"></audio>
</section>
<section id="butoh" class="bg-neutral-900 text-white">
<h2 class="text-4xl mb-6">Danza Butoh</h2>
<p class="max-w-2xl mx-auto text-lg mb-8">Silencio. El cuerpo emerge del viento y del fuego. Movimiento como sombra que respira.</p>
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" class="w-2/3 rounded-2xl shadow-lg" alt="butoh">
<audio id="audioButoh" src="https://cdn.pixabay.com/download/audio/2021/09/01/audio_d97f86e048.mp3?filename=wind-deep-ambient-8716.mp3" preload="auto"></audio>
</section>
<section id="performance" class="bg-white">
<h2 class="text-4xl mb-6">Performance / Colaboraciones</h2>
<div class="grid md:grid-cols-3 gap-4 max-w-5xl mx-auto">
<img src="https://images.unsplash.com/photo-1526506118085-60ce8714f8c5" class="rounded-xl shadow-lg" alt="performance1">
<img src="https://images.unsplash.com/photo-1503342217505-b0a15ec3261c" class="rounded-xl shadow-lg" alt="performance2">
<img src="https://images.unsplash.com/photo-1495567720989-cebdbdd97913" class="rounded-xl shadow-lg" alt="performance3">
</div>
</section>
<section id="talleres" class="bg-neutral-100">
<h2 class="text-4xl mb-6">Talleres / Eventos</h2>
<div class="max-w-3xl mx-auto space-y-6">
<div class="p-4 bg-white rounded-2xl shadow">
<h3 class="text-2xl mb-2">Residencia corporal — Círculo del aire</h3>
<p>Exploración entre cuerpo, ritmo y vacío. Próximamente.</p>
</div>
<div class="p-4 bg-white rounded-2xl shadow">
<h3 class="text-2xl mb-2">Laboratorio de movimiento Butoh</h3>
<p>Encuentro de improvisación desde el silencio. Fechas por anunciar.</p>
</div>
</div>
</section>
<section id="sobre" class="bg-white">
<h2 class="text-4xl mb-6">Lorena Pedraza</h2>
<p class="max-w-3xl mx-auto text-lg leading-relaxed">[Escribe aquí libremente tu texto personal, reflexiones o trayectoria.]</p>
</section>
<section id="contacto" class="bg-white">
<h2 class="text-4xl mb-6">Contacto</h2>
<form class="flex flex-col gap-4 w-full max-w-md mx-auto">
<input type="text" placeholder="Nombre" class="border p-2 rounded">
<input type="email" placeholder="Correo" class="border p-2 rounded">
<textarea placeholder="Mensaje" class="border p-2 rounded h-32"></textarea>
<button type="submit" class="bg-black text-white py-2 rounded hover:bg-neutral-800">Enviar</button>
</form>
</section>
<script>
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) entry.target.classList.add('visible');
});
}, { threshold: 0.3 });
document.querySelectorAll('section').forEach(sec => observer.observe(sec));
const slides = document.querySelectorAll('.carousel img');
let index = 0;
setInterval(() => {
slides[index].classList.remove('active');
index = (index + 1) % slides.length;
slides[index].classList.add('active');
}, 6000);
const cursor = document.getElementById('cursor');
document.addEventListener('mousemove', e => {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
});
const kathak = document.getElementById('audioKathak');
const butoh = document.getElementById('audioButoh');
document.getElementById('kathak').addEventListener('mouseenter', () => kathak.play());
document.getElementById('kathak').addEventListener('mouseleave', () => kathak.pause());
document.getElementById('butoh').addEventListener('mouseenter', () => butoh.play());
document.getElementById('butoh').addEventListener('mouseleave', () => butoh.pause());
</script>
</body>
</html>