<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="La cabaña 'de los techos rojos' - Un lugar mágico ubicado en un cañón con vistas increíbles. Ven a disfrutar de la naturaleza y relajarte.">
    <title>La Cabaña 'De los Techos Rojos' - Un Lugar Mágico</title>
    <link rel="stylesheet" href="css/styles.css">
    <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=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Header -->
    <header class="header" id="header">
        <nav class="nav">
            <div class="nav-container">
                <div class="logo">
                    <h1>La Cabaña</h1>
                    <span class="logo-subtitle">De los Techos Rojos</span>
                </div>
                <div class="social-links-header">
                    <a href="https://www.facebook.com/Lacabanadelostechosrojos/" target="_blank" class="social-link" aria-label="Facebook">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                        </svg>
                    </a>
                    <a href="https://www.instagram.com/lcdltr.cuu" target="_blank" class="social-link" aria-label="Instagram">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                        </svg>
                    </a>
                    <a href="https://www.tiktok.com/@lcdltr.cuu" target="_blank" class="social-link" aria-label="TikTok">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
                        </svg>
                    </a>
                </div>
                <ul class="nav-menu" id="nav-menu">
                    <li><a href="#inicio" class="nav-link">Inicio</a></li>
                    <li><a href="#nosotros" class="nav-link">Nosotros</a></li>
                    <li><a href="#servicios" class="nav-link">Servicios</a></li>
                    <li><a href="#precios" class="nav-link">Precios</a></li>
                    <li><a href="#galeria" class="nav-link">Galería</a></li>
                    <li><a href="#videos" class="nav-link">Videos</a></li>
                    <li><a href="#contacto" class="nav-link">Contacto</a></li>
                </ul>
                <div class="nav-toggle" id="nav-toggle">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </nav>
    </header>

    <!-- Demo Modal - Full Screen -->
    <div class="demo-modal" id="demo-modal">
        <div class="demo-modal-content">
            <div class="demo-modal-icon">🚧</div>
            <h2 class="demo-modal-title">Versión DEMO</h2>
            <p class="demo-modal-text">Esta es una versión de demostración del sitio web.</p>
            <p class="demo-modal-contact">Para más información, contactar al desarrollador web.</p>
            <button class="btn btn-demo-close" id="demo-modal-close">Entendido</button>
        </div>
    </div>

    <!-- Hero Section -->
    <section class="hero" id="inicio">
        <div class="hero-overlay"></div>
        <div class="hero-content">
            <h1 class="hero-title">Bienvenido a un Lugar Mágico</h1>
            <p class="hero-subtitle">Estamos ubicados en un cañón, la vista es increíble, ¡queremos compartir esta experiencia contigo!</p>
            <a href="#contacto" class="btn btn-primary">Reserva Ahora</a>
        </div>
        <div class="hero-scroll">
            <span>Desliza para descubrir</span>
            <div class="scroll-arrow"></div>
        </div>
    </section>

    <!-- About Section -->
    <section class="about" id="nosotros">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Sobre Nosotros</h2>
                <div class="title-decoration"></div>
            </div>
            <div class="about-content">
                <div class="about-text">
                    <h3>¡Hola! Somos un lugar "MÁGICO"...</h3>
                    <p>Así nos describe la gente que nos visita. Estamos ubicados en un cañón, la vista es increíble, ¡queremos compartir esta experiencia contigo!</p>
                    <p>La Cabaña 'De los Techos Rojos' es el lugar perfecto para escapar del estrés diario, disfrutar de la naturaleza y crear momentos inolvidables con tus seres queridos.</p>
                    <p>Nuestro espacio combina la comodidad con la aventura, ofreciendo un ambiente rústico y acogedor en medio de un entorno natural espectacular.</p>
                </div>
                <div class="about-image">
                    <img src="gallery_lacabana/1.jpg" alt="La Cabaña 'De los Techos Rojos'" class="about-img" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="image-placeholder" style="display: none;">
                        <span>Imagen del lugar</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section class="services" id="servicios">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Nuestros Servicios</h2>
                <div class="title-decoration"></div>
                <p class="section-subtitle">Disfruta de todas nuestras amenidades</p>
            </div>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-icon">🏊</div>
                    <h3>Alberca</h3>
                    <p>Refréscate en nuestra alberca mientras disfrutas de las vistas al cañón</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">🔥</div>
                    <h3>Asador</h3>
                    <p>Prepara deliciosas parrilladas con nuestros asadores equipados</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">🚿</div>
                    <h3>Baños con Regadera</h3>
                    <p>Baños completos con regadera para tu comodidad</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">🛋️</div>
                    <h3>Mobiliario</h3>
                    <p>Mobiliario cómodo para relajarte y disfrutar</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">🏗️</div>
                    <h3>Tejaban</h3>
                    <p>Áreas cubiertas para protegerte del sol y la lluvia</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">🌳</div>
                    <h3>Pergolado</h3>
                    <p>Espacios al aire libre con pergolados para disfrutar del entorno</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">🔥</div>
                    <h3>Área de Fogata</h3>
                    <p>Disfruta de noches mágicas alrededor de la fogata</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">🌄</div>
                    <h3>Vistas Increíbles</h3>
                    <p>Vistas panorámicas del cañón y la naturaleza</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing Section -->
    <section class="pricing" id="precios">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Tarifas y Precios</h2>
                <div class="title-decoration"></div>
                <p class="section-subtitle">Conoce nuestras tarifas y paquetes disponibles</p>
            </div>
            
            <!-- Paquetes de Cabañas -->
            <div class="pricing-section-title">
                <h3>Nuestros Paquetes</h3>
            </div>
            <div class="pricing-grid">
                <!-- Paquete 1 - Cabaña Chica -->
                <div class="pricing-card">
                    <div class="pricing-header">
                        <h3>Paquete 1</h3>
                        <h4 class="pricing-package-name">Cabaña Chica</h4>
                        <div class="pricing-price">
                            <span class="currency">$</span>
                            <span class="amount">5,000</span>
                            <span class="period">MXN</span>
                        </div>
                        <p class="pricing-subtitle">2 personas</p>
                    </div>
                    <div class="pricing-features">
                        <ul>
                            <li>✓ Acceso a todas las instalaciones</li>
                            <li>✓ Uso de alberca</li>
                            <li>✓ Área de fogata</li>
                            <li>✓ Baños con regadera</li>
                            <li>✓ Mobiliario</li>
                            <li>✓ Estacionamiento</li>
                        </ul>
                    </div>
                    <a href="#contacto" class="btn btn-pricing">Reservar Ahora</a>
                </div>

                <!-- Paquete 2 - Cabaña Grande -->
                <div class="pricing-card featured">
                    <div class="pricing-badge">Más Popular</div>
                    <div class="pricing-header">
                        <h3>Paquete 2</h3>
                        <h4 class="pricing-package-name">Cabaña Grande</h4>
                        <div class="pricing-price">
                            <span class="currency">$</span>
                            <span class="amount">6,500</span>
                            <span class="period">MXN</span>
                        </div>
                        <p class="pricing-subtitle">1-10 personas</p>
                    </div>
                    <div class="pricing-features">
                        <ul>
                            <li>✓ Todas las amenidades incluidas</li>
                            <li>✓ Uso de asador</li>
                            <li>✓ Acceso a área de fogata</li>
                            <li>✓ Mobiliario completo</li>
                            <li>✓ Tejaban y pergolado</li>
                            <li>✓ Vistas increíbles del cañón</li>
                        </ul>
                    </div>
                    <a href="#contacto" class="btn btn-pricing">Reservar Ahora</a>
                </div>

                <!-- Paquete 3 - Cabañas Chica & Grande -->
                <div class="pricing-card">
                    <div class="pricing-header">
                        <h3>Paquete 3</h3>
                        <h4 class="pricing-package-name">Cabañas Chica & Grande</h4>
                        <div class="pricing-price">
                            <span class="currency">$</span>
                            <span class="amount">7,000</span>
                            <span class="period">MXN</span>
                        </div>
                        <p class="pricing-subtitle">1-10 personas</p>
                    </div>
                    <div class="pricing-features">
                        <ul>
                            <li>✓ Ambas cabañas incluidas</li>
                            <li>✓ Espacio amplio para grupos</li>
                            <li>✓ Todas las instalaciones</li>
                            <li>✓ Áreas comunes amplias</li>
                            <li>✓ Servicio completo</li>
                            <li>✓ Ideal para eventos</li>
                        </ul>
                    </div>
                    <a href="#contacto" class="btn btn-pricing">Reservar Ahora</a>
                </div>
            </div>

            <!-- Costos Adicionales -->
            <div class="pricing-section-title" style="margin-top: 4rem;">
                <h3>Costos Adicionales</h3>
            </div>
            <div class="additional-costs-grid">
                <div class="additional-cost-item">
                    <div class="cost-icon">🔥</div>
                    <div class="cost-info">
                        <h4>Costal de Leña</h4>
                        <p class="cost-price">$250 c/u</p>
                    </div>
                </div>
                <div class="additional-cost-item">
                    <div class="cost-icon">👤</div>
                    <div class="cost-info">
                        <h4>Persona Adicional</h4>
                        <p class="cost-price">$250 c/u</p>
                    </div>
                </div>
                <div class="additional-cost-item">
                    <div class="cost-icon">🐕</div>
                    <div class="cost-info">
                        <h4>Mascota</h4>
                        <p class="cost-price">$500 c/u</p>
                    </div>
                </div>
                <div class="additional-cost-item">
                    <div class="cost-icon">⏰</div>
                    <div class="cost-info">
                        <h4>Hora Adicional</h4>
                        <p class="cost-price">$250 c/u</p>
                    </div>
                </div>
            </div>

            <!-- Política de Reservación -->
            <div class="reservation-policy">
                <h3>Política de Reservación</h3>
                <div class="policy-content">
                    <div class="policy-item">
                        <div class="policy-icon">💰</div>
                        <div class="policy-text">
                            <h4>Anticipo</h4>
                            <p>Para reservar pedimos un <strong>50% de anticipo</strong></p>
                        </div>
                    </div>
                    <div class="policy-item">
                        <div class="policy-icon">💵</div>
                        <div class="policy-text">
                            <h4>Pago Restante</h4>
                            <p>El resto es en <strong>efectivo al llegar</strong> a las instalaciones</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Información Adicional -->
            <div class="pricing-info-grid">
                <div class="pricing-info-card">
                    <div class="info-icon">📅</div>
                    <h4>Política de Reservación</h4>
                    <p>Se requiere reservación previa. Contáctanos para verificar disponibilidad y confirmar tu estancia.</p>
                </div>
                <div class="pricing-info-card">
                    <div class="info-icon">💰</div>
                    <h4>Formas de Pago</h4>
                    <p>Aceptamos efectivo y transferencias bancarias. Consulta métodos de pago disponibles al reservar.</p>
                </div>
                <div class="pricing-info-card">
                    <div class="info-icon">📋</div>
                    <h4>Política de Cancelación</h4>
                    <p>Consulta nuestras políticas de cancelación y reembolso al momento de hacer tu reservación.</p>
                </div>
                <div class="pricing-info-card">
                    <div class="info-icon">🌡️</div>
                    <h4>Temporadas</h4>
                    <p>Los precios pueden variar según temporada alta/baja. Contáctanos para conocer tarifas actuales.</p>
                </div>
            </div>

            <!-- Notas Importantes -->
            <div class="important-notes">
                <h3>⚠️ Notas Importantes</h3>
                <div class="notes-grid">
                    <div class="note-item">
                        <div class="note-icon">🚫</div>
                        <p><strong>No se devuelven anticipos.</strong> No se cambian fechas.</p>
                    </div>
                    <div class="note-item">
                        <div class="note-icon">🚗</div>
                        <p><strong>No se permiten:</strong> Motos, cuatrimotos y/o razers.</p>
                    </div>
                    <div class="note-item">
                        <div class="note-icon">👶</div>
                        <p><strong>Niños:</strong> Se cobran a partir de 5 años.</p>
                    </div>
                </div>
            </div>

            <div class="pricing-note">
                <p><strong>Información Adicional:</strong> Los precios mostrados son por paquete completo. Para obtener más información sobre disponibilidad, reservaciones y cualquier consulta, contáctanos directamente por teléfono o WhatsApp.</p>
                <div class="pricing-contact-cta">
                    <a href="https://wa.me/526141253346?text=¡Hola!%20Vengo%20de%20la%20página%20web%20de%20La%20Cabaña%20'De%20los%20Techos%20Rojos'%20y%20me%20interesa%20conocer%20más%20sobre%20sus%20servicios%20y%20disponibilidad%20para%20reservar." class="btn btn-whatsapp" target="_blank">
                        Consultar Disponibilidad por WhatsApp
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Gallery Section -->
    <section class="gallery" id="galeria">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Galería de Fotos</h2>
                <div class="title-decoration"></div>
                <p class="section-subtitle">Conoce nuestro lugar a través de imágenes</p>
            </div>
            <div class="gallery-grid" id="gallery-grid">
                <!-- Las imágenes se cargarán dinámicamente desde gallery_lacabana/ -->
            </div>
        </div>
    </section>

    <!-- Videos Section -->
    <section class="videos" id="videos">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Videos</h2>
                <div class="title-decoration"></div>
                <p class="section-subtitle">Conoce más sobre nuestro lugar a través de nuestros videos</p>
            </div>
            <div class="videos-grid">
                <!-- Video 1 -->
                <div class="video-item">
                    <div class="video-wrapper">
                        <iframe 
                            src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2Fabelaguilar4%2Fvideos%2F923281599113156&show_text=false&width=476&t=0" 
                            width="100%" 
                            height="476" 
                            style="border:none;overflow:hidden" 
                            scrolling="no" 
                            frameborder="0" 
                            allowfullscreen="true" 
                            allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" 
                            allowFullScreen="true">
                        </iframe>
                    </div>
                </div>

                <!-- Video 2 -->
                <div class="video-item">
                    <div class="video-wrapper">
                        <iframe 
                            src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2Freel%2F1087098802319726&show_text=false&width=476&t=0" 
                            width="100%" 
                            height="476" 
                            style="border:none;overflow:hidden" 
                            scrolling="no" 
                            frameborder="0" 
                            allowfullscreen="true" 
                            allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" 
                            allowFullScreen="true">
                        </iframe>
                    </div>
                </div>

                <!-- Video 3 -->
                <div class="video-item">
                    <div class="video-wrapper">
                        <iframe 
                            src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2Freel%2F336137764742569&show_text=false&width=476&t=0" 
                            width="100%" 
                            height="476" 
                            style="border:none;overflow:hidden" 
                            scrolling="no" 
                            frameborder="0" 
                            allowfullscreen="true" 
                            allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" 
                            allowFullScreen="true">
                        </iframe>
                    </div>
                </div>

                <!-- Video 4 -->
                <div class="video-item">
                    <div class="video-wrapper">
                        <iframe 
                            src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2Freel%2F317636196464912&show_text=false&width=476&t=0" 
                            width="100%" 
                            height="476" 
                            style="border:none;overflow:hidden" 
                            scrolling="no" 
                            frameborder="0" 
                            allowfullscreen="true" 
                            allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" 
                            allowFullScreen="true">
                        </iframe>
                    </div>
                </div>
            </div>
            <div class="videos-cta">
                <p>Síguenos en nuestras redes sociales para ver más contenido</p>
                <div class="social-links">
                    <a href="https://www.facebook.com/Lacabanadelostechosrojos/" target="_blank" class="social-btn social-facebook" aria-label="Facebook">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                        </svg>
                        Facebook
                    </a>
                    <a href="https://www.instagram.com/lcdltr.cuu" target="_blank" class="social-btn social-instagram" aria-label="Instagram">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                        </svg>
                        Instagram
                    </a>
                    <a href="https://www.tiktok.com/@lcdltr.cuu" target="_blank" class="social-btn social-tiktok" aria-label="TikTok">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
                        </svg>
                        TikTok
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="contact" id="contacto">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Contacto y Ubicación</h2>
                <div class="title-decoration"></div>
            </div>
            <div class="contact-content">
                <div class="contact-info">
                    <h3>Información de Contacto</h3>
                    <div class="contact-item">
                        <div class="contact-icon">📞</div>
                        <div class="contact-details">
                            <h4>Teléfonos</h4>
                            <a href="tel:6141253346">614 125 3346</a><br>
                            <a href="tel:6145332177">614 533 2177</a>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">📍</div>
                        <div class="contact-details">
                            <h4>Ubicación</h4>
                            <p>Carretera Juárez, El Cañón<br>
                            Carretera Federal 45, Supermanzana km54<br>
                            31620 Ejido Bella Vista, Chih.</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">💬</div>
                        <div class="contact-details">
                            <h4>Reservaciones</h4>
                            <p>Llámanos o escríbenos por WhatsApp para más información y reservaciones</p>
                            <a href="https://wa.me/526141253346?text=¡Hola!%20Vengo%20de%20la%20página%20web%20de%20La%20Cabaña%20'De%20los%20Techos%20Rojos'%20y%20me%20interesa%20conocer%20más%20sobre%20sus%20servicios%20y%20disponibilidad%20para%20reservar." class="btn btn-whatsapp" target="_blank">
                                Contactar por WhatsApp
                            </a>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">📱</div>
                        <div class="contact-details">
                            <h4>Redes Sociales</h4>
                            <p>Síguenos en nuestras redes sociales</p>
                            <div class="contact-social-links">
                                <a href="https://www.facebook.com/Lacabanadelostechosrojos/" target="_blank" class="contact-social-link" aria-label="Facebook">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                                    </svg>
                                    Facebook
                                </a>
                                <a href="https://www.instagram.com/lcdltr.cuu" target="_blank" class="contact-social-link" aria-label="Instagram">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                                    </svg>
                                    Instagram
                                </a>
                                <a href="https://www.tiktok.com/@lcdltr.cuu" target="_blank" class="contact-social-link" aria-label="TikTok">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
                                    </svg>
                                    TikTok
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="contact-map">
                    <!-- 
                    NOTA: Para obtener el código embed real de Google Maps:
                    1. Ve a https://goo.gl/maps/LCYh7rx8zp5LUSq36
                    2. Haz clic en "Compartir" > "Insertar un mapa"
                    3. Copia el código iframe y reemplaza el siguiente iframe
                    -->
                    <iframe 
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3503.1234567890123!2d-106.12345678901234!3d28.123456789012345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjjCsDA3JzI0LjQiTiAxMDbCsDA3JzI0LjQiVw!5e0!3m2!1ses!2smx!4v1234567890123!5m2!1ses!2smx" 
                        width="100%" 
                        height="450" 
                        style="border:0;" 
                        allowfullscreen="" 
                        loading="lazy" 
                        referrerpolicy="no-referrer-when-downgrade"
                        title="Ubicación de La Cabaña 'De los Techos Rojos'">
                    </iframe>
                    <div class="map-link">
                        <a href="https://goo.gl/maps/LCYh7rx8zp5LUSq36" target="_blank" class="btn btn-map">
                            Ver en Google Maps
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>La Cabaña</h3>
                    <p class="footer-subtitle">De los Techos Rojos</p>
                    <p>Un lugar mágico para crear momentos inolvidables</p>
                </div>
                <div class="footer-section">
                    <h4>Enlaces Rápidos</h4>
                        <ul>
                            <li><a href="#inicio">Inicio</a></li>
                            <li><a href="#nosotros">Nosotros</a></li>
                            <li><a href="#servicios">Servicios</a></li>
                            <li><a href="#precios">Precios</a></li>
                            <li><a href="#galeria">Galería</a></li>
                            <li><a href="#videos">Videos</a></li>
                            <li><a href="#contacto">Contacto</a></li>
                        </ul>
                </div>
                <div class="footer-section">
                    <h4>Contacto</h4>
                    <p>📞 614 125 3346</p>
                    <p>📞 614 533 2177</p>
                    <p>📍 Ejido Bella Vista, Chih.</p>
                    <div class="footer-social-links">
                        <a href="https://www.facebook.com/Lacabanadelostechosrojos/" target="_blank" class="footer-social-link" aria-label="Facebook">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                            </svg>
                        </a>
                        <a href="https://www.instagram.com/lcdltr.cuu" target="_blank" class="footer-social-link" aria-label="Instagram">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                            </svg>
                        </a>
                        <a href="https://www.tiktok.com/@lcdltr.cuu" target="_blank" class="footer-social-link" aria-label="TikTok">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; <?php echo date('Y'); ?> La Cabaña 'De los Techos Rojos'. Todos los derechos reservados.</p>
                <p class="footer-credit">
                    Sitio desarrollado por 
                    <a href="https://web.imbroker.com.mx/otros-servicios.php" target="_blank" rel="noopener noreferrer" class="imbroker-link">
                        ImBroker Labs
                    </a>
                </p>
            </div>
        </div>
    </footer>

    <!-- Lightbox Modal -->
    <div class="lightbox" id="lightbox">
        <span class="lightbox-close" id="lightbox-close">&times;</span>
        <img class="lightbox-image" id="lightbox-image" src="" alt="">
        <div class="lightbox-nav">
            <button class="lightbox-prev" id="lightbox-prev">&#10094;</button>
            <button class="lightbox-next" id="lightbox-next">&#10095;</button>
        </div>
    </div>

    <script src="js/main.js"></script>
    <script src="js/demo-modal.js"></script>
</body>
</html>
