Interactive Gallery System

<section class="galeria-impacto">
    <h2>Historias que Transforman Vidas</h2>
    <p class="galeria-subtitulo">Cada momento cuenta. Cada sonrisa importa.</p>
    
    <div class="galeria-grid">
        <!-- Gallery items go here -->
    </div>
</section>

<div class="galeria-item">
    <div class="galeria-flip-card">
        <!-- Front Face -->
        <div class="galeria-flip-front">
            <img src="./img voluntario/img2.png" alt="Voluntarios ayudando">
            <div class="galeria-overlay">
                <p>Juntos Somos Más Fuertes</p>
            </div>
        </div>
        
        <!-- Back Face -->
        <div class="galeria-flip-back">
            <div class="galeria-historia">
                <p class="historia-titulo">🤝 Comunidad</p>
                <p class="historia-texto">"Un voluntario es fuerte, pero una comunidad de voluntarios es invencible..."</p>
                <p class="historia-autor">— Misión Siloé</p>
            </div>
        </div>
    </div>
</div>

<div class="galeria-item galeria-item-grande">
    <!-- Same flip card structure -->
</div>

.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.galeria-flip-card {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;
}

.galeria-item {
    perspective: 1000px;
}

.galeria-flip-card {
    perspective: 1000px;
}

.galeria-flip-card.flipped {
    transform: rotateY(180deg);
}

.galeria-flip-front {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}

.galeria-flip-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    background: linear-gradient(135deg, var(--azul-siloe), var(--rosa-vibrante));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 15px;
    overflow: hidden;
}

// Select all flip cards
const flipCards = document.querySelectorAll('.galeria-flip-card');
let currentFlipped = null; // Variable to track currently flipped card

// Add event listener to each card
flipCards.forEach(card => {
    card.addEventListener('click', function() {
        // If there's a card already flipped and it's different from this one
        if (currentFlipped && currentFlipped !== this) {
            // Flip the previous one back
            currentFlipped.classList.remove('flipped');
        }
        
        // Toggle the 'flipped' class on the current card
        this.classList.toggle('flipped');
        
        // Update the reference to the flipped card
        if (this.classList.contains('flipped')) {
            currentFlipped = this;
        } else {
            currentFlipped = null;
        }
    });
});

<div class="nav-buttons">
    <button id="btn-nosotros" class="nav-btn nav-btn-active">
        ℹ️ Nosotros
    </button>
    <button id="btn-voluntarios" class="nav-btn">
        👥 Voluntariado Siloé
    </button>
    <button id="btn-clow" class="nav-btn">
        🤡 Clow de Siloé
    </button>
    <button id="btn-aliados" class="nav-btn">
        🤝 Nuestros Aliados
    </button>
</div>

function mostrarSeccion(nombre) {
    console.log('Mostrando sección:', nombre);
    
    // Hide all sections
    seccionVoluntariado.classList.remove('seccion-activa');
    seccionVoluntariado.classList.add('seccion-inactiva');
    seccionClow.classList.remove('seccion-activa');
    seccionClow.classList.add('seccion-inactiva');
    seccionAliados.classList.remove('seccion-activa');
    seccionAliados.classList.add('seccion-inactiva');
    seccionNosotros.classList.remove('seccion-activa');
    seccionNosotros.classList.add('seccion-inactiva');
    
    // Remove active state from all buttons
    btnVoluntarios.classList.remove('nav-btn-active');
    btnClow.classList.remove('nav-btn-active');
    btnAliados.classList.remove('nav-btn-active');
    btnNosotros.classList.remove('nav-btn-active');
    
    // Show selected section
    if (nombre === 'voluntarios') {
        seccionVoluntariado.classList.remove('seccion-inactiva');
        seccionVoluntariado.classList.add('seccion-activa');
        btnVoluntarios.classList.add('nav-btn-active');
    } else if (nombre === 'clow') {
        seccionClow.classList.remove('seccion-inactiva');
        seccionClow.classList.add('seccion-activa');
        btnClow.classList.add('nav-btn-active');
    } else if (nombre === 'aliados') {
        seccionAliados.classList.remove('seccion-inactiva');
        seccionAliados.classList.add('seccion-activa');
        btnAliados.classList.add('nav-btn-active');
    } else if (nombre === 'nosotros') {
        seccionNosotros.classList.remove('seccion-inactiva');
        seccionNosotros.classList.add('seccion-activa');
        btnNosotros.classList.add('nav-btn-active');
    }
    
    // Scroll to top smoothly
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

.galeria-clow {
    background: linear-gradient(135deg, #fff4e6, #ffe8cc);
}

.galeria-clow h2 {
    color: var(--rosa-vibrante);
}

.galeria-aliados {
    background: linear-gradient(135deg, #e8f4f8, #f0e8f8);
}

.galeria-aliados h2 {
    color: var(--azul-siloe);
}