{"id":9,"date":"2026-08-04T20:02:55","date_gmt":"2026-08-04T20:02:55","guid":{"rendered":"https:\/\/springreceptionhalltx.com\/?page_id=9"},"modified":"2026-08-05T00:17:16","modified_gmt":"2026-08-05T00:17:16","slug":"inicio","status":"publish","type":"page","link":"https:\/\/springreceptionhalltx.com\/","title":{"rendered":"INICIO"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"9\" class=\"elementor elementor-9\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2a67aec e-con-full e-flex e-con e-parent\" data-id=\"2a67aec\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f0f8845 elementor-widget elementor-widget-html\" data-id=\"f0f8845\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\" class=\"scroll-smooth\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <!-- \u270f\ufe0f [EDITAR AQU\u00cd]: T\u00cdTULO DE LA P\u00c1GINA (Pesta\u00f1a del navegador) -->\r\n    <title>Spring Reception Hall | Luxury Event Venue<\/title>\r\n    \r\n    <!-- Tailwind CSS -->\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    \r\n    <!-- Google Fonts -->\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400;500;600;700&family=Montserrat:wght@300;400;500&family=Pinyon+Script&display=swap\" rel=\"stylesheet\">\r\n    \r\n    <!-- FontAwesome -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n    \r\n    <style>\r\n        :root {\r\n            --gold-light: #F9E596;\r\n            --gold-base: #C5A059;\r\n            --gold-dark: #8C6F36;\r\n            --black-base: #050505;\r\n            --black-surface: #111111;\r\n        }\r\n\r\n        body {\r\n            font-family: 'Montserrat', sans-serif;\r\n            background-color: var(--black-base);\r\n            color: #E0E0E0;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        h1, h2, h3, h4, h5, h6, .font-cinzel {\r\n            font-family: 'Cinzel', serif;\r\n        }\r\n\r\n        .font-script {\r\n            font-family: 'Pinyon Script', cursive;\r\n        }\r\n\r\n        \/* Efecto de Metal Dorado Reflejante *\/\r\n        .text-gold-metallic {\r\n            background: linear-gradient(\r\n                to bottom, \r\n                #FFF2B2 0%, \r\n                #D4AF37 25%, \r\n                #8A661C 50%, \r\n                #D4AF37 75%, \r\n                #FFF2B2 100%\r\n            );\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            text-shadow: 0px 2px 15px rgba(212, 175, 55, 0.15);\r\n        }\r\n\r\n        \/* Bot\u00f3n de Lujo Principal *\/\r\n        .btn-luxury {\r\n            display: inline-block;\r\n            background-color: transparent;\r\n            color: var(--gold-base);\r\n            border: 1px solid var(--gold-base);\r\n            padding: 16px 40px;\r\n            font-family: 'Cinzel', serif;\r\n            font-size: 0.85rem;\r\n            letter-spacing: 0.2em;\r\n            text-transform: uppercase;\r\n            position: relative;\r\n            overflow: hidden;\r\n            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n            z-index: 1;\r\n            cursor: pointer;\r\n        }\r\n\r\n        .btn-luxury::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(45deg, var(--gold-dark), var(--gold-light), var(--gold-base));\r\n            z-index: -1;\r\n            transform: scaleX(0);\r\n            transform-origin: right;\r\n            transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n        }\r\n\r\n        .btn-luxury:hover {\r\n            color: var(--black-base);\r\n            border-color: transparent;\r\n            box-shadow: 0 10px 20px rgba(197, 160, 89, 0.2);\r\n        }\r\n\r\n        .btn-luxury:hover::before {\r\n            transform: scaleX(1);\r\n            transform-origin: left;\r\n        }\r\n\r\n        \/* Formulario Elegante *\/\r\n        .input-luxury {\r\n            background: transparent;\r\n            border: none;\r\n            border-bottom: 1px solid rgba(197, 160, 89, 0.3);\r\n            color: white;\r\n            font-family: 'Montserrat', sans-serif;\r\n            font-size: 0.85rem;\r\n            padding: 12px 0;\r\n            width: 100%;\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .input-luxury:focus {\r\n            outline: none;\r\n            border-bottom-color: var(--gold-base);\r\n            box-shadow: 0 1px 0 0 var(--gold-base);\r\n        }\r\n\r\n        .input-luxury::placeholder {\r\n            color: rgba(255, 255, 255, 0.3);\r\n            font-family: 'Cinzel', serif;\r\n            letter-spacing: 0.1em;\r\n        }\r\n\r\n        \/* Mapa Filtro Oscuro *\/\r\n        .map-luxury {\r\n            filter: grayscale(100%) invert(92%) contrast(83%) hue-rotate(180deg);\r\n            opacity: 0.8;\r\n            transition: opacity 0.3s ease;\r\n        }\r\n        .map-luxury:hover {\r\n            opacity: 1;\r\n        }\r\n\r\n        \/* Carrusel Infinito *\/\r\n        .marquee-container {\r\n            display: flex;\r\n            overflow: hidden;\r\n            width: 100%;\r\n            position: relative;\r\n        }\r\n        .marquee-track {\r\n            display: flex;\r\n            width: max-content;\r\n            animation: scroll 200s linear infinite; \r\n        }\r\n        .marquee-track:hover {\r\n            animation-play-state: paused;\r\n        }\r\n        @keyframes scroll {\r\n            0% { transform: translateX(0); }\r\n            100% { transform: translateX(-50%); } \r\n        }\r\n        .marquee-item {\r\n            width: 400px;\r\n            height: 400px;\r\n            flex-shrink: 0;\r\n            position: relative;\r\n            overflow: hidden;\r\n            border-right: 1px solid rgba(197, 160, 89, 0.1);\r\n        }\r\n\r\n        \/* Modales *\/\r\n        .modal-overlay {\r\n            opacity: 0;\r\n            visibility: hidden;\r\n            transition: all 0.4s ease;\r\n        }\r\n        .modal-overlay.active {\r\n            opacity: 1;\r\n            visibility: visible;\r\n        }\r\n        .modal-content {\r\n            transform: scale(0.95) translateY(20px);\r\n            opacity: 0;\r\n            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n        }\r\n        .modal-overlay.active .modal-content {\r\n            transform: scale(1) translateY(0);\r\n            opacity: 1;\r\n        }\r\n\r\n        \/* Animaci\u00f3n Fade In *\/\r\n        .fade-in-up {\r\n            animation: fadeInUp 1s ease-out forwards;\r\n            opacity: 0;\r\n            transform: translateY(20px);\r\n        }\r\n        @keyframes fadeInUp {\r\n            to { opacity: 1; transform: translateY(0); }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body class=\"antialiased selection:bg-[#C5A059] selection:text-black\">\r\n\r\n    <header class=\"fixed w-full top-0 z-50 transition-all duration-300\" id=\"header-wrapper\">\r\n        \r\n        <!-- Top Bar Elegante (Contacto y Horario) -->\r\n        <div id=\"top-bar\" class=\"hidden lg:block w-full bg-[#050505] border-b border-[#C5A059]\/20 transition-all duration-500 overflow-hidden opacity-100 max-h-12\">\r\n            <div class=\"container mx-auto px-6 lg:px-12 flex justify-between items-center py-2.5\">\r\n                <div class=\"flex items-center gap-6 text-[0.65rem] font-cinzel tracking-[0.2em] text-gray-400 uppercase\">\r\n                    <a href=\"tel:8328863192\" class=\"hover:text-[#C5A059] transition flex items-center gap-2\">\r\n                        <i class=\"fa-solid fa-phone text-[#C5A059]\"><\/i> 832-886-3192\r\n                    <\/a>\r\n                    <a href=\"mailto:info@springreceptionhalltx.com\" class=\"hover:text-[#C5A059] transition flex items-center gap-2\">\r\n                        <i class=\"fa-solid fa-envelope text-[#C5A059]\"><\/i> info@springreceptionhalltx.com\r\n                    <\/a>\r\n                <\/div>\r\n                <div class=\"flex items-center gap-2 text-[0.65rem] font-cinzel tracking-[0.2em] text-[#C5A059] uppercase\">\r\n                    <i class=\"fa-regular fa-clock\"><\/i> Atenci\u00f3n: 12:00 PM - 8:00 PM\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Navbar Principal -->\r\n        <div id=\"main-navbar\" class=\"bg-black\/80 backdrop-blur-md border-b border-[#C5A059]\/20 transition-all duration-300\">\r\n            <div class=\"container mx-auto px-6 lg:px-12\">\r\n                <div id=\"nav-container\" class=\"flex justify-between items-center h-24 transition-all duration-300 relative\">\r\n                    \r\n                    <!-- \u270f\ufe0f [EDITAR AQU\u00cd]: LOGO DEL MEN\u00da SUPERIOR -->\r\n                    <a href=\"#\" class=\"inline-block group py-2\">\r\n                        <img decoding=\"async\" src=\"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/SPRING-RECEPTION-HALL-LOGO-1-scaled.png\" \r\n                             alt=\"Spring Reception Hall\" \r\n                             style=\"max-height: 75px; width: auto;\" \r\n                             class=\"h-16 md:h-20 object-contain transform group-hover:scale-105 transition-transform duration-500\">\r\n                    <\/a>\r\n\r\n                    <!-- Navegaci\u00f3n Desktop -->\r\n                    <nav class=\"hidden lg:flex gap-8 xl:gap-10 items-center\">\r\n                        <a href=\"#inicio\" class=\"text-xs font-cinzel tracking-widest text-gray-300 hover:text-[#C5A059] uppercase transition-colors\">Inicio<\/a>\r\n                        <a href=\"#nosotros\" class=\"text-xs font-cinzel tracking-widest text-gray-300 hover:text-[#C5A059] uppercase transition-colors\">Nosotros<\/a>\r\n                        <a href=\"#servicios\" class=\"text-xs font-cinzel tracking-widest text-gray-300 hover:text-[#C5A059] uppercase transition-colors\">Servicios<\/a>\r\n                        <a href=\"#galeria\" class=\"text-xs font-cinzel tracking-widest text-gray-300 hover:text-[#C5A059] uppercase transition-colors\">Galer\u00eda<\/a>\r\n                        \r\n                        <!-- Bot\u00f3n Reservar -->\r\n                        <a href=\"#reserva\" class=\"text-xs font-cinzel tracking-widest text-[#C5A059] border border-[#C5A059]\/50 px-6 py-3 hover:bg-[#C5A059] hover:text-black transition-all duration-300 ml-4\">\r\n                            Reservar Cita\r\n                        <\/a>\r\n                    <\/nav>\r\n\r\n                    <!-- Men\u00fa M\u00f3vil Hamburger Button -->\r\n                    <button id=\"mobile-menu-btn\" class=\"lg:hidden text-[#C5A059] text-2xl focus:outline-none\">\r\n                        <i class=\"fas fa-bars font-light\"><\/i>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Men\u00fa M\u00f3vil Desplegable -->\r\n            <div id=\"mobile-menu\" class=\"hidden absolute top-[100%] left-0 w-full bg-black\/95 backdrop-blur-xl border-b border-[#C5A059]\/30 flex-col items-center py-8 gap-6 z-40 transition-all duration-300 shadow-2xl\">\r\n                <a href=\"#inicio\" class=\"text-sm font-cinzel tracking-widest text-gray-300 hover:text-[#C5A059] uppercase transition-colors\">Inicio<\/a>\r\n                <a href=\"#nosotros\" class=\"text-sm font-cinzel tracking-widest text-gray-300 hover:text-[#C5A059] uppercase transition-colors\">Nosotros<\/a>\r\n                <a href=\"#servicios\" class=\"text-sm font-cinzel tracking-widest text-gray-300 hover:text-[#C5A059] uppercase transition-colors\">Servicios<\/a>\r\n                <a href=\"#galeria\" class=\"text-sm font-cinzel tracking-widest text-gray-300 hover:text-[#C5A059] uppercase transition-colors\">Galer\u00eda<\/a>\r\n                <a href=\"#reserva\" class=\"text-sm font-cinzel tracking-widest text-black bg-[#C5A059] px-8 py-3 hover:bg-white transition-all duration-300 mt-4\">Reservar Cita<\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/header>\r\n\r\n    <section id=\"inicio\" class=\"relative h-screen flex items-center justify-center overflow-hidden\">\r\n        <div class=\"absolute inset-0 z-0\">\r\n            <!-- \u270f\ufe0f [EDITAR AQU\u00cd]: IMAGEN DEL BANNER PRINCIPAL (Fondo CSS seguro) -->\r\n            <div class=\"absolute inset-0 w-full h-full bg-cover bg-center transform scale-105\" \r\n                 style=\"background-image: url('http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Spring-Reception-Hall-scaled.jpg');\">\r\n            <\/div>\r\n            <div class=\"absolute inset-0 bg-gradient-to-r from-black\/90 via-black\/50 to-black\/90 z-10\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"container mx-auto px-6 relative z-20 text-center mt-24\">\r\n            <div class=\"flex items-center justify-center gap-4 mb-6 fade-in-up\" style=\"animation-delay: 0.2s;\">\r\n                <span class=\"w-16 h-[1px] bg-[#C5A059]\"><\/span>\r\n                <i class=\"fa-brands fa-envira text-[#C5A059] text-lg\"><\/i>\r\n                <span class=\"w-16 h-[1px] bg-[#C5A059]\"><\/span>\r\n            <\/div>\r\n            \r\n            <h2 class=\"font-cinzel text-sm md:text-base tracking-[0.4em] text-gray-300 uppercase mb-4 fade-in-up\" style=\"animation-delay: 0.4s;\">\r\n                Te invitamos a nuestro\r\n            <\/h2>\r\n            \r\n            <h1 class=\"text-6xl md:text-8xl lg:text-[8rem] mb-8 fade-in-up leading-none\" style=\"animation-delay: 0.6s;\">\r\n                <span class=\"font-cinzel font-bold text-gold-metallic tracking-wider block\">VENUE<\/span>\r\n                <span class=\"font-cinzel font-bold text-gold-metallic tracking-wider block mt-[-10px]\">TOUR<\/span>\r\n            <\/h1>\r\n            \r\n            <p class=\"font-light text-gray-300 max-w-2xl mx-auto mb-12 text-base md:text-lg leading-relaxed fade-in-up\" style=\"animation-delay: 0.8s;\">\r\n                Conoce de cerca cada espacio, descubre nuestros servicios y visualiza el evento de tus sue\u00f1os.\r\n            <\/p>\r\n\r\n            <div class=\"fade-in-up\" style=\"animation-delay: 1s;\">\r\n                <a href=\"#reserva\" class=\"btn-luxury\">\r\n                    Agendar Recorrido\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section id=\"miercoles-tour\" class=\"py-24 bg-[var(--black-surface)] relative border-b border-[#C5A059]\/10\">\r\n        <div class=\"container mx-auto px-6 lg:px-12 2xl:px-24 relative z-10\">\r\n            <div class=\"text-center mb-16\">\r\n                <h4 class=\"font-cinzel text-[#C5A059] text-xs tracking-[0.4em] uppercase mb-4\">Entrada Gratuita<\/h4>\r\n                <h2 class=\"font-cinzel text-3xl md:text-5xl text-white mb-4\">\r\n                    Pr\u00f3ximo <span class=\"font-script text-gold-metallic text-5xl md:text-7xl lowercase\">Mi\u00e9rcoles<\/span>\r\n                <\/h2>\r\n                <div class=\"w-16 h-[1px] bg-[#C5A059] mx-auto mb-6\"><\/div>\r\n                <p class=\"text-gray-400 font-light max-w-2xl mx-auto text-sm\">Vis\u00edtanos de 4:00 PM a 9:00 PM. No necesitas cita previa. Descubre por qu\u00e9 Spring Reception Hall es el lugar donde tus sue\u00f1os cobran vida.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 xl:gap-8\">\r\n                \r\n                <!-- Tarjeta 1: Recorre -->\r\n                <div class=\"relative group overflow-hidden border border-[#C5A059]\/30 hover:border-[#C5A059] transition-colors duration-500 min-h-[400px] xl:min-h-[480px] flex flex-col items-center justify-center p-8 shadow-2xl\">\r\n                    <div class=\"absolute inset-0 w-full h-full bg-cover bg-center transition-transform duration-700 group-hover:scale-110 z-0\" \r\n                         style=\"background-image: url('http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Aurora-Silva-469-scaled.jpg');\"><\/div>\r\n                    <div class=\"absolute inset-0 bg-black\/80 group-hover:bg-black\/60 transition-colors duration-500 z-10\"><\/div>\r\n                    \r\n                    <div class=\"relative z-20 flex flex-col items-center text-center\">\r\n                        <div class=\"w-20 h-20 mx-auto border border-[#C5A059]\/50 rounded-full flex items-center justify-center mb-6 bg-black\/40 backdrop-blur-sm group-hover:bg-[#C5A059]\/20 transition-all duration-300\">\r\n                            <i class=\"fa-solid fa-landmark-dome text-3xl text-[#C5A059] group-hover:text-gold-metallic group-hover:scale-110 transition-transform\"><\/i>\r\n                        <\/div>\r\n                        <h3 class=\"font-cinzel text-white tracking-[0.2em] text-lg mb-4 uppercase\">Recorre<\/h3>\r\n                        <p class=\"text-gray-300 text-sm font-light leading-relaxed\">Nuestros elegantes salones y espacios vers\u00e1tiles dise\u00f1ados para la realeza.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Tarjeta 2: Descubre -->\r\n                <div class=\"relative group overflow-hidden border border-[#C5A059]\/30 hover:border-[#C5A059] transition-colors duration-500 min-h-[400px] xl:min-h-[480px] flex flex-col items-center justify-center p-8 shadow-2xl\">\r\n                    <div class=\"absolute inset-0 w-full h-full bg-cover bg-center transition-transform duration-700 group-hover:scale-110 z-0\" \r\n                         style=\"background-image: url('http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Jazmine-Araiza-44-scaled.jpg');\"><\/div>\r\n                    <div class=\"absolute inset-0 bg-black\/80 group-hover:bg-black\/60 transition-colors duration-500 z-10\"><\/div>\r\n                    \r\n                    <div class=\"relative z-20 flex flex-col items-center text-center\">\r\n                        <div class=\"w-20 h-20 mx-auto border border-[#C5A059]\/50 rounded-full flex items-center justify-center mb-6 bg-black\/40 backdrop-blur-sm group-hover:bg-[#C5A059]\/20 transition-all duration-300\">\r\n                            <i class=\"fa-solid fa-bell-concierge text-3xl text-[#C5A059] group-hover:text-gold-metallic group-hover:scale-110 transition-transform\"><\/i>\r\n                        <\/div>\r\n                        <h3 class=\"font-cinzel text-white tracking-[0.2em] text-lg mb-4 uppercase\">Descubre<\/h3>\r\n                        <p class=\"text-gray-300 text-sm font-light leading-relaxed\">Nuestra atenci\u00f3n personalizada y paquetes premium creados a tu medida.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Tarjeta 3: Visualiza -->\r\n                <div class=\"relative group overflow-hidden border border-[#C5A059]\/30 hover:border-[#C5A059] transition-colors duration-500 min-h-[400px] xl:min-h-[480px] flex flex-col items-center justify-center p-8 shadow-2xl\">\r\n                    <div class=\"absolute inset-0 w-full h-full bg-cover bg-center transition-transform duration-700 group-hover:scale-110 z-0\" \r\n                         style=\"background-image: url('http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Jessica-Martin-206-scaled.jpg');\"><\/div>\r\n                    <div class=\"absolute inset-0 bg-black\/80 group-hover:bg-black\/60 transition-colors duration-500 z-10\"><\/div>\r\n                    \r\n                    <div class=\"relative z-20 flex flex-col items-center text-center\">\r\n                        <div class=\"w-20 h-20 mx-auto border border-[#C5A059]\/50 rounded-full flex items-center justify-center mb-6 bg-black\/40 backdrop-blur-sm group-hover:bg-[#C5A059]\/20 transition-all duration-300\">\r\n                            <i class=\"fa-solid fa-couch text-3xl text-[#C5A059] group-hover:text-gold-metallic group-hover:scale-110 transition-transform\"><\/i>\r\n                        <\/div>\r\n                        <h3 class=\"font-cinzel text-white tracking-[0.2em] text-lg mb-4 uppercase\">Visualiza<\/h3>\r\n                        <p class=\"text-gray-300 text-sm font-light leading-relaxed\">Montajes, decoraciones y opciones exclusivas que har\u00e1n \u00fanico tu evento.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Tarjeta 4: Conoce -->\r\n                <div class=\"relative group overflow-hidden border border-[#C5A059]\/30 hover:border-[#C5A059] transition-colors duration-500 min-h-[400px] xl:min-h-[480px] flex flex-col items-center justify-center p-8 shadow-2xl\">\r\n                    <div class=\"absolute inset-0 w-full h-full bg-cover bg-center transition-transform duration-700 group-hover:scale-110 z-0\" \r\n                         style=\"background-image: url('http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Maritza-Caudillo-197-scaled.jpg');\"><\/div>\r\n                    <div class=\"absolute inset-0 bg-black\/80 group-hover:bg-black\/60 transition-colors duration-500 z-10\"><\/div>\r\n                    \r\n                    <div class=\"relative z-20 flex flex-col items-center text-center\">\r\n                        <div class=\"w-20 h-20 mx-auto border border-[#C5A059]\/50 rounded-full flex items-center justify-center mb-6 bg-black\/40 backdrop-blur-sm group-hover:bg-[#C5A059]\/20 transition-all duration-300\">\r\n                            <i class=\"fa-regular fa-calendar-check text-3xl text-[#C5A059] group-hover:text-gold-metallic group-hover:scale-110 transition-transform\"><\/i>\r\n                        <\/div>\r\n                        <h3 class=\"font-cinzel text-white tracking-[0.2em] text-lg mb-4 uppercase\">Conoce<\/h3>\r\n                        <p class=\"text-gray-300 text-sm font-light leading-relaxed\">Cada detalle y servicio de hospitalidad para que tu evento sea inolvidable.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section id=\"nosotros\" class=\"py-24 md:py-32 bg-[var(--black-base)] relative\">\r\n        <div class=\"container mx-auto px-6 lg:px-12 relative z-10\">\r\n            <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center\">\r\n                <div class=\"order-2 lg:order-1\">\r\n                    <h4 class=\"font-cinzel text-[#C5A059] text-xs tracking-[0.3em] uppercase mb-4\">Nuestra Esencia<\/h4>\r\n                    <h2 class=\"font-cinzel text-4xl md:text-5xl text-white mb-8 leading-tight\">\r\n                        M\u00e1s que un sal\u00f3n,<br>\r\n                        <span class=\"font-script text-gold-metallic text-5xl md:text-7xl lowercase\">una experiencia<\/span>\r\n                    <\/h2>\r\n                    \r\n                    <div class=\"w-12 h-[2px] bg-[#C5A059] mb-8\"><\/div>\r\n                    \r\n                    <div class=\"space-y-6 text-gray-400 font-light text-sm md:text-base leading-relaxed\">\r\n                        <p>En Spring Reception Hall, entendemos que cada celebraci\u00f3n es un momento \u00fanico en la vida. Hemos dise\u00f1ado un espacio que fusiona la arquitectura majestuosa con servicios de hospitalidad de primer nivel, creando el escenario perfecto para bodas, quincea\u00f1eras espectaculares y eventos corporativos de alto prestigio.<\/p>\r\n                        <p>Nuestra dedicaci\u00f3n a la excelencia asegura que cada detalle, desde la iluminaci\u00f3n hasta el montaje, refleje su visi\u00f3n personal con una elegancia inigualable.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"order-1 lg:order-2 relative px-4 md:px-8\">\r\n                    <div class=\"absolute inset-0 border border-[#C5A059]\/60 translate-x-4 translate-y-4 md:translate-x-8 md:translate-y-8 z-0\"><\/div>\r\n                    <div class=\"relative z-10 shadow-2xl aspect-[3\/4] w-full\">\r\n                        <div class=\"absolute inset-0 w-full h-full bg-cover bg-center\" style=\"background-image: url('http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Valeria-Ayala-73-scaled.jpg');\"><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"relative py-24 md:py-32 xl:py-40 overflow-hidden border-y border-[#C5A059]\/20\">\r\n        <div class=\"absolute inset-0 z-0\">\r\n            <div class=\"absolute inset-0 w-full h-full bg-cover bg-center filter blur-[4px] scale-105\" style=\"background-image: url('http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Spring-Reception-Hall-scaled.jpg');\"><\/div>\r\n            <div class=\"absolute inset-0 bg-gradient-to-b from-black\/95 via-black\/80 to-black\/95 z-10\"><\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"container mx-auto px-6 lg:px-12 relative z-20 max-w-6xl\">\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12\">\r\n                <!-- Mision -->\r\n                <div class=\"group relative bg-[#0a0a0a]\/80 backdrop-blur-md border border-[#C5A059]\/30 p-12 lg:p-16 hover:bg-[#0a0a0a]\/95 transition-all duration-700 shadow-[0_0_50px_rgba(0,0,0,0.6)] flex flex-col items-center text-center min-h-[400px] justify-center overflow-hidden\">\r\n                    <div class=\"absolute top-0 left-0 w-8 h-8 border-t border-l border-[#C5A059]\/40 m-4 transition-all duration-500 group-hover:scale-110 group-hover:border-[#C5A059]\"><\/div>\r\n                    <div class=\"absolute bottom-0 right-0 w-8 h-8 border-b border-r border-[#C5A059]\/40 m-4 transition-all duration-500 group-hover:scale-110 group-hover:border-[#C5A059]\"><\/div>\r\n                    \r\n                    <div class=\"mb-6 relative\">\r\n                        <div class=\"absolute inset-0 bg-[#C5A059] blur-xl opacity-20 group-hover:opacity-40 transition-opacity rounded-full\"><\/div>\r\n                        <i class=\"fa-solid fa-gem text-3xl text-[#C5A059] group-hover:text-gold-metallic transition-colors duration-500 relative z-10\"><\/i>\r\n                    <\/div>\r\n                    \r\n                    <h3 class=\"font-cinzel text-2xl lg:text-3xl text-white mb-2 tracking-widest uppercase flex items-center justify-center flex-wrap gap-2\">\r\n                        Nuestra <span class=\"font-script text-gold-metallic text-4xl lg:text-5xl lowercase\">Misi\u00f3n<\/span>\r\n                    <\/h3>\r\n                    <div class=\"w-12 h-[1px] bg-[#C5A059]\/50 mx-auto my-6\"><\/div>\r\n                    <p class=\"text-gray-300 font-light text-sm leading-relaxed max-w-sm mx-auto group-hover:text-white transition-colors duration-500\">\r\n                        Brindar un espacio de m\u00e1xima elegancia y un servicio integral de excelencia. Superamos las expectativas de nuestros clientes para convertir cada celebraci\u00f3n en una obra maestra inolvidable, cuidando cada detalle con pasi\u00f3n y profesionalismo.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <!-- Vision -->\r\n                <div class=\"group relative bg-[#0a0a0a]\/80 backdrop-blur-md border border-[#C5A059]\/30 p-12 lg:p-16 hover:bg-[#0a0a0a]\/95 transition-all duration-700 shadow-[0_0_50px_rgba(0,0,0,0.6)] flex flex-col items-center text-center min-h-[400px] justify-center overflow-hidden\">\r\n                    <div class=\"absolute top-0 left-0 w-8 h-8 border-t border-l border-[#C5A059]\/40 m-4 transition-all duration-500 group-hover:scale-110 group-hover:border-[#C5A059]\"><\/div>\r\n                    <div class=\"absolute bottom-0 right-0 w-8 h-8 border-b border-r border-[#C5A059]\/40 m-4 transition-all duration-500 group-hover:scale-110 group-hover:border-[#C5A059]\"><\/div>\r\n                    \r\n                    <div class=\"mb-6 relative\">\r\n                        <div class=\"absolute inset-0 bg-[#C5A059] blur-xl opacity-20 group-hover:opacity-40 transition-opacity rounded-full\"><\/div>\r\n                        <i class=\"fa-solid fa-eye text-3xl text-[#C5A059] group-hover:text-gold-metallic transition-colors duration-500 relative z-10\"><\/i>\r\n                    <\/div>\r\n                    \r\n                    <h3 class=\"font-cinzel text-2xl lg:text-3xl text-white mb-2 tracking-widest uppercase flex items-center justify-center flex-wrap gap-2\">\r\n                        Nuestra <span class=\"font-script text-gold-metallic text-4xl lg:text-5xl lowercase\">Visi\u00f3n<\/span>\r\n                    <\/h3>\r\n                    <div class=\"w-12 h-[1px] bg-[#C5A059]\/50 mx-auto my-6\"><\/div>\r\n                    <p class=\"text-gray-300 font-light text-sm leading-relaxed max-w-sm mx-auto group-hover:text-white transition-colors duration-500\">\r\n                        Ser el sal\u00f3n de eventos de lujo l\u00edder y m\u00e1s exclusivo en Spring, TX. Reconocidos por nuestra innovaci\u00f3n en hospitalidad, dise\u00f1os arquitect\u00f3nicos deslumbrantes y el compromiso inquebrantable de hacer que sus sue\u00f1os cobren vida.\r\n                    <\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section id=\"servicios\" class=\"py-24 bg-[var(--black-base)] relative border-b border-[#C5A059]\/20\">\r\n        <div class=\"container mx-auto px-6 lg:px-12 relative z-10\">\r\n            <div class=\"text-center mb-16\">\r\n                <h4 class=\"font-cinzel text-[#C5A059] text-xs tracking-[0.3em] uppercase mb-4\">Lo que ofrecemos<\/h4>\r\n                <h2 class=\"font-cinzel text-4xl md:text-5xl text-white mb-6\">Eventos de <span class=\"font-script text-gold-metallic text-5xl md:text-7xl lowercase\">Prestigio<\/span><\/h2>\r\n                <div class=\"w-16 h-[1px] bg-[#C5A059] mx-auto\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4\">\r\n                \r\n                <!-- Servicio 1: Bodas -->\r\n                <div class=\"group relative h-96 overflow-hidden border border-[#C5A059]\/20 shadow-2xl\">\r\n                    <div class=\"absolute inset-0 w-full h-full bg-cover bg-center transition-transform duration-1000 group-hover:scale-110\" style=\"background-image: url('http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/LillianaStubby-106-scaled.jpg');\"><\/div>\r\n                    <div class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/40 to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-300\"><\/div>\r\n                    <div class=\"absolute bottom-0 left-0 w-full p-8 translate-y-8 group-hover:translate-y-0 transition-transform duration-500 ease-out z-10\">\r\n                        <h3 class=\"font-cinzel text-2xl text-white mb-3 tracking-widest uppercase\">Bodas<\/h3>\r\n                        <div class=\"w-8 h-[1px] bg-[#C5A059] mb-4\"><\/div>\r\n                        <p class=\"text-gray-300 text-sm font-light opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100 leading-relaxed\">Ceremonias y recepciones majestuosas que marcan el inicio de su 'Felices para siempre'.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Servicio 2: Quincea\u00f1eras -->\r\n                <div class=\"group relative h-96 overflow-hidden border border-[#C5A059]\/20 shadow-2xl\">\r\n                    <div class=\"absolute inset-0 w-full h-full bg-cover bg-center transition-transform duration-1000 group-hover:scale-110\" style=\"background-image: url('http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Valeria-Ayala-84-scaled.jpg');\"><\/div>\r\n                    <div class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/40 to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-300\"><\/div>\r\n                    <div class=\"absolute bottom-0 left-0 w-full p-8 translate-y-8 group-hover:translate-y-0 transition-transform duration-500 ease-out z-10\">\r\n                        <h3 class=\"font-cinzel text-2xl text-white mb-3 tracking-widest uppercase\">Quincea\u00f1eras<\/h3>\r\n                        <div class=\"w-8 h-[1px] bg-[#C5A059] mb-4\"><\/div>\r\n                        <p class=\"text-gray-300 text-sm font-light opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100 leading-relaxed\">La celebraci\u00f3n so\u00f1ada para una princesa, con el glamour y la magia que merece.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Servicio 3: Eventos Especiales -->\r\n                <div class=\"group relative h-96 overflow-hidden border border-[#C5A059]\/20 shadow-2xl\">\r\n                    <div class=\"absolute inset-0 w-full h-full bg-cover bg-center transition-transform duration-1000 group-hover:scale-110\" style=\"background-image: url('http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Jennifer-2-scaled.jpg');\"><\/div>\r\n                    <div class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/40 to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-300\"><\/div>\r\n                    <div class=\"absolute bottom-0 left-0 w-full p-8 translate-y-8 group-hover:translate-y-0 transition-transform duration-500 ease-out z-10\">\r\n                        <h3 class=\"font-cinzel text-xl text-white mb-3 tracking-widest uppercase\">Especiales<\/h3>\r\n                        <div class=\"w-8 h-[1px] bg-[#C5A059] mb-4\"><\/div>\r\n                        <p class=\"text-gray-300 text-sm font-light opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100 leading-relaxed\">Aniversarios, galas y celebraciones privadas con un toque de distinci\u00f3n absoluto.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Servicio 4: Graduaciones -->\r\n                <div class=\"group relative h-96 overflow-hidden border border-[#C5A059]\/20 shadow-2xl\">\r\n                    <div class=\"absolute inset-0 w-full h-full bg-cover bg-center transition-transform duration-1000 group-hover:scale-110\" style=\"background-image: url('http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/SPRING-RECEPTION-HALL-GRADUACION.png');\"><\/div>\r\n                    <div class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/40 to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-300\"><\/div>\r\n                    <div class=\"absolute bottom-0 left-0 w-full p-8 translate-y-8 group-hover:translate-y-0 transition-transform duration-500 ease-out z-10\">\r\n                        <h3 class=\"font-cinzel text-2xl text-white mb-3 tracking-widest uppercase\">Graduaciones<\/h3>\r\n                        <div class=\"w-8 h-[1px] bg-[#C5A059] mb-4\"><\/div>\r\n                        <p class=\"text-gray-300 text-sm font-light opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100 leading-relaxed\">Conmemore sus logros acad\u00e9micos en un ambiente sofisticado e inolvidable.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section id=\"galeria\" class=\"py-24 bg-[var(--black-surface)] border-b border-[#C5A059]\/20 overflow-hidden relative\">\r\n        <div class=\"absolute inset-0 flex items-center justify-center opacity-5 pointer-events-none\">\r\n            <i class=\"fa-brands fa-envira text-[40rem] text-[#C5A059]\"><\/i>\r\n        <\/div>\r\n\r\n        <div class=\"container mx-auto px-6 lg:px-12 mb-12 relative z-10 flex flex-col md:flex-row justify-between items-end\">\r\n            <div>\r\n                <h4 class=\"font-cinzel text-[#C5A059] text-xs tracking-[0.3em] uppercase mb-2\">Inspiraci\u00f3n<\/h4>\r\n                <h2 class=\"font-cinzel text-3xl md:text-4xl text-white\">Nuestra <span class=\"font-script text-gold-metallic text-5xl lowercase ml-2\">Galer\u00eda<\/span><\/h2>\r\n            <\/div>\r\n            <button onclick=\"openModal()\" class=\"font-cinzel text-xs tracking-[0.2em] text-gray-400 hover:text-[#C5A059] uppercase transition mt-6 md:mt-0 flex items-center gap-2 group\">\r\n                Ver Galer\u00eda Completa \r\n                <i class=\"fa-solid fa-arrow-right-long group-hover:translate-x-2 transition-transform\"><\/i>\r\n            <\/button>\r\n        <\/div>\r\n\r\n        <!-- GALLERY CAROUSEL (Llenado por JS din\u00e1micamente) -->\r\n        <div class=\"marquee-container relative z-10\">\r\n            <!-- Contenedor vac\u00edo: El Script generar\u00e1 fondos CSS perfectos aqu\u00ed -->\r\n            <div class=\"marquee-track\" id=\"main-marquee-track\"><\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section id=\"reserva\" class=\"py-24 md:py-32 bg-[var(--black-base)] relative\">\r\n        <div class=\"container mx-auto px-6 lg:px-12 max-w-[1400px]\">\r\n            <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-0 border border-[#C5A059]\/30 rounded-sm overflow-hidden shadow-[0_0_40px_rgba(0,0,0,0.8)]\">\r\n                \r\n                <!-- Columna Formulario Integrado con FormSubmit -->\r\n                <div class=\"bg-[var(--black-surface)] p-10 md:p-16 lg:p-20 xl:p-24 relative flex flex-col justify-center min-h-[650px]\">\r\n                    <div class=\"absolute top-0 left-0 w-16 h-16 border-t-2 border-l-2 border-[#C5A059] m-6 opacity-50 pointer-events-none\"><\/div>\r\n                    <div class=\"absolute bottom-0 right-0 w-16 h-16 border-b-2 border-r-2 border-[#C5A059] m-6 opacity-50 pointer-events-none\"><\/div>\r\n\r\n                    <h3 class=\"font-cinzel text-3xl md:text-4xl text-white mb-2\">Agende un <span class=\"font-script text-gold-metallic text-5xl lowercase\">Recorrido<\/span><\/h3>\r\n                    <p class=\"font-light text-gray-400 text-sm mb-12\">D\u00e9jenos sus datos y un especialista en eventos se pondr\u00e1 en contacto con usted a la brevedad para confirmar su cita.<\/p>\r\n                    \r\n                    <form action=\"https:\/\/formsubmit.co\/info@springreceptionhalltx.com\" method=\"POST\" class=\"space-y-8 relative z-10\">\r\n                        \r\n                        <!-- Configuraciones ocultas para el correo -->\r\n                        <input type=\"hidden\" name=\"_subject\" value=\"\u00a1Nueva Solicitud de Recorrido Web!\">\r\n                        <input type=\"hidden\" name=\"_captcha\" value=\"false\">\r\n                        <input type=\"hidden\" name=\"_template\" value=\"table\">\r\n\r\n                        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\r\n                            <input type=\"text\" name=\"Nombre\" placeholder=\"NOMBRE COMPLETO\" class=\"input-luxury\" required>\r\n                            <input type=\"tel\" name=\"Telefono\" placeholder=\"TEL\u00c9FONO\" class=\"input-luxury\" required>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\r\n                            <input type=\"email\" name=\"Correo\" placeholder=\"CORREO ELECTR\u00d3NICO\" class=\"input-luxury\" required>\r\n                            \r\n                            <!-- Select Elegante -->\r\n                            <div class=\"relative\">\r\n                                <select name=\"Tipo_de_Evento\" class=\"input-luxury appearance-none cursor-pointer text-gray-400 focus:text-white\" required onchange=\"this.style.color='white'\">\r\n                                    <option value=\"\" disabled selected class=\"bg-black text-gray-500\">TIPO DE EVENTO<\/option>\r\n                                    <option value=\"Boda\" class=\"bg-[#111] text-white\">Boda<\/option>\r\n                                    <option value=\"Quincea\u00f1era\" class=\"bg-[#111] text-white\">Quincea\u00f1era<\/option>\r\n                                    <option value=\"Graduacion\" class=\"bg-[#111] text-white\">Graduaci\u00f3n<\/option>\r\n                                    <option value=\"Corporativo\" class=\"bg-[#111] text-white\">Evento Corporativo<\/option>\r\n                                    <option value=\"Otro\" class=\"bg-[#111] text-white\">Otro<\/option>\r\n                                <\/select>\r\n                                <i class=\"fa-solid fa-chevron-down absolute right-0 top-1\/2 -translate-y-1\/2 text-[#C5A059] pointer-events-none text-xs\"><\/i>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Campo de Fecha -->\r\n                        <div class=\"relative\">\r\n                            <input type=\"text\" name=\"Fecha_Estimada\" onfocus=\"(this.type='date')\" onblur=\"(this.type='text')\" placeholder=\"FECHA ESTIMADA DEL EVENTO\" class=\"input-luxury w-full text-gray-400 focus:text-white\" required>\r\n                        <\/div>\r\n                        \r\n                        <textarea name=\"Mensaje\" placeholder=\"OBSERVACIONES EXTRAS PARA SU CONSULTA\" class=\"input-luxury resize-none h-32\" required><\/textarea>\r\n                        \r\n                        <button type=\"submit\" class=\"btn-luxury w-full mt-6 flex justify-center items-center gap-3 py-5\">\r\n                            <span class=\"text-sm\">Solicitar Disponibilidad<\/span>\r\n                            <i class=\"fa-solid fa-paper-plane text-[0.8rem]\"><\/i>\r\n                        <\/button>\r\n                    <\/form>\r\n                <\/div>\r\n\r\n                <!-- Columna Mapa -->\r\n                <div class=\"h-[400px] lg:h-auto min-h-[500px] lg:min-h-[650px] bg-gray-900 relative\">\r\n                    <iframe \r\n                        src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3452.8824194098!2d-95.439366!3d30.068832!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x864734a7428f5b89%3A0xc66579fc2c53a6!2s100%20Cypresswood%20Dr%20%231300%2C%20Spring%2C%20TX%2077388!5e0!3m2!1sen!2sus!4v1700000000000!5m2!1sen!2sus\" \r\n                        class=\"w-full h-full border-0 map-luxury absolute inset-0\" \r\n                        allowfullscreen=\"\" \r\n                        loading=\"lazy\" \r\n                        referrerpolicy=\"no-referrer-when-downgrade\">\r\n                    <\/iframe>\r\n                    \r\n                    <div class=\"absolute bottom-8 left-8 bg-black\/80 backdrop-blur-md border border-[#C5A059]\/50 p-6 max-w-[280px] shadow-2xl z-10\">\r\n                        <div class=\"flex items-center gap-3 mb-3\">\r\n                            <i class=\"fa-solid fa-location-dot text-[#C5A059] text-xl\"><\/i>\r\n                            <p class=\"font-cinzel text-[#C5A059] text-sm tracking-widest uppercase\">Ubicaci\u00f3n<\/p>\r\n                        <\/div>\r\n                        <p class=\"text-white text-sm font-light leading-relaxed\">100 Cypresswood Dr.<br>Suite #1300<br>Spring, TX 77388<\/p>\r\n                        <div class=\"w-full h-[1px] bg-[#C5A059]\/30 my-4\"><\/div>\r\n                        <a href=\"tel:8328863192\" class=\"text-gray-300 hover:text-[#C5A059] transition flex items-center gap-2 text-sm font-light\">\r\n                            <i class=\"fa-solid fa-phone text-[#C5A059] text-xs\"><\/i> 832-886-3192\r\n                        <\/a>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <footer id=\"contacto\" class=\"bg-[var(--black-surface)] relative border-t border-[#C5A059]\/30 pt-20 pb-10\">\r\n        <div class=\"container mx-auto px-6 lg:px-12\">\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 border-b border-white\/10 pb-16\">\r\n                \r\n                <!-- Columna 1 -->\r\n                <div>\r\n                    <!-- \u270f\ufe0f [EDITAR AQU\u00cd]: LOGO DEL FOOTER -->\r\n                    <a href=\"#\" class=\"inline-block group mb-6\">\r\n                        <img decoding=\"async\" src=\"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/SPRING-RECEPTION-HALL-LOGO-1-scaled.png\" \r\n                             alt=\"Spring Reception Hall Logo\" \r\n                             style=\"max-height: 80px; width: auto;\" \r\n                             class=\"h-16 md:h-20 object-contain transform group-hover:scale-105 transition-transform duration-500\">\r\n                    <\/a>\r\n                    <p class=\"text-gray-400 font-light text-sm mb-6 leading-relaxed\">El lugar donde tus sue\u00f1os cobran vida. Elevamos el est\u00e1ndar de la hospitalidad y la elegancia para tus eventos m\u00e1s importantes.<\/p>\r\n                    <div class=\"flex gap-4\">\r\n                        <a href=\"#\" class=\"w-10 h-10 rounded-full border border-[#C5A059]\/50 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#C5A059] hover:border-[#C5A059] transition-all duration-300\"><i class=\"fa-brands fa-facebook-f\"><\/i><\/a>\r\n                        <a href=\"#\" class=\"w-10 h-10 rounded-full border border-[#C5A059]\/50 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#C5A059] hover:border-[#C5A059] transition-all duration-300\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Columna 2 -->\r\n                <div>\r\n                    <h4 class=\"font-cinzel text-white text-lg mb-6 tracking-widest\">Explorar<\/h4>\r\n                    <ul class=\"space-y-4\">\r\n                        <li><a href=\"#inicio\" class=\"text-gray-400 hover:text-[#C5A059] transition text-sm font-light flex items-center gap-2\"><i class=\"fa-solid fa-chevron-right text-[10px] text-[#C5A059]\"><\/i> Inicio<\/a><\/li>\r\n                        <li><a href=\"#nosotros\" class=\"text-gray-400 hover:text-[#C5A059] transition text-sm font-light flex items-center gap-2\"><i class=\"fa-solid fa-chevron-right text-[10px] text-[#C5A059]\"><\/i> Sobre Nosotros<\/a><\/li>\r\n                        <li><a href=\"#servicios\" class=\"text-gray-400 hover:text-[#C5A059] transition text-sm font-light flex items-center gap-2\"><i class=\"fa-solid fa-chevron-right text-[10px] text-[#C5A059]\"><\/i> Servicios<\/a><\/li>\r\n                        <li><a href=\"#galeria\" class=\"text-gray-400 hover:text-[#C5A059] transition text-sm font-light flex items-center gap-2\"><i class=\"fa-solid fa-chevron-right text-[10px] text-[#C5A059]\"><\/i> Galer\u00eda<\/a><\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n\r\n                <!-- Columna 3 (Contacto y Horarios) -->\r\n                <div>\r\n                    <h4 class=\"font-cinzel text-white text-lg mb-6 tracking-widest\">Contacto<\/h4>\r\n                    <ul class=\"space-y-4\">\r\n                        <li class=\"flex items-start gap-4\">\r\n                            <i class=\"fa-solid fa-location-dot text-[#C5A059] mt-1\"><\/i>\r\n                            <span class=\"text-gray-400 text-sm font-light\">100 Cypresswood Dr. Suite #1300<br>Spring, TX 77388<\/span>\r\n                        <\/li>\r\n                        <li class=\"flex items-start gap-4\">\r\n                            <i class=\"fa-solid fa-phone text-[#C5A059] mt-1\"><\/i>\r\n                            <a href=\"tel:8328863192\" class=\"text-gray-400 hover:text-[#C5A059] transition text-sm font-light\">832-886-3192<\/a>\r\n                        <\/li>\r\n                        <li class=\"flex items-start gap-4\">\r\n                            <i class=\"fa-solid fa-envelope text-[#C5A059] mt-1\"><\/i>\r\n                            <a href=\"mailto:info@springreceptionhalltx.com\" class=\"text-gray-400 hover:text-[#C5A059] transition text-sm font-light\">info@springreceptionhalltx.com<\/a>\r\n                        <\/li>\r\n                        <!-- HORARIO DE ATENCI\u00d3N EN FOOTER -->\r\n                        <li class=\"flex items-start gap-4 pt-4 mt-2 border-t border-[#C5A059]\/20\">\r\n                            <i class=\"fa-regular fa-clock text-[#C5A059] mt-1 text-lg\"><\/i>\r\n                            <div class=\"flex flex-col\">\r\n                                <span class=\"text-white text-[0.7rem] font-cinzel tracking-widest uppercase mb-1\">Horario de Atenci\u00f3n<\/span>\r\n                                <span class=\"text-gray-400 text-sm font-light\">12:00 PM - 8:00 PM<\/span>\r\n                            <\/div>\r\n                        <\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n\r\n                <!-- Columna 4 -->\r\n                <div>\r\n                    <div class=\"bg-[var(--black-base)] border border-[#C5A059]\/30 p-6 relative overflow-hidden group\">\r\n                        <div class=\"absolute top-0 right-0 w-16 h-16 bg-[#C5A059]\/10 rounded-bl-full -mr-8 -mt-8 transition-transform group-hover:scale-150\"><\/div>\r\n                        <h4 class=\"font-cinzel text-[#C5A059] text-sm mb-4 tracking-widest uppercase\">Venue Tours<\/h4>\r\n                        <p class=\"text-white font-cinzel text-xl mb-2\">Pr\u00f3ximo Mi\u00e9rcoles<\/p>\r\n                        <p class=\"text-gray-400 text-sm font-light mb-4\">De 4:00 PM a 9:00 PM<br>Entrada Gratuita<\/p>\r\n                        <a href=\"#reserva\" class=\"inline-block border border-[#C5A059] text-[#C5A059] px-4 py-2 text-xs font-cinzel tracking-widest uppercase hover:bg-[#C5A059] hover:text-black transition duration-300\">Agendar Cita<\/a>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n            \r\n            <div class=\"pt-8 flex flex-col md:flex-row justify-between items-center gap-4\">\r\n                <p class=\"font-light text-[0.65rem] tracking-widest text-gray-500 uppercase\">\r\n                    &copy; 2026 Spring Reception Hall. Todos los derechos reservados.\r\n                <\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/footer>\r\n\r\n    <!-- MODAL GALER\u00cdA COMPLETA -->\r\n    <div id=\"galleryModal\" class=\"modal-overlay fixed inset-0 z-[100] bg-black\/95 backdrop-blur-md flex items-center justify-center p-4 overflow-y-auto\">\r\n        <button onclick=\"closeModal()\" class=\"fixed top-6 right-6 md:top-10 md:right-10 text-white hover:text-[#C5A059] transition text-2xl z-[150] bg-black\/80 w-12 h-12 rounded-full flex items-center justify-center border border-[#C5A059]\/50 shadow-[0_0_15px_rgba(0,0,0,0.5)] hover:bg-[#C5A059]\/20 hover:scale-110\">\r\n            <i class=\"fa-solid fa-xmark\"><\/i>\r\n        <\/button>\r\n        <div class=\"modal-content relative w-full max-w-7xl mx-auto bg-[var(--black-surface)] border border-[#C5A059]\/30 p-6 md:p-10 my-8 mt-20\">\r\n            <div class=\"text-center mb-10 mt-4\">\r\n                <h2 class=\"font-cinzel text-3xl text-white\">Colecci\u00f3n <span class=\"font-script text-gold-metallic text-5xl lowercase ml-2\">Exclusiva<\/span><\/h2>\r\n                <div class=\"w-16 h-[1px] bg-[#C5A059]\/50 mx-auto mt-4 mb-6\"><\/div>\r\n                <div id=\"gallery-counter\" class=\"font-cinzel text-xs tracking-[0.2em] text-[#C5A059] uppercase\"><\/div>\r\n            <\/div>\r\n            <!-- Grid Uniforme (Cuadrados perfectos) -->\r\n            <div id=\"dynamic-gallery-grid\" class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4\">\r\n                <!-- Se inyectan mediante JavaScript con Background-Image -->\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- MODAL LIGHTBOX (Marco Passepartout de Museo con Botones de Navegaci\u00f3n) -->\r\n    <div id=\"lightboxModal\" class=\"modal-overlay fixed inset-0 z-[160] bg-black\/95 backdrop-blur-lg flex items-center justify-center p-4 hidden\">\r\n        <!-- Bot\u00f3n Cerrar -->\r\n        <button onclick=\"closeLightbox()\" class=\"fixed top-6 right-6 md:top-10 md:right-10 text-white hover:text-[#C5A059] transition text-2xl z-[170] bg-black\/80 w-12 h-12 rounded-full flex items-center justify-center border border-[#C5A059]\/50 shadow-[0_0_15px_rgba(0,0,0,0.5)] hover:bg-[#C5A059]\/20 hover:scale-110\">\r\n            <i class=\"fa-solid fa-xmark\"><\/i>\r\n        <\/button>\r\n        \r\n        <!-- Flecha Izquierda -->\r\n        <button onclick=\"changeLightboxImage(-1)\" class=\"fixed left-2 md:left-10 top-1\/2 -translate-y-1\/2 text-white hover:text-[#C5A059] text-2xl md:text-3xl z-[170] bg-black\/50 w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center border border-[#C5A059]\/50 shadow-[0_0_15px_rgba(0,0,0,0.5)] hover:bg-[#C5A059]\/20 hover:scale-110 transition-all hidden md:flex\">\r\n            <i class=\"fa-solid fa-chevron-left\"><\/i>\r\n        <\/button>\r\n\r\n        <!-- Flecha Derecha -->\r\n        <button onclick=\"changeLightboxImage(1)\" class=\"fixed right-2 md:right-10 top-1\/2 -translate-y-1\/2 text-white hover:text-[#C5A059] text-2xl md:text-3xl z-[170] bg-black\/50 w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center border border-[#C5A059]\/50 shadow-[0_0_15px_rgba(0,0,0,0.5)] hover:bg-[#C5A059]\/20 hover:scale-110 transition-all hidden md:flex\">\r\n            <i class=\"fa-solid fa-chevron-right\"><\/i>\r\n        <\/button>\r\n        \r\n        <div class=\"modal-content relative w-full h-full max-w-6xl mx-auto flex items-center justify-center p-4 select-none\">\r\n            <!-- Marco exterior -->\r\n            <div class=\"relative bg-[#0a0a0a] p-3 md:p-6 border border-[#C5A059]\/40 shadow-[0_0_60px_rgba(197,160,89,0.15)] flex-shrink-0\">\r\n                <!-- Marco interior con decoraciones -->\r\n                <div class=\"border border-[#C5A059]\/30 p-2 md:p-4 relative\">\r\n                    <div class=\"absolute top-0 left-0 w-8 h-8 border-t-2 border-l-2 border-[#C5A059] -translate-x-1 -translate-y-1\"><\/div>\r\n                    <div class=\"absolute top-0 right-0 w-8 h-8 border-t-2 border-r-2 border-[#C5A059] translate-x-1 -translate-y-1\"><\/div>\r\n                    <div class=\"absolute bottom-0 left-0 w-8 h-8 border-b-2 border-l-2 border-[#C5A059] -translate-x-1 translate-y-1\"><\/div>\r\n                    <div class=\"absolute bottom-0 right-0 w-8 h-8 border-b-2 border-r-2 border-[#C5A059] translate-x-1 translate-y-1\"><\/div>\r\n                    \r\n                    <img decoding=\"async\" id=\"lightboxImage\" src=\"\" alt=\"Foto Maximizada\" class=\"max-w-full max-h-[70vh] md:max-h-[80vh] object-contain shadow-2xl relative z-10 transition-opacity duration-300\">\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- Pistas t\u00e1ctiles para m\u00f3viles -->\r\n            <div class=\"absolute bottom-10 left-0 w-full text-center text-gray-400 font-light text-xs tracking-widest md:hidden animate-pulse\">\r\n                <i class=\"fa-solid fa-left-right mr-2\"><\/i> Desliza para navegar\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ L\u00f3gica del Men\u00fa M\u00f3vil Desplegable\r\n        const mobileBtn = document.getElementById('mobile-menu-btn');\r\n        const mobileMenu = document.getElementById('mobile-menu');\r\n        const mobileIcon = mobileBtn ? mobileBtn.querySelector('i') : null;\r\n\r\n        if (mobileBtn && mobileMenu) {\r\n            mobileBtn.addEventListener('click', () => {\r\n                mobileMenu.classList.toggle('hidden');\r\n                mobileMenu.classList.toggle('flex');\r\n                if(mobileMenu.classList.contains('flex')) {\r\n                    mobileIcon.classList.remove('fa-bars');\r\n                    mobileIcon.classList.add('fa-xmark');\r\n                } else {\r\n                    mobileIcon.classList.remove('fa-xmark');\r\n                    mobileIcon.classList.add('fa-bars');\r\n                }\r\n            });\r\n\r\n            \/\/ Cerrar men\u00fa al hacer clic en un enlace\r\n            const mobileLinks = mobileMenu.querySelectorAll('a');\r\n            mobileLinks.forEach(link => {\r\n                link.addEventListener('click', () => {\r\n                    mobileMenu.classList.add('hidden');\r\n                    mobileMenu.classList.remove('flex');\r\n                    mobileIcon.classList.remove('fa-xmark');\r\n                    mobileIcon.classList.add('fa-bars');\r\n                });\r\n            });\r\n        }\r\n\r\n        \/\/ Efecto Navbar oscuro al hacer scroll\r\n        window.addEventListener('scroll', () => {\r\n            const topBar = document.getElementById('top-bar');\r\n            const mainNavbar = document.getElementById('main-navbar');\r\n            const navContainer = document.getElementById('nav-container');\r\n\r\n            if (window.scrollY > 50) {\r\n                if(topBar) {\r\n                    topBar.classList.remove('max-h-12', 'opacity-100');\r\n                    topBar.classList.add('max-h-0', 'opacity-0');\r\n                }\r\n                mainNavbar.classList.add('bg-black\/95');\r\n                mainNavbar.classList.remove('bg-black\/80');\r\n                navContainer.classList.add('h-20');\r\n                navContainer.classList.remove('h-24');\r\n            } else {\r\n                if(topBar) {\r\n                    topBar.classList.add('max-h-12', 'opacity-100');\r\n                    topBar.classList.remove('max-h-0', 'opacity-0');\r\n                }\r\n                mainNavbar.classList.add('bg-black\/80');\r\n                mainNavbar.classList.remove('bg-black\/95');\r\n                navContainer.classList.add('h-24');\r\n                navContainer.classList.remove('h-20');\r\n            }\r\n        });\r\n\r\n        \/\/ \u270f\ufe0f [EDITAR AQU\u00cd]: ARREGLO OFICIAL DE 40 FOTOS\r\n        const galleryImages = [\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Amauri-Gonzalez-15-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Amauri-Gonzalez-18-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/America-Gonzalez-152-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Amauri-Gonzalez-32-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/America-Gonzalez-107-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/America-Gonzalez-148-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Aurora-Silva-40-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Aurora-Silva-303-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Aurora-Silva-469-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Jazmine-Araiza-2-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Jazmine-Araiza-44-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Jazmine-Araiza-47-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Jazmine-Araiza-253-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Jazmine-Araiza-410-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Jessica-Martin-206-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Jessica-Martin-211-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Jessica-Martin-221-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Jessica-Martin-249-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Liliana-50-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Liliana-195-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Liliana-217-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/LillianaStubby-96-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/LillianaStubby-102-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/LillianaStubby-106-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/LillianaStubby-113-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Maritza-Caudillo-197-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Maritza-Caudillo-544-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Maritza-Caudillo-819-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Natalie-203-1-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Natalie-378-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Natalie-384-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Natalie-416-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Natalya-213-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Natalya-237-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Natalya-250-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Natalya-261-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Valeria-Ayala-73-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Valeria-Ayala-84-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Valeria-Ayala-93-scaled.jpg\",\r\n            \"http:\/\/springreceptionhalltx.com\/wp-content\/uploads\/2026\/08\/Valeria-Ayala-140-scaled.jpg\"\r\n        ];\r\n\r\n        \/\/ Funci\u00f3n para mezclar arreglos (Shuffle)\r\n        function shuffleArray(array) {\r\n            for (let i = array.length - 1; i > 0; i--) {\r\n                const j = Math.floor(Math.random() * (i + 1));\r\n                [array[i], array[j]] = [array[j], array[i]];\r\n            }\r\n        }\r\n\r\n        \/\/ L\u00f3gica de Modales y Navegaci\u00f3n Inteligente\r\n        const modal = document.getElementById('galleryModal');\r\n        const lightboxModal = document.getElementById('lightboxModal');\r\n        const lightboxImage = document.getElementById('lightboxImage');\r\n        let currentLightboxIndex = 0; \/\/ \u00cdndice de la foto actual\r\n        \r\n        function openModal() {\r\n            modal.classList.add('active');\r\n            document.body.style.overflow = 'hidden'; \r\n            loadGallery(); \r\n        }\r\n\r\n        function closeModal() {\r\n            modal.classList.remove('active');\r\n            document.body.style.overflow = 'auto'; \r\n        }\r\n\r\n        function openLightbox(url) {\r\n            currentLightboxIndex = galleryImages.indexOf(url);\r\n            if (currentLightboxIndex === -1) currentLightboxIndex = 0;\r\n\r\n            lightboxImage.src = url;\r\n            lightboxImage.style.opacity = '1';\r\n            lightboxModal.classList.remove('hidden');\r\n            setTimeout(() => { lightboxModal.classList.add('active'); }, 10);\r\n        }\r\n\r\n        function closeLightbox() {\r\n            lightboxModal.classList.remove('active');\r\n            setTimeout(() => { \r\n                lightboxModal.classList.add('hidden');\r\n                lightboxImage.src = ''; \r\n            }, 400); \r\n        }\r\n\r\n        \/\/ Funci\u00f3n para cambiar de imagen (Flechas y Swipe)\r\n        function changeLightboxImage(direction) {\r\n            currentLightboxIndex += direction;\r\n            \r\n            \/\/ Loop Infinito\r\n            if (currentLightboxIndex < 0) {\r\n                currentLightboxIndex = galleryImages.length - 1;\r\n            } else if (currentLightboxIndex >= galleryImages.length) {\r\n                currentLightboxIndex = 0;\r\n            }\r\n\r\n            \/\/ Efecto de desvanecimiento\r\n            lightboxImage.style.opacity = '0.3';\r\n            setTimeout(() => {\r\n                lightboxImage.src = galleryImages[currentLightboxIndex];\r\n                lightboxImage.style.opacity = '1';\r\n            }, 200);\r\n        }\r\n\r\n        \/\/ Navegaci\u00f3n con Teclado\r\n        document.addEventListener('keydown', (e) => {\r\n            if (lightboxModal.classList.contains('active')) {\r\n                if (e.key === 'ArrowLeft') changeLightboxImage(-1);\r\n                if (e.key === 'ArrowRight') changeLightboxImage(1);\r\n                if (e.key === 'Escape') closeLightbox();\r\n            }\r\n        });\r\n\r\n        \/\/ Soporte T\u00e1ctil (Swipe en M\u00f3viles)\r\n        let touchStartX = 0;\r\n        let touchEndX = 0;\r\n        \r\n        lightboxModal.addEventListener('touchstart', e => {\r\n            touchStartX = e.changedTouches[0].screenX;\r\n        }, { passive: true });\r\n\r\n        lightboxModal.addEventListener('touchend', e => {\r\n            touchEndX = e.changedTouches[0].screenX;\r\n            const threshold = 50; \r\n            if (touchEndX < touchStartX - threshold) changeLightboxImage(1); \/\/ Swipe Izquierda = Siguiente\r\n            if (touchEndX > touchStartX + threshold) changeLightboxImage(-1); \/\/ Swipe Derecha = Anterior\r\n        }, { passive: true });\r\n\r\n        \/\/ Cerrar al dar clic fuera\r\n        modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });\r\n        lightboxModal.addEventListener('click', (e) => {\r\n            if (e.target === lightboxModal || e.target.closest('.modal-content') === lightboxModal) {\r\n                closeLightbox();\r\n            }\r\n        });\r\n\r\n        \/\/ Generador de Carrusel (Acorazado contra Elementor con bg-image)\r\n        function initMarquee() {\r\n            const track = document.getElementById('main-marquee-track');\r\n            if (!track) return;\r\n            \r\n            track.innerHTML = '';\r\n            let itemsHTML = '';\r\n            \r\n            const carouselPhotos = [...galleryImages];\r\n            shuffleArray(carouselPhotos);\r\n            \r\n            carouselPhotos.forEach(url => {\r\n                itemsHTML += `\r\n                <div class=\"marquee-item group cursor-pointer\" onclick=\"openLightbox('${url}')\">\r\n                    <div class=\"absolute inset-0 w-full h-full bg-cover bg-center transition-transform duration-700 group-hover:scale-110\" \r\n                         style=\"background-image: url('${url}');\">\r\n                    <\/div>\r\n                    <div class=\"absolute inset-0 bg-black\/50 opacity-0 group-hover:opacity-100 transition duration-300 flex items-center justify-center z-10\">\r\n                        <i class=\"fa-solid fa-expand text-[#C5A059] text-3xl transform scale-50 group-hover:scale-100 transition-all duration-300\"><\/i>\r\n                    <\/div>\r\n                <\/div>`;\r\n            });\r\n            \r\n            track.innerHTML = itemsHTML + itemsHTML; \/\/ Duplicado para efecto infinito\r\n            track.style.animationDuration = `${carouselPhotos.length * 5}s`; \r\n        }\r\n\r\n        \/\/ Generador de Cuadr\u00edcula (Cuadrados perfectos con bg-image)\r\n        let galleryLoaded = false;\r\n        function loadGallery() {\r\n            if (galleryLoaded) return;\r\n            \r\n            const grid = document.getElementById('dynamic-gallery-grid');\r\n            const counter = document.getElementById('gallery-counter');\r\n            \r\n            const gridPhotos = [...galleryImages];\r\n            shuffleArray(gridPhotos);\r\n            grid.innerHTML = ''; \r\n            \r\n            gridPhotos.forEach((url, index) => {\r\n                const div = document.createElement('div');\r\n                div.className = 'relative group overflow-hidden border border-white\/10 shadow-lg cursor-pointer aspect-square w-full fade-in-up';\r\n                if(index < 10) div.style.animationDelay = `${index * 0.05}s`;\r\n                \r\n                div.onclick = () => openLightbox(url);\r\n                \r\n                div.innerHTML = `\r\n                    <div class=\"absolute inset-0 w-full h-full bg-cover bg-center group-hover:scale-110 transition duration-700\" \r\n                         style=\"background-image: url('${url}');\">\r\n                    <\/div>\r\n                    <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/20 to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex flex-col items-center justify-center z-10\">\r\n                        <i class=\"fa-solid fa-expand text-[#C5A059] text-4xl transform translate-y-4 group-hover:translate-y-0 transition-all duration-500 mb-2\"><\/i>\r\n                        <span class=\"font-cinzel text-white text-xs tracking-widest uppercase transform translate-y-4 group-hover:translate-y-0 transition-all duration-500 delay-100\">Ampliar<\/span>\r\n                    <\/div>\r\n                `;\r\n                grid.appendChild(div);\r\n            });\r\n            \r\n            counter.innerHTML = `<i class=\"fa-solid fa-camera text-[#C5A059] mr-2\"><\/i> ${gridPhotos.length} Fotograf\u00edas Exclusivas`;\r\n            galleryLoaded = true; \r\n        }\r\n\r\n        \/\/ Inicializar el carrusel de forma segura\r\n        if (document.readyState === 'loading') {\r\n            document.addEventListener('DOMContentLoaded', initMarquee);\r\n        } else {\r\n            setTimeout(initMarquee, 100);\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Spring Reception Hall | Luxury Event Venue 832-886-3192 info@springreceptionhalltx.com Atenci\u00f3n: 12:00 PM &#8211; 8:00 PM Inicio Nosotros Servicios Galer\u00eda Reservar Cita Inicio Nosotros Servicios Galer\u00eda Reservar Cita Te invitamos a nuestro VENUE TOUR Conoce de cerca cada espacio, descubre nuestros servicios y visualiza el evento de tus sue\u00f1os. Agendar Recorrido Entrada Gratuita Pr\u00f3ximo Mi\u00e9rcoles Vis\u00edtanos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/springreceptionhalltx.com\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/springreceptionhalltx.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/springreceptionhalltx.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/springreceptionhalltx.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/springreceptionhalltx.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":41,"href":"https:\/\/springreceptionhalltx.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":101,"href":"https:\/\/springreceptionhalltx.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/101"}],"wp:attachment":[{"href":"https:\/\/springreceptionhalltx.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}