Hospital Clown Program

<section id="clow" class="clow-hero">
    <h1>🤡 El Clow de Siloé 🤡</h1>
    <p class="clow-tagline">La Magia de la Risa es Nuestra Medicina</p>
    
    <div class="clow-intro">
        <p>
            En los pasillos del Hospital del Niño, la risa es medicina. Nuestros clowns hospitalarios 
            transforman momentos de miedo y dolor en instantes de alegría y esperanza. Con nariz roja, 
            sonrisa amplia y corazón generoso, traen algo invaluable: la oportunidad de ser niño otra vez.
        </p>
        <p>
            No somos performers que buscan aplausos. Somos acompañantes que entienden que en el rostro 
            de cada niño hospitalizado hay universos de emociones. Nuestra misión es simple pero profunda: 
            recordarles que la vida, incluso en los momentos más difíciles, sigue siendo digna de una sonrisa.
        </p>
    </div>
</section>

<section class="inspiration-section">
    <h2>Frases que Nos Inspiran</h2>
    
    <div class="frases-grid">
        <!-- Card 1 -->
        <div class="frase-card">
            <div class="frase-emoji">😊</div>
            <p class="frase-text">"La risa es el camino más corto entre dos personas"</p>
            <p class="frase-author">— Victor Borge</p>
        </div>
        
        <!-- Card 2 -->
        <div class="frase-card">
            <div class="frase-emoji">🌟</div>
            <p class="frase-text">"No cambiamos el diagnóstico, pero sí el pronóstico del día"</p>
            <p class="frase-author">— Siloé Perú</p>
        </div>
        
        <!-- Card 3 -->
        <div class="frase-card">
            <div class="frase-emoji">💖</div>
            <p class="frase-text">"Ser clown es ser el guardián de la esperanza con una sonrisa"</p>
            <p class="frase-author">— Siloé Perú</p>
        </div>
    </div>
</section>

<div class="galeria-item">
    <div class="galeria-flip-card">
        <div class="galeria-flip-front">
            <img src="./img clow/568201215_18225647026307271_8015100808044120281_n.png" 
                 alt="Risa que transforma">
            <div class="galeria-overlay">
                <p>Risa que Transforma</p>
            </div>
        </div>
        <div class="galeria-flip-back">
            <div class="galeria-historia">
                <p class="historia-titulo">😄 Transformación</p>
                <p class="historia-texto">"Una visita del clown puede cambiar completamente el día de un paciente. Su risa contagia, libera el estrés y abre puertas a la esperanza. En ese instante, el miedo desaparece."</p>
                <p class="historia-autor">— Clow Siloé</p>
            </div>
        </div>
    </div>
</div>

/* Variant for clown gallery */
.galeria-clow {
    background: linear-gradient(135deg, #fff4e6, #ffe8cc);
}

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

<form class="clow-form" action="https://formsubmit.co/[email protected]" method="POST">
    <!-- Full Name -->
    <div class="form-group">
        <label for="nombre-clow">Nombre Completo *</label>
        <input type="text" id="nombre-clow" name="Nombre Completo" 
               placeholder="Tu nombre" required>
    </div>
    
    <!-- Email -->
    <div class="form-group">
        <label for="email-clow">Correo Electrónico *</label>
        <input type="email" id="email-clow" name="Correo Electrónico" 
               placeholder="[email protected]" required>
    </div>
    
    <!-- Phone -->
    <div class="form-group">
        <label for="telefono-clow">Número de Teléfono *</label>
        <input type="tel" id="telefono-clow" name="Teléfono" 
               placeholder="+51 9 XXXX XXXX" required>
    </div>
    
    <!-- Motivation -->
    <div class="form-group">
        <label for="motivacion-clow">¿Por qué quieres ser un Clown de Siloé? *</label>
        <textarea id="motivacion-clow" name="Motivación" 
                  placeholder="Cuéntanos sobre tu experiencia y por qué crees que puedes traer sonrisas..." 
                  rows="6" required></textarea>
    </div>
    
    <!-- Privacy Acceptance -->
    <div class="form-group checkbox-group">
        <input type="checkbox" id="terminos-clow" name="Aceptación" 
               required style="width: auto;">
        <label for="terminos-clow" style="width: auto; display: inline;">
            Acepto la política de privacidad y el uso de mis datos para la gestión del voluntariado de Siloé.
        </label>
    </div>
    
    <!-- Submit Button -->
    <button type="submit" class="btn-enviar btn-clow-submit">
        ¡SÍ, QUIERO SER CLOWN DE SILOÉ!
    </button>
</form>

@media (max-width: 768px) {
    .clow-hero h1 {
        font-size: 2rem;
    }
    
    .frases-grid {
        grid-template-columns: 1fr;
    }
}