<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invitación Digital</title>
    <link rel="stylesheet" href="styles-design-2.css">
    <!-- Fuentes personalizadas -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&family=Dancing+Script:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Sobre (Envelope) - Se muestra primero -->
    <div id="envelope-overlay" class="envelope-overlay">
        <div class="envelope-container">
            <!-- Imagen del sobre para desktop -->
            <div class="envelope-image-wrapper envelope-desktop"></div>
            
            <!-- Imagen del sobre para móviles -->
            <div class="envelope-image-wrapper envelope-mobile"></div>
            
            <!-- Nombres de los novios (arriba) -->
            <div class="envelope-names">Marcos & Mariana</div>
            
            <!-- Fecha del evento (abajo) -->
            <div class="envelope-date">01.09.2026</div>
            
            <!-- Instrucción para abrir -->
            <div class="envelope-instruction">Clic para abrir</div>
        </div>
    </div>
    
    <!-- Contenido de la invitación (oculto hasta que se abra el sobre) -->
    <div class="template-container" id="template-content">
        <!-- Sección 1: Foto de los novios con texto estilo Save the Date -->
        <section class="section-1" id="section-1">
            <!-- Fondo desenfocado (solo si es vertical) -->
            <div class="section-1-blur-background"></div>
            
            <!-- Foto principal -->
            <div class="section-1-main-image"></div>
            
            <!-- Contenido de texto -->
            <div class="section-1-content">
                <!-- Fecha -->
                <p class="section-1-date" id="section-1-date">09.27.27</p>
                
                <!-- Save the Date -->
                <h1 class="section-1-save-the-date">
                    <span class="section-1-save">SAVE</span>
                    <span class="section-1-the">the</span>
                    <span class="section-1-date-text">DATE</span>
                </h1>
                
                <!-- Nombres de los novios -->
                <p class="section-1-names" id="section-1-names">Marcos & Mariana</p>
                
                <!-- Ubicación -->
                <p class="section-1-location" id="section-1-location">GUAYAQUIL, ECUADOR</p>
            </div>
        </section>
        
        <!-- Sección 2: Nos casamos con contador y botón de calendario -->
        <section class="section-2" id="section-2">
            <div class="section-2-container">
                <!-- Título "Nos casamos" -->
                <h2 class="section-2-title" id="section-2-title">Nos casamos</h2>
                
                <!-- Conteo regresivo -->
                <div class="section-2-countdown" id="section-2-countdown">
                    <div class="countdown-item">
                        <span class="countdown-number" id="countdown-days">00</span>
                        <span class="countdown-label">Días</span>
                    </div>
                    <span class="countdown-separator">:</span>
                    <div class="countdown-item">
                        <span class="countdown-number" id="countdown-hours">00</span>
                        <span class="countdown-label">Horas</span>
                    </div>
                    <span class="countdown-separator">:</span>
                    <div class="countdown-item">
                        <span class="countdown-number" id="countdown-minutes">00</span>
                        <span class="countdown-label">Minutos</span>
                    </div>
                    <span class="countdown-separator">:</span>
                    <div class="countdown-item">
                        <span class="countdown-number" id="countdown-seconds">00</span>
                        <span class="countdown-label">Segundos</span>
                    </div>
                </div>
                
                <!-- Botón Google Calendar -->
                <div class="section-2-calendar-button-container">
                    <a href="https://www.google.com/calendar/render?action=TEMPLATE&text=Marcos%20%26%20Mariana%20-%20Boda&details=%C2%A1%C3%9Anete%20a%20celebrar%20con%20nosotros%20en%20nuestra%20boda!&location=Ceremonia%20en%20Capilla%20Esp%C3%ADritu%20Santo.%20Recepci%C3%B3n%20en%20C.C.%20UEES%20Sal%C3%B3n%20Regente&dates=20260901T150000/20260901T230000" 
                       target="_blank" 
                       rel="noopener noreferrer" 
                       class="section-2-calendar-button" 
                       id="section-2-calendar-button">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="section-2-calendar-icon">
                            <path d="M19 4H5C3.89 4 3 4.9 3 6V20C3 21.1 3.89 22 5 22H19C20.1 22 21 21.1 21 20V6C21 4.9 20.1 4 19 4ZM19 20H5V9H19V20ZM7 11H9V13H7V11ZM11 11H13V13H11V11ZM15 11H17V13H15V11ZM7 15H9V17H7V15ZM11 15H13V17H11V15ZM15 15H17V17H15V15Z" fill="currentColor"/>
                        </svg>
                        <span>Agrégalo a tu Google Calendar</span>
                    </a>
                </div>
            </div>
        </section>
        
        <!-- Sección 3: Foto -->
        <section class="section-3" id="section-3">
            <!-- Fondo desenfocado (solo si es vertical) -->
            <div class="section-3-blur-background"></div>
            
            <!-- Foto principal -->
            <div class="section-3-main-image"></div>
        </section>
        
        <!-- Sección 4: Itinerario -->
        <section class="section-4" id="section-4">
            <div class="section-4-container" id="section-4-container">
                <!-- Título -->
                <h2 class="section-4-main-title" id="section-4-main-title">Itinerario</h2>
                
                <!-- Timeline con items -->
                <div class="section-4-timeline-wrapper">
                    <!-- Línea vertical central -->
                    <div class="section-4-timeline"></div>
                    
                    <!-- Item 1: Ceremonia (izquierda) -->
                    <div class="section-4-item section-4-item-left">
                        <div class="section-4-item-content">
                            <p class="section-4-time" id="section-4-time-1">15h00</p>
                            <p class="section-4-event" id="section-4-event-1">Ceremonia Civil</p>
                            <p class="section-4-location" id="section-4-location-1">Capilla Espíritu Santo</p>
                        </div>
                        <div class="section-4-timeline-dot"></div>
                    </div>
                    
                    <!-- Item 2: Recepción (derecha) -->
                    <div class="section-4-item section-4-item-right">
                        <div class="section-4-timeline-dot"></div>
                        <div class="section-4-item-content">
                            <p class="section-4-time" id="section-4-time-2">16h30</p>
                            <p class="section-4-event" id="section-4-event-2">Recepción</p>
                            <p class="section-4-location" id="section-4-location-2">C.C. UEES Salón Regente</p>
                        </div>
                    </div>
                    
                   
                </div>
                
                <!-- Botón Google Calendar -->
                <div class="section-4-calendar-button-container">
                    <a href="https://www.google.com/calendar/render?action=TEMPLATE&text=Marcos%20%26%20Mariana%20-%20Boda&details=%C2%A1%C3%9Anete%20a%20celebrar%20con%20nosotros%20en%20nuestra%20boda!&location=Ceremonia%20en%20Capilla%20Esp%C3%ADritu%20Santo.%20Recepci%C3%B3n%20en%20C.C.%20UEES%20Sal%C3%B3n%20Regente&dates=20260901T150000/20260901T230000" 
                       target="_blank" 
                       rel="noopener noreferrer" 
                       class="section-4-calendar-button" 
                       id="section-4-calendar-button">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="section-4-calendar-icon">
                            <path d="M19 4H5C3.89 4 3 4.9 3 6V20C3 21.1 3.89 22 5 22H19C20.1 22 21 21.1 21 20V6C21 4.9 20.1 4 19 4ZM19 20H5V9H19V20ZM7 11H9V13H7V11ZM11 11H13V13H11V11ZM15 11H17V13H15V11ZM7 15H9V17H7V15ZM11 15H13V17H11V15ZM15 15H17V17H15V15Z" fill="currentColor"/>
                        </svg>
                        <span>Agrégalo a tu Google Calendar</span>
                    </a>
                </div>
            </div>
        </section>
        
        <!-- Sección 5: Video Personalizado -->
        <section class="section-5" id="section-5">
            <div class="section-5-container" id="section-5-container">
                <!-- Video principal -->
                <video 
                    src="../../../assets/uploads/videos/video_1_1768788941_0.mov" 
                    class="section-5-video"
                    id="section-5-video"
                    preload="auto"
                    muted
                    playsinline
                    loop>
                </video>
                
                <!-- Overlay de color -->
                <div class="section-5-overlay"></div>
                
                <!-- Cover con texto y botón de play -->
                <div class="section-5-cover" id="section-5-cover">
                    <p class="section-5-cover-texto">Video Personalizado</p>
                    <button class="section-5-play-button" id="section-5-play-button" aria-label="Reproducir video">
                        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="40" cy="40" r="40" fill="rgba(255, 255, 255, 0.9)"/>
                            <path d="M32 24L32 56L56 40L32 24Z" fill="#715E32"/>
                        </svg>
                    </button>
                </div>
                
                <!-- Overlay oscuro para efecto de enfoque al reproducir -->
                <div class="section-5-focus-overlay" id="section-5-focus-overlay">
                    <!-- Botón de cerrar -->
                    <button class="section-5-close-button" id="section-5-close-button" aria-label="Cerrar video">
                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="20" cy="20" r="20" fill="rgba(255, 255, 255, 0.9)"/>
                            <path d="M14 14L26 26M26 14L14 26" stroke="#715E32" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </button>
                </div>
            </div>
        </section>
        
        <!-- Sección 6: Dress Code -->
        <section class="section-6" id="section-6">
            <div class="section-6-container" id="section-6-container">
                <!-- Título -->
                <h2 class="section-6-title" id="section-6-title">DressCode</h2>
                
                <!-- Subtítulo -->
                <p class="section-6-subtitle" id="section-6-subtitle">Inspírate en en estas ideas de vestimenta.</p>
                
                <!-- Aviso de colores reservados -->
                <div class="section-6-colors-warning">
                    <p class="section-6-warning-text" id="section-6-warning-text">Estos colores están reservados para los novios; evita usarlos.</p>
                    <div class="section-6-colors-container">
                        <div class="section-6-color-circle" style="background-color: #715E32;"></div>
                        <div class="section-6-color-circle" style="background-color: #A78B49;"></div>
                        <div class="section-6-color-circle" style="background-color: #C5AF7C;"></div>
                    </div>
                </div>
                
                <!-- Galería de imágenes -->
                <div class="section-6-gallery" id="section-6-gallery">
                    <div class="section-6-gallery-item">
                        <img src="../../../assets/uploads/images/galeria/galeria_1_1768765261_0.jpg" alt="Dress Code 1" class="section-6-gallery-image">
                    </div>
                    <div class="section-6-gallery-item">
                        <img src="../../../assets/uploads/images/galeria/galeria_1_1768765261_0.jpg" alt="Dress Code 2" class="section-6-gallery-image">
                    </div>
                    <div class="section-6-gallery-item">
                        <img src="../../../assets/uploads/images/galeria/galeria_1_1768765261_0.jpg" alt="Dress Code 3" class="section-6-gallery-image">
                    </div>
                    <div class="section-6-gallery-item">
                        <img src="../../../assets/uploads/images/galeria/galeria_1_1768765261_0.jpg" alt="Dress Code 4" class="section-6-gallery-image">
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Sección 7: Ubicación -->
        <section class="section-7" id="section-7">
            <div class="section-7-container" id="section-7-container">
                <!-- Título -->
                <h2 class="section-7-title" id="section-7-title">Ubicación</h2>
                
                <!-- Subtítulo -->
                <p class="section-7-subtitle" id="section-7-subtitle">Descubre cómo llegar a nuestro "Sí acepto"</p>
                
                <!-- Botón Google Maps -->
                <div class="section-7-button-container">
                    <a href="https://www.google.com/maps" 
                       target="_blank" 
                       rel="noopener noreferrer" 
                       class="section-7-maps-button" 
                       id="section-7-maps-button">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="section-7-maps-icon">
                            <path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="currentColor"/>
                        </svg>
                        <span>Mira en Google Maps</span>
                    </a>
                </div>
            </div>
        </section>
        
        <!-- Sección 8: Confirmación de Asistencia -->
        <section class="section-8" id="section-8">
            <div class="section-8-container" id="section-8-container">
                <!-- Columna izquierda: Slider de fotos -->
                <div class="section-8-left">
                    <div class="section-8-slider" id="section-8-slider">
                        <div class="section-8-slide active">
                            <img src="../../../assets/uploads/images/galeria/galeria_1_1768765261_0.jpg" alt="Foto 1" class="section-8-slide-image">
                        </div>
                        <div class="section-8-slide">
                            <img src="../../../assets/uploads/images/galeria/galeria_1_1768765261_0.jpg" alt="Foto 2" class="section-8-slide-image">
                        </div>
                        <div class="section-8-slide">
                            <img src="../../../assets/uploads/images/galeria/galeria_1_1768765261_0.jpg" alt="Foto 3" class="section-8-slide-image">
                        </div>
                    </div>
                </div>
                
                <!-- Columna derecha: Formulario de confirmación -->
                <div class="section-8-right">
                    <div class="section-8-form-container">
                        <h3 class="section-8-guest-name" id="section-8-guest-name">Sr. Fabricio Zambrano</h3>
                        <p class="section-8-confirm-text" id="section-8-confirm-text">Confirme su asistencia</p>
                        <p class="section-8-admissions" id="section-8-admissions">No. de Admisiones: <span id="section-8-admissions-number">1</span></p>
                        
                        <div class="section-8-buttons">
                            <button class="section-8-button section-8-button-yes" id="section-8-button-yes">Si asistiré</button>
                            <button class="section-8-button section-8-button-no" id="section-8-button-no">No asistiré</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Modal Confirmar Asistencia -->
        <div class="section-8-modal" id="section-8-modal-yes">
            <div class="section-8-modal-overlay"></div>
            <div class="section-8-modal-content">
                <h3 class="section-8-modal-title">Confirma tu asistencia</h3>
                <p class="section-8-modal-text">Gracias por ser parte de nuestras vidas</p>
                <div class="section-8-modal-buttons">
                    <button class="section-8-modal-button section-8-modal-button-confirm" id="section-8-confirm-yes">Confirmar asistencia</button>
                    <button class="section-8-modal-button section-8-modal-button-cancel" id="section-8-cancel-yes">Cancelar</button>
                </div>
            </div>
        </div>
        
        <!-- Modal No Asistiré -->
        <div class="section-8-modal" id="section-8-modal-no">
            <div class="section-8-modal-overlay"></div>
            <div class="section-8-modal-content">
                <h3 class="section-8-modal-title">Gracias por tu respuesta</h3>
                <p class="section-8-modal-text">Lamentamos no poder contar contigo, déjanos un mensaje</p>
                <textarea class="section-8-modal-textarea" id="section-8-modal-comment" placeholder="Comentario (Opcional)"></textarea>
                <div class="section-8-modal-buttons">
                    <button class="section-8-modal-button section-8-modal-button-confirm" id="section-8-confirm-no">Confirmar inasistencia</button>
                    <button class="section-8-modal-button section-8-modal-button-cancel" id="section-8-cancel-no">Cancelar</button>
                </div>
            </div>
        </div>
        
        <!-- Sección 9: Obsequio -->
        <section class="section-9" id="section-9">
            <div class="section-9-container" id="section-9-container">
                <!-- Título -->
                <h2 class="section-9-title" id="section-9-title">Agradecemos tu obsequio</h2>
                
                <!-- Contenedores de opciones -->
                <div class="section-9-options">
                    <!-- Opción 1: Transferencia Bancaria -->
                    <div class="section-9-option-card">
                        <div class="section-9-icon-container">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="section-9-icon">
                                <path d="M20 4H4C2.89 4 2.01 4.89 2.01 6L2 18C2 19.11 2.89 20 4 20H20C21.11 20 22 19.11 22 18V6C22 4.89 21.11 4 20 4ZM20 18H4V8H20V18ZM20 6H4V8H20V6Z" fill="currentColor"/>
                                <path d="M6 10H8V12H6V10ZM10 10H18V12H10V10ZM6 14H8V16H6V14ZM10 14H18V16H10V14Z" fill="currentColor"/>
                            </svg>
                        </div>
                        <h3 class="section-9-option-title">Transferencia Bancaria</h3>
                        <div class="section-9-option-content">
                            <p class="section-9-bank-info">
                                <span class="section-9-label">Banco:</span>
                                <span class="section-9-value" id="section-9-bank-name">Banco del Pichincha</span>
                            </p>
                            <p class="section-9-bank-info">
                                <span class="section-9-label">Cuenta:</span>
                                <span class="section-9-value" id="section-9-account-number">1234567890</span>
                            </p>
                            <p class="section-9-bank-info">
                                <span class="section-9-label">Titular:</span>
                                <span class="section-9-value" id="section-9-account-holder">Marcos & Mariana</span>
                            </p>
                            <p class="section-9-bank-info">
                                <span class="section-9-label">Tipo:</span>
                                <span class="section-9-value" id="section-9-account-type">Cuenta Corriente</span>
                            </p>
                        </div>
                    </div>
                    
                    <!-- Opción 2: Sobre cerrado -->
                    <div class="section-9-option-card">
                        <div class="section-9-icon-container">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="section-9-icon">
                                <path d="M20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM20 8L12 13L4 8V6L12 11L20 6V8Z" fill="currentColor"/>
                            </svg>
                        </div>
                        <h3 class="section-9-option-title">Sobre cerrado</h3>
                        <div class="section-9-option-content">
                            <p class="section-9-envelope-text">Puedes entregar tu obsequio en un sobre cerrado el día del evento.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Sección 10: Playlist Musical -->
        <section class="section-10" id="section-10">
            <div class="section-10-container" id="section-10-container">
                <!-- Título -->
                <h2 class="section-10-title" id="section-10-title">Hagamos de esta noche, la mejor</h2>
                
                <!-- Subtítulo -->
                <p class="section-10-subtitle" id="section-10-subtitle">Qué musica te gustaría que no falte</p>
                
                <!-- Formulario de agregar canción -->
                <div class="section-10-form">
                    <div class="section-10-form-row">
                        <div class="section-10-input-group">
                            <label for="section-10-artist" class="section-10-label">Autor/Artista/Cantante</label>
                            <input type="text" 
                                   id="section-10-artist" 
                                   class="section-10-input" 
                                   placeholder="Ej: The Beatles">
                        </div>
                        <div class="section-10-input-group">
                            <label for="section-10-title" class="section-10-label">Título</label>
                            <input type="text" 
                                   id="section-10-title" 
                                   class="section-10-input" 
                                   placeholder="Ej: Hey Jude">
                        </div>
                    </div>
                    <button class="section-10-add-button" id="section-10-add-button">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="section-10-add-icon">
                            <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z" fill="currentColor"/>
                        </svg>
                        <span>Agregar canción</span>
                    </button>
                </div>
                
                <!-- Lista de playlist -->
                <div class="section-10-playlist" id="section-10-playlist">
                    <div class="section-10-playlist-header">
                        <h3 class="section-10-playlist-title">Tu playlist</h3>
                        <p class="section-10-playlist-subtitle" id="section-10-playlist-count">0 canciones</p>
                    </div>
                    <div class="section-10-playlist-items" id="section-10-playlist-items">
                        <!-- Las canciones se agregarán aquí dinámicamente -->
                        <div class="section-10-playlist-empty" id="section-10-playlist-empty">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="section-10-empty-icon">
                                <path d="M12 3V13.55C11.41 13.21 10.73 13 10 13C7.79 13 6 14.79 6 17C6 19.21 7.79 21 10 21C12.21 21 14 19.21 14 17V7H18V5H12Z" fill="currentColor"/>
                            </svg>
                            <p>No hay canciones aún. ¡Agrega la primera!</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Sección 11: Información Adicional -->
        <section class="section-11" id="section-11">
            <div class="section-11-container" id="section-11-container">
                <!-- Título -->
                <h2 class="section-11-title" id="section-11-title">Información Adicional</h2>
                
                <!-- Tabs -->
                <div class="section-11-tabs">
                    <div class="section-11-tabs-header">
                        <button class="section-11-tab-button active" data-tab="hospedaje" id="section-11-tab-hospedaje">
                            Hospedaje
                        </button>
                        <button class="section-11-tab-button" data-tab="alimentacion" id="section-11-tab-alimentacion">
                            Alimentación
                        </button>
                        <button class="section-11-tab-button" data-tab="transporte" id="section-11-tab-transporte">
                            Transporte
                        </button>
                        <button class="section-11-tab-button" data-tab="otro" id="section-11-tab-otro">
                            Otro
                        </button>
                    </div>
                    
                    <!-- Contenido de las tabs -->
                    <div class="section-11-tabs-content">
                        <div class="section-11-tab-panel active" id="section-11-panel-hospedaje">
                            <div class="section-11-tab-content">
                                <h3 class="section-11-panel-title">Hospedaje</h3>
                                <p class="section-11-panel-text" id="section-11-content-hospedaje">
                                    Información sobre opciones de hospedaje cerca del lugar del evento.
                                </p>
                            </div>
                        </div>
                        
                        <!-- Tab Alimentación -->
                        <div class="section-11-tab-panel" id="section-11-panel-alimentacion">
                            <div class="section-11-tab-content">
                                <h3 class="section-11-panel-title">Alimentación</h3>
                                <p class="section-11-panel-text" id="section-11-content-alimentacion">
                                    Detalles sobre el menú y opciones de alimentación durante el evento.
                                </p>
                            </div>
                        </div>
                        
                        <!-- Tab Transporte -->
                        <div class="section-11-tab-panel" id="section-11-panel-transporte">
                            <div class="section-11-tab-content">
                                <h3 class="section-11-panel-title">Transporte</h3>
                                <p class="section-11-panel-text" id="section-11-content-transporte">
                                    Información sobre opciones de transporte y cómo llegar al evento.
                                </p>
                            </div>
                        </div>
                        
                        <!-- Tab Otro -->
                        <div class="section-11-tab-panel" id="section-11-panel-otro">
                            <div class="section-11-tab-content">
                                <h3 class="section-11-panel-title">Otro</h3>
                                <p class="section-11-panel-text" id="section-11-content-otro">
                                    Información adicional que pueda ser de utilidad para los invitados.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    
    <!-- Footer -->
    <footer class="section-footer" id="section-footer">
        <div class="section-footer-container" id="section-footer-container">
            <h2 class="section-footer-names" id="section-footer-names">Marcos & Mariana</h2>
            <p class="section-footer-copyright" id="section-footer-copyright">
                2026 © Copyright. Todos los derechos reservados | Sistema de Invitaciones Digitales desarrollado por 
                <a href="https://ritmocreativo.com" target="_blank" rel="noopener noreferrer" class="section-footer-link">Ritmo Creativo Ec</a>
            </p>
        </div>
    </footer>
    
    <script>
        // Animación de zoom + fade para mostrar el contenido
        document.addEventListener('DOMContentLoaded', function() {
            const envelopeOverlay = document.getElementById('envelope-overlay');
            const templateContent = document.getElementById('template-content');
            
            if (!envelopeOverlay || !templateContent) return;
            
            // Abrir sobre al hacer clic
            envelopeOverlay.addEventListener('click', function() {
                // Animación de zoom + fade
                setTimeout(function() {
                    envelopeOverlay.style.transition = 'transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s ease-out';
                    envelopeOverlay.style.transform = 'scale(1.5)';
                    envelopeOverlay.style.opacity = '0';
                    
                    setTimeout(function() {
                        envelopeOverlay.style.display = 'none';
                        // Mostrar contenido de la invitación
                        templateContent.classList.add('show');
                        // Scroll suave al inicio
                        window.scrollTo({ top: 0, behavior: 'smooth' });
                    }, 1200);
                }, 100);
            });
            
            // ============================================
            // SECCIÓN 1: Detección de orientación de imagen
            // ============================================
            
            function initSection1() {
                const section1 = document.getElementById('section-1');
                const mainImage = section1 ? section1.querySelector('.section-1-main-image') : null;
                const blurBackground = section1 ? section1.querySelector('.section-1-blur-background') : null;
                
                if (!section1 || !mainImage) return;
                
                // Función para detectar relación de aspecto de la imagen
                function detectarRelacionAspectoSection1() {
                    const img = new Image();
                    img.onload = function() {
                        const width = this.width;
                        const height = this.height;
                        const aspectRatio = width / height;
                        
                        // Si es aproximadamente vertical (aspectRatio < 1)
                        if (aspectRatio < 1) {
                            section1.classList.add('portrait');
                            section1.classList.remove('landscape');
                            if (blurBackground) {
                                blurBackground.style.display = 'block';
                            }
                        } else {
                            // Si es horizontal (aspectRatio >= 1)
                            section1.classList.add('landscape');
                            section1.classList.remove('portrait');
                            if (blurBackground) {
                                blurBackground.style.display = 'none';
                            }
                        }
                    };
                    
                    img.onerror = function() {
                        // Si hay error, usar landscape por defecto
                        section1.classList.add('landscape');
                        section1.classList.remove('portrait');
                        if (blurBackground) {
                            blurBackground.style.display = 'none';
                        }
                    };
                    
                    // Cargar la imagen
                    img.src = '../../../assets/uploads/images/galeria/galeria_1_1768765261_0.jpg';
                }
                
                // Detectar relación de aspecto
                detectarRelacionAspectoSection1();
            }
            
            // Inicializar sección 1
            initSection1();
            
            // Re-inicializar cuando se abre el sobre
            if (envelopeOverlay) {
                envelopeOverlay.addEventListener('click', function() {
                    setTimeout(function() {
                        if (templateContent && templateContent.classList.contains('show')) {
                            initSection1();
                        }
                    }, 1200);
                });
            }
            
            // ============================================
            // SECCIÓN 2: Contador regresivo
            // ============================================
            
            function initSection2() {
                // Conteo regresivo - Fecha objetivo: 01 de septiembre de 2026
                function initCountdown() {
                    const targetDate = new Date('2026-09-01T00:00:00').getTime();
                    const countdownDays = document.getElementById('countdown-days');
                    const countdownHours = document.getElementById('countdown-hours');
                    const countdownMinutes = document.getElementById('countdown-minutes');
                    const countdownSeconds = document.getElementById('countdown-seconds');
                    
                    if (!countdownDays || !countdownHours || !countdownMinutes || !countdownSeconds) return;
                    
                    function updateCountdown() {
                        const now = new Date().getTime();
                        const distance = targetDate - now;
                        
                        if (distance < 0) {
                            // Si la fecha ya pasó, mostrar ceros
                            countdownDays.textContent = '00';
                            countdownHours.textContent = '00';
                            countdownMinutes.textContent = '00';
                            countdownSeconds.textContent = '00';
                            return;
                        }
                        
                        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
                        
                        countdownDays.textContent = String(days).padStart(2, '0');
                        countdownHours.textContent = String(hours).padStart(2, '0');
                        countdownMinutes.textContent = String(minutes).padStart(2, '0');
                        countdownSeconds.textContent = String(seconds).padStart(2, '0');
                    }
                    
                    // Actualizar inmediatamente
                    updateCountdown();
                    
                    // Actualizar cada segundo
                    setInterval(updateCountdown, 1000);
                }
                
                // Inicializar conteo regresivo
                initCountdown();
            }
            
            // Inicializar sección 2
            initSection2();
            
            // Re-inicializar cuando se abre el sobre
            if (envelopeOverlay) {
                envelopeOverlay.addEventListener('click', function() {
                    setTimeout(function() {
                        if (templateContent && templateContent.classList.contains('show')) {
                            initSection2();
                        }
                    }, 1200);
                });
            }
            
            // ============================================
            // SECCIÓN 3: Detección de orientación de imagen
            // ============================================
            
            function initSection3() {
                const section3 = document.getElementById('section-3');
                const mainImage = section3 ? section3.querySelector('.section-3-main-image') : null;
                const blurBackground = section3 ? section3.querySelector('.section-3-blur-background') : null;
                
                if (!section3 || !mainImage) return;
                
                // Función para detectar relación de aspecto de la imagen
                function detectarRelacionAspectoSection3() {
                    const img = new Image();
                    img.onload = function() {
                        const width = this.width;
                        const height = this.height;
                        const aspectRatio = width / height;
                        
                        // Si es aproximadamente vertical (aspectRatio < 1)
                        if (aspectRatio < 1) {
                            section3.classList.add('portrait');
                            section3.classList.remove('landscape');
                            if (blurBackground) {
                                blurBackground.style.display = 'block';
                            }
                        } else {
                            // Si es horizontal (aspectRatio >= 1)
                            section3.classList.add('landscape');
                            section3.classList.remove('portrait');
                            if (blurBackground) {
                                blurBackground.style.display = 'none';
                            }
                        }
                    };
                    
                    img.onerror = function() {
                        // Si hay error, usar landscape por defecto
                        section3.classList.add('landscape');
                        section3.classList.remove('portrait');
                        if (blurBackground) {
                            blurBackground.style.display = 'none';
                        }
                    };
                    
                    // Obtener la URL de la imagen desde la variable CSS
                    const computedStyle = getComputedStyle(document.documentElement);
                    const imageUrl = computedStyle.getPropertyValue('--section-3-image-url').trim();
                    // Extraer la URL de la función url()
                    const urlMatch = imageUrl.match(/url\(['"]?([^'"]+)['"]?\)/);
                    const imageSrc = urlMatch ? urlMatch[1] : '../../../assets/uploads/images/galeria/galeria_1_1768765261_0.jpg';
                    
                    // Cargar la imagen
                    img.src = imageSrc;
                }
                
                // Detectar relación de aspecto
                detectarRelacionAspectoSection3();
            }
            
            // Inicializar sección 3
            initSection3();
            
            // Re-inicializar cuando se abre el sobre
            if (envelopeOverlay) {
                envelopeOverlay.addEventListener('click', function() {
                    setTimeout(function() {
                        if (templateContent && templateContent.classList.contains('show')) {
                            initSection3();
                        }
                    }, 1200);
                });
            }
            
            // ============================================
            // SECCIÓN 5: Video Personalizado
            // ============================================
            
            function initSection5() {
                const section5Container = document.getElementById('section-5-container');
                const section5Video = document.getElementById('section-5-video');
                const section5Cover = document.getElementById('section-5-cover');
                const section5PlayButton = document.getElementById('section-5-play-button');
                const section5FocusOverlay = document.getElementById('section-5-focus-overlay');
                const section5CloseButton = document.getElementById('section-5-close-button');
                
                if (!section5Container || !section5Video || !section5Cover || !section5PlayButton || !section5FocusOverlay || !section5CloseButton) {
                    return;
                }
                
                // Función para reproducir video con efecto de enfoque
                function playVideo() {
                    try {
                        // Activar overlay de enfoque primero
                        section5FocusOverlay.classList.add('active');
                        
                        // Agregar clase playing al video
                        section5Video.classList.add('playing');
                        
                        // Forzar reflow para aplicar estilos inmediatamente
                        void section5Video.offsetHeight;
                        
                        // Ocultar cover
                        section5Cover.classList.add('hidden');
                        
                        // Quitar muted para que tenga sonido
                        section5Video.muted = false;
                        
                        // Intentar reproducir
                        const playPromise = section5Video.play();
                        
                        if (playPromise !== undefined) {
                            playPromise.then(function() {
                                console.log('✓ Video sección 5 reproduciéndose correctamente');
                            }).catch(function(error) {
                                console.error('✗ Error al reproducir video:', error);
                                // Si falla, intentar con muted primero
                                section5Video.muted = true;
                                section5Video.play().then(function() {
                                    setTimeout(function() {
                                        section5Video.muted = false;
                                    }, 200);
                                }).catch(function(err) {
                                    console.error('✗ Error incluso con muted:', err);
                                    pauseVideo();
                                });
                            });
                        }
                    } catch (error) {
                        console.error('✗ Error en playVideo:', error);
                        pauseVideo();
                    }
                }
                
                // Función para pausar video y salir del modo focus
                function pauseVideo() {
                    section5Video.pause();
                    section5Video.currentTime = 0;
                    
                    // Restaurar muted
                    section5Video.muted = true;
                    
                    // Remover clase playing
                    section5Video.classList.remove('playing');
                    
                    // Desactivar overlay de enfoque
                    section5FocusOverlay.classList.remove('active');
                    
                    // Mostrar cover
                    section5Cover.classList.remove('hidden');
                }
                
                // Event listeners
                section5PlayButton.addEventListener('click', function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    playVideo();
                });
                
                section5Cover.addEventListener('click', function(e) {
                    if (e.target.closest('.section-5-play-button')) {
                        return;
                    }
                    if (e.target === section5Cover) {
                        e.preventDefault();
                        playVideo();
                    }
                });
                
                // Botón de cerrar
                section5CloseButton.addEventListener('click', function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    pauseVideo();
                });
                
                // Cerrar al hacer clic en el overlay oscuro
                section5FocusOverlay.addEventListener('click', function(e) {
                    if (e.target === section5FocusOverlay || e.target.closest('.section-5-close-button')) {
                        return;
                    }
                    if (e.target === section5Video || e.target.closest('video')) {
                        return;
                    }
                    pauseVideo();
                });
                
                // Cerrar con tecla Escape
                document.addEventListener('keydown', function(e) {
                    if (e.key === 'Escape' && section5Video.classList.contains('playing')) {
                        pauseVideo();
                    }
                });
            }
            
            // Inicializar sección 5
            initSection5();
            
            // Re-inicializar cuando se abre el sobre
            if (envelopeOverlay) {
                envelopeOverlay.addEventListener('click', function() {
                    setTimeout(function() {
                        if (templateContent && templateContent.classList.contains('show')) {
                            initSection5();
                        }
                    }, 1200);
                });
            }
            
            // ============================================
            // SECCIÓN 8: Confirmación de Asistencia
            // ============================================
            
            function initSection8() {
                // Slider automático
                const slider = document.getElementById('section-8-slider');
                const slides = slider ? slider.querySelectorAll('.section-8-slide') : [];
                let currentSlide = 0;
                
                if (slides.length === 0) return;
                
                function nextSlide() {
                    slides[currentSlide].classList.remove('active');
                    currentSlide = (currentSlide + 1) % slides.length;
                    slides[currentSlide].classList.add('active');
                }
                
                // Cambiar slide cada 4 segundos
                if (slides.length > 1) {
                    setInterval(nextSlide, 4000);
                }
                
                // Modales
                const modalYes = document.getElementById('section-8-modal-yes');
                const modalNo = document.getElementById('section-8-modal-no');
                const buttonYes = document.getElementById('section-8-button-yes');
                const buttonNo = document.getElementById('section-8-button-no');
                const confirmYes = document.getElementById('section-8-confirm-yes');
                const cancelYes = document.getElementById('section-8-cancel-yes');
                const confirmNo = document.getElementById('section-8-confirm-no');
                const cancelNo = document.getElementById('section-8-cancel-no');
                
                // Abrir modal "Si asistiré"
                if (buttonYes && modalYes) {
                    buttonYes.addEventListener('click', function() {
                        modalYes.classList.add('active');
                    });
                }
                
                // Abrir modal "No asistiré"
                if (buttonNo && modalNo) {
                    buttonNo.addEventListener('click', function() {
                        modalNo.classList.add('active');
                    });
                }
                
                // Cerrar modal "Si asistiré"
                if (cancelYes && modalYes) {
                    cancelYes.addEventListener('click', function() {
                        modalYes.classList.remove('active');
                    });
                }
                
                if (confirmYes && modalYes) {
                    confirmYes.addEventListener('click', function() {
                        console.log('Asistencia confirmada');
                        modalYes.classList.remove('active');
                    });
                }
                
                // Cerrar modal "No asistiré"
                if (cancelNo && modalNo) {
                    cancelNo.addEventListener('click', function() {
                        modalNo.classList.remove('active');
                    });
                }
                
                if (confirmNo && modalNo) {
                    confirmNo.addEventListener('click', function() {
                        const comment = document.getElementById('section-8-modal-comment');
                        console.log('Inasistencia confirmada', comment ? comment.value : '');
                        modalNo.classList.remove('active');
                        if (comment) comment.value = '';
                    });
                }
                
                // Cerrar modales al hacer clic en el overlay
                if (modalYes) {
                    const overlayYes = modalYes.querySelector('.section-8-modal-overlay');
                    if (overlayYes) {
                        overlayYes.addEventListener('click', function() {
                            modalYes.classList.remove('active');
                        });
                    }
                }
                
                if (modalNo) {
                    const overlayNo = modalNo.querySelector('.section-8-modal-overlay');
                    if (overlayNo) {
                        overlayNo.addEventListener('click', function() {
                            modalNo.classList.remove('active');
                        });
                    }
                }
                
                // Cerrar modales con tecla Escape
                document.addEventListener('keydown', function(e) {
                    if (e.key === 'Escape') {
                        if (modalYes && modalYes.classList.contains('active')) {
                            modalYes.classList.remove('active');
                        }
                        if (modalNo && modalNo.classList.contains('active')) {
                            modalNo.classList.remove('active');
                        }
                    }
                });
            }
            
            // Inicializar sección 8
            setTimeout(function() {
                initSection8();
            }, 1000);
            
            // También inicializar cuando se abre el sobre
            if (envelopeOverlay) {
                envelopeOverlay.addEventListener('click', function() {
                    setTimeout(function() {
                        if (templateContent && templateContent.classList.contains('show')) {
                            initSection8();
                        }
                    }, 2000);
                });
            }
            
            // ============================================
            // SECCIÓN 10: Playlist Musical
            // ============================================
            
            function initSection10() {
                const addButton = document.getElementById('section-10-add-button');
                const artistInput = document.getElementById('section-10-artist');
                const titleInput = document.getElementById('section-10-title');
                const playlistItems = document.getElementById('section-10-playlist-items');
                const playlistEmpty = document.getElementById('section-10-playlist-empty');
                const playlistCount = document.getElementById('section-10-playlist-count');
                
                if (!addButton || !artistInput || !titleInput || !playlistItems || !playlistEmpty || !playlistCount) {
                    return;
                }
                
                let songs = [];
                
                function updatePlaylistCount() {
                    const count = songs.length;
                    playlistCount.textContent = count + (count === 1 ? ' canción' : ' canciones');
                }
                
                function addSong(artist, title) {
                    if (!artist.trim() || !title.trim()) {
                        alert('Por favor completa ambos campos');
                        return;
                    }
                    
                    const song = {
                        id: Date.now(),
                        artist: artist.trim(),
                        title: title.trim()
                    };
                    
                    songs.push(song);
                    renderPlaylist();
                    updatePlaylistCount();
                    
                    // Limpiar inputs
                    artistInput.value = '';
                    titleInput.value = '';
                    artistInput.focus();
                }
                
                function removeSong(id) {
                    songs = songs.filter(song => song.id !== id);
                    renderPlaylist();
                    updatePlaylistCount();
                }
                
                function renderPlaylist() {
                    // Ocultar mensaje vacío si hay canciones
                    playlistEmpty.style.display = songs.length === 0 ? 'flex' : 'none';
                    
                    // Limpiar lista
                    playlistItems.innerHTML = '';
                    
                    // Agregar canciones
                    songs.forEach(function(song, index) {
                        const songItem = document.createElement('div');
                        songItem.className = 'section-10-playlist-item';
                        songItem.innerHTML = `
                            <div class="section-10-playlist-item-number">${index + 1}</div>
                            <div class="section-10-playlist-item-content">
                                <div class="section-10-playlist-item-title">${song.title}</div>
                                <div class="section-10-playlist-item-artist">${song.artist}</div>
                            </div>
                            <button class="section-10-playlist-item-remove" data-id="${song.id}" aria-label="Eliminar canción">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z" fill="currentColor"/>
                                </svg>
                            </button>
                        `;
                        
                        // Agregar evento de eliminar
                        const removeBtn = songItem.querySelector('.section-10-playlist-item-remove');
                        if (removeBtn) {
                            removeBtn.addEventListener('click', function() {
                                removeSong(song.id);
                            });
                        }
                        
                        playlistItems.appendChild(songItem);
                    });
                }
                
                // Event listener para agregar canción
                addButton.addEventListener('click', function() {
                    addSong(artistInput.value, titleInput.value);
                });
                
                // Agregar canción con Enter
                titleInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        addSong(artistInput.value, titleInput.value);
                    }
                });
                
                artistInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        titleInput.focus();
                    }
                });
                
                // Inicializar contador
                updatePlaylistCount();
            }
            
            // Inicializar sección 10
            setTimeout(function() {
                initSection10();
            }, 1000);
            
            // También inicializar cuando se abre el sobre
            if (envelopeOverlay) {
                envelopeOverlay.addEventListener('click', function() {
                    setTimeout(function() {
                        if (templateContent && templateContent.classList.contains('show')) {
                            initSection10();
                        }
                    }, 2500);
                });
            }
            
            // ============================================
            // SECCIÓN 11: Información Adicional (Tabs)
            // ============================================
            
            function initSection11() {
                const tabButtons = document.querySelectorAll('.section-11-tab-button');
                const tabPanels = document.querySelectorAll('.section-11-tab-panel');
                
                if (tabButtons.length === 0 || tabPanels.length === 0) {
                    return;
                }
                
                function switchTab(tabName) {
                    // Remover clase active de todos los botones y paneles
                    tabButtons.forEach(function(button) {
                        button.classList.remove('active');
                    });
                    
                    tabPanels.forEach(function(panel) {
                        panel.classList.remove('active');
                    });
                    
                    // Agregar clase active al botón y panel correspondiente
                    const activeButton = document.querySelector(`[data-tab="${tabName}"]`);
                    const activePanel = document.getElementById(`section-11-panel-${tabName}`);
                    
                    if (activeButton) {
                        activeButton.classList.add('active');
                    }
                    
                    if (activePanel) {
                        activePanel.classList.add('active');
                    }
                }
                
                // Agregar event listeners a los botones
                tabButtons.forEach(function(button) {
                    button.addEventListener('click', function() {
                        const tabName = this.getAttribute('data-tab');
                        if (tabName) {
                            switchTab(tabName);
                        }
                    });
                });
            }
            
            // Inicializar sección 11
            initSection11();
            
            // También inicializar cuando se abre el sobre
            if (envelopeOverlay) {
                envelopeOverlay.addEventListener('click', function() {
                    setTimeout(function() {
                        if (templateContent && templateContent.classList.contains('show')) {
                            initSection11();
                        }
                    }, 1200);
                });
            }
        });
    </script>
</body>
</html>
