{"id":28,"date":"2025-12-10T19:24:51","date_gmt":"2025-12-10T19:24:51","guid":{"rendered":"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/?page_id=28"},"modified":"2025-12-17T20:21:19","modified_gmt":"2025-12-17T20:21:19","slug":"inicio","status":"publish","type":"page","link":"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/","title":{"rendered":"inicio"},"content":{"rendered":"<nav class=\"mulita-navbar\">\n        <div class=\"navbar-container\">\n            <!-- Logo -->\n            <a href=\"https:\/\/lamulitaaudiovisual.com.ar\/\" class=\"navbar-logo\">\n                <img decoding=\"async\" src=\"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-content\/uploads\/2025\/12\/logo-mulita.png\" alt=\"La Mulita Audiovisual\">\n            <\/a>\n\n            <!-- Men\u00fa Desktop -->\n            <ul class=\"navbar-links\">\n                <li><a href=\"#filmar\">Filmar en Catamarca<\/a><\/li>\n                <li><a href=\"#locaciones\">Locaciones<\/a><\/li>\n                <li><a href=\"#directorio\">Directorio<\/a><\/li>\n                <li><a href=\"#filmografia\">Filmograf\u00eda<\/a><\/li>\n                <li><a href=\"#beneficios\">Beneficios<\/a><\/li>\n                <li><a href=\"#novedades\">Novedades<\/a><\/li>\n            <\/ul>\n\n            <!-- CTA Desktop -->\n            <div class=\"navbar-cta\">\n                <a href=\"#contacto\" class=\"cta-button\">\n                    <i class=\"fas fa-film\"><\/i> Contacto\n                <\/a>\n            <\/div>\n\n            <!-- Men\u00fa Mobile -->\n            <div class=\"mobile-menu-toggle\">\n                <button class=\"hamburger\">\n                    <span class=\"hamburger-line\"><\/span>\n                    <span class=\"hamburger-line\"><\/span>\n                    <span class=\"hamburger-line\"><\/span>\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <!-- Men\u00fa Mobile Content -->\n        <div class=\"mobile-menu\">\n            <div class=\"mobile-menu-header\">\n                <div class=\"mobile-logo\">\n                    <img decoding=\"async\" src=\"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-content\/uploads\/2025\/12\/logo-mulita.png\" alt=\"La Mulita Audiovisual\">\n                <\/div>\n                <button class=\"mobile-close\">\n                    <span class=\"close-icon\">&times;<\/span>\n                <\/button>\n            <\/div>\n            \n            <div class=\"mobile-menu-content\">\n                <ul class=\"mobile-nav-links\">\n                    <li>\n                        <a href=\"#filmar\">\n                            <i class=\"fas fa-video\"><\/i>\n                            <span>Filmar en Catamarca<\/span>\n                        <\/a>\n                    <\/li>\n                    <li>\n                        <a href=\"#locaciones\">\n                            <i class=\"fas fa-map-marked-alt\"><\/i>\n                            <span>Locaciones<\/span>\n                        <\/a>\n                    <\/li>\n                    <li>\n                        <a href=\"#directorio\">\n                            <i class=\"fas fa-users\"><\/i>\n                            <span>Directorio<\/span>\n                        <\/a>\n                    <\/li>\n                    <li>\n                        <a href=\"#filmografia\">\n                            <i class=\"fas fa-photo-video\"><\/i>\n                            <span>Filmograf\u00eda<\/span>\n                        <\/a>\n                    <\/li>\n                    <li>\n                        <a href=\"#beneficios\">\n                            <i class=\"fas fa-star\"><\/i>\n                            <span>Beneficios<\/span>\n                        <\/a>\n                    <\/li>\n                    <li>\n                        <a href=\"#novedades\">\n                            <i class=\"fas fa-newspaper\"><\/i>\n                            <span>Novedades<\/span>\n                        <\/a>\n                    <\/li>\n                <\/ul>\n                \n                <div class=\"mobile-cta\">\n                    <a href=\"#contacto\" class=\"mobile-cta-button\">\n                        <i class=\"fas fa-film\"><\/i> Contacto\n                    <\/a>\n                <\/div>\n                \n                <div class=\"mobile-social\">\n                    <a href=\"#\" class=\"social-icon\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n                    <a href=\"#\" class=\"social-icon\"><i class=\"fab fa-instagram\"><\/i><\/a>\n                    <a href=\"#\" class=\"social-icon\"><i class=\"fab fa-youtube\"><\/i><\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <!-- Overlay para cuando el men\u00fa est\u00e1 abierto -->\n        <div class=\"mobile-overlay\"><\/div>\n    <\/nav>\n\n    <style>\n        \/* Importar tipograf\u00edas y Font Awesome *\/\n        @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Zona+Pro:wght@300;400;600;700;800&display=swap\");\n        @import url(\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\");\n\n        \/* Variables de paleta La Mulita *\/\n        :root {\n            --mulita-white: #F2F2F2;\n            --mulita-charcoal: #333231;\n            \n            \/* Default Orange Theme *\/\n            --mulita-orange: #EB5E28;\n            --mulita-orange-rgb: 235, 94, 40;\n            \n            --mulita-kale: #588157;\n            --transition-duration: 0.3s;\n            --easing: cubic-bezier(0.4, 0, 0.2, 1);\n            --font-zona: \"Zona Pro\", sans-serif;\n        }\n\n        \/* Green Theme Override *\/\n        body[data-theme=\"green\"] {\n            --mulita-orange: #588157;\n            --mulita-orange-rgb: 88, 129, 87;\n        }\n\n        \/* Estilos generales del navbar *\/\n        .mulita-navbar {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            z-index: 1000;\n            background: rgba(var(--mulita-orange-rgb), 0.95);\n            backdrop-filter: blur(10px);\n            box-shadow: 0 2px 20px rgba(51, 50, 49, 0.25);\n            padding: 1rem 0;\n            transition: all var(--transition-duration) var(--easing);\n            font-family: var(--font-zona);\n        }\n\n        .navbar-container {\n            max-width: 1400px;\n            margin: 0 auto;\n            padding: 0 2rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n\n        \/* Logo *\/\n        .navbar-logo img {\n            height: 55px;\n            width: auto;\n            transition: transform var(--transition-duration) var(--easing);\n        }\n\n        .navbar-logo:hover img {\n            transform: scale(1.05);\n        }\n\n        \/* Men\u00fa Desktop *\/\n        .navbar-links {\n            display: flex;\n            gap: 2.5rem;\n            list-style: none;\n            margin: 0;\n            padding: 0;\n        }\n\n        .navbar-links a {\n            color: var(--mulita-charcoal);\n            text-decoration: none;\n            font-family: var(--font-zona);\n            font-weight: 600;\n            font-size: 0.95rem;\n            letter-spacing: 0.5px;\n            text-transform: uppercase;\n            position: relative;\n            padding: 0.5rem 0;\n            transition: color var(--transition-duration) var(--easing);\n        }\n\n        .navbar-links a::after {\n            content: \"\";\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 0;\n            height: 2px;\n            background: var(--mulita-charcoal);\n            transition: width var(--transition-duration) var(--easing);\n        }\n\n        .navbar-links a:hover {\n            color: var(--mulita-white);\n        }\n\n        .navbar-links a:hover::after {\n            width: 100%;\n            background: var(--mulita-white);\n        }\n\n        \/* Bot\u00f3n CTA Desktop *\/\n        .cta-button {\n            background: var(--mulita-charcoal);\n            color: var(--mulita-white);\n            padding: 0.75rem 1.8rem;\n            border-radius: 50px;\n            text-decoration: none;\n            font-family: var(--font-zona);\n            font-weight: 700;\n            font-size: 0.95rem;\n            letter-spacing: 0.5px;\n            text-transform: uppercase;\n            display: inline-flex;\n            align-items: center;\n            gap: 10px;\n            transition: all var(--transition-duration) var(--easing);\n            box-shadow: 0 4px 15px rgba(51, 50, 49, 0.35);\n            border: 2px solid var(--mulita-charcoal);\n        }\n\n        .cta-button:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 6px 25px rgba(51, 50, 49, 0.5);\n            background: var(--mulita-white);\n            color: var(--mulita-charcoal);\n        }\n\n        .cta-button i {\n            font-size: 1rem;\n        }\n\n        \/* Bot\u00f3n hamburguesa *\/        \n        .mobile-menu-toggle {\n            display: none;\n            position: relative;\n            z-index: 1002;\n        }\n\n        .hamburger {\n            background: transparent;\n            border: none;\n            cursor: pointer;\n            padding: 0.5rem;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n        }\n\n        .hamburger-line {\n            display: block;\n            width: 28px;\n            height: 3px;\n            background: var(--mulita-charcoal);\n            margin: 3px 0;\n            border-radius: 3px;\n            transition: all var(--transition-duration) var(--easing);\n        }\n\n        .hamburger:hover .hamburger-line {\n            background: var(--mulita-white);\n        }\n\n        \/* VERSI\u00d3N M\u00d3VIL DEL MEN\u00da *\/\n        .mobile-menu {\n            position: fixed;\n            top: 0;\n            right: -100%;\n            bottom: 0;\n            width: 85%;\n            max-width: 350px;\n            height: 100vh;\n            background: var(--mulita-charcoal);\n            z-index: 9999;\n            transition: right var(--transition-duration) var(--easing);\n            box-shadow: -5px 0 25px rgba(var(--mulita-orange-rgb), 0.2);\n            display: flex;\n            flex-direction: column;\n            overflow-y: auto;\n            font-family: var(--font-zona);\n        }\n\n        .mobile-menu.active {\n            right: 0;\n        }\n\n        \/* Encabezado del men\u00fa m\u00f3vil *\/\n        .mobile-menu-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 20px;\n            border-bottom: 2px solid rgba(var(--mulita-orange-rgb), 0.3);\n            position: sticky;\n            top: 0;\n            background: var(--mulita-charcoal);\n            z-index: 2;\n        }\n\n        .mobile-logo img {\n            height: 35px;\n            width: auto;\n        }\n\n        .mobile-close {\n            background: rgba(242, 242, 242, 0.1);\n            border: none;\n            cursor: pointer;\n            width: 38px;\n            height: 38px;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            transition: all 0.3s ease;\n        }\n\n        .mobile-close:hover {\n            background: var(--mulita-orange);\n        }\n\n        .close-icon {\n            font-size: 26px;\n            color: var(--mulita-white);\n            line-height: 1;\n            font-family: var(--font-zona);\n        }\n\n        \/* Contenido del men\u00fa m\u00f3vil *\/\n        .mobile-menu-content {\n            padding: 25px 20px;\n            display: flex;\n            flex-direction: column;\n            flex-grow: 1;\n            overflow-y: auto;\n        }\n\n        .mobile-nav-links {\n            list-style: none;\n            padding: 0;\n            margin: 0 0 30px 0;\n        }\n\n        .mobile-nav-links li {\n            margin-bottom: 12px;\n        }\n\n        .mobile-nav-links a {\n            display: flex;\n            align-items: center;\n            color: var(--mulita-white);\n            text-decoration: none;\n            font-family: var(--font-zona);\n            font-size: 1rem;\n            font-weight: 600;\n            letter-spacing: 0.3px;\n            text-transform: uppercase;\n            padding: 14px 16px;\n            border-radius: 12px;\n            transition: all 0.3s ease;\n            border: 1px solid transparent;\n        }\n\n        .mobile-nav-links a:hover {\n            background-color: rgba(var(--mulita-orange-rgb), 0.1);\n            color: var(--mulita-orange);\n            border-color: var(--mulita-orange);\n        }\n\n        .mobile-nav-links i {\n            font-size: 1.25rem;\n            width: 26px;\n            margin-right: 15px;\n            color: var(--mulita-orange);\n        }\n\n        \/* CTA m\u00f3vil *\/\n        .mobile-cta {\n            margin: auto 0 25px 0;\n            padding: 15px 0;\n        }\n\n        .mobile-cta-button {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 10px;\n            width: 100%;\n            padding: 16px 20px;\n            background: var(--mulita-orange);\n            color: var(--mulita-white);\n            text-decoration: none;\n            font-family: var(--font-zona);\n            font-weight: 700;\n            letter-spacing: 0.5px;\n            text-transform: uppercase;\n            border-radius: 50px;\n            text-align: center;\n            box-shadow: 0 4px 12px rgba(var(--mulita-orange-rgb), 0.35);\n            transition: all 0.3s ease;\n            border: 2px solid var(--mulita-orange);\n        }\n\n        .mobile-cta-button:hover {\n            background: var(--mulita-white);\n            color: var(--mulita-orange);\n            transform: translateY(-2px);\n            box-shadow: 0 6px 15px rgba(var(--mulita-orange-rgb), 0.5);\n        }\n\n        \/* Iconos sociales *\/\n        .mobile-social {\n            display: flex;\n            justify-content: center;\n            gap: 15px;\n            margin-top: 10px;\n        }\n\n        .social-icon {\n            width: 42px;\n            height: 42px;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background-color: rgba(242, 242, 242, 0.1);\n            color: var(--mulita-white);\n            transition: all 0.3s ease;\n            border: 2px solid transparent;\n        }\n\n        .social-icon:hover {\n            background-color: var(--mulita-orange);\n            color: var(--mulita-white);\n            transform: translateY(-3px);\n            border-color: var(--mulita-orange);\n        }\n\n        \/* Overlay para cuando el men\u00fa est\u00e1 abierto *\/\n        .mobile-overlay {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: rgba(51, 50, 49, 0.8);\n            z-index: 1004;\n            opacity: 0;\n            visibility: hidden;\n            transition: all 0.3s ease;\n            backdrop-filter: blur(3px);\n        }\n\n        .mobile-overlay.active {\n            opacity: 1;\n            visibility: visible;\n        }\n\n        \/* Scroll Effect *\/\n        .scrolled {\n            padding: 0.6rem 0;\n            backdrop-filter: blur(12px);\n            background: rgba(var(--mulita-orange-rgb), 1);\n            box-shadow: 0 3px 20px rgba(51, 50, 49, 0.3);\n        }\n\n        \/* Responsive *\/\n        @media (max-width: 1024px) {\n            .navbar-links,\n            .navbar-cta {\n                display: none;\n            }\n\n            .mobile-menu-toggle {\n                display: block;\n            }\n        }\n\n        \/* Ajustes adicionales para m\u00f3viles peque\u00f1os *\/\n        @media (max-width: 480px) {\n            .navbar-container {\n                padding: 0 1rem;\n            }\n            \n            .mobile-menu {\n                width: 100%;\n                max-width: none;\n            }\n\n            .navbar-logo img {\n                height: 45px;\n            }\n        }\n\n        \/* Mejoras de accesibilidad y hover states *\/\n        @media (prefers-reduced-motion: reduce) {\n            * {\n                animation-duration: 0.01ms !important;\n                animation-iteration-count: 1 !important;\n                transition-duration: 0.01ms !important;\n            }\n        }\n    <\/style>\n\n    <script>\n        document.addEventListener(\"DOMContentLoaded\", function() {\n            \/\/ Elementos del DOM\n            const hamburger = document.querySelector(\".hamburger\");\n            const mobileMenu = document.querySelector(\".mobile-menu\");\n            const mobileClose = document.querySelector(\".mobile-close\");\n            const mobileOverlay = document.querySelector(\".mobile-overlay\");\n            const mobileLinks = document.querySelectorAll(\".mobile-nav-links a, .mobile-cta-button\");\n            \n            \/\/ Funci\u00f3n para abrir el men\u00fa\n            function openMenu() {\n                mobileMenu.classList.add(\"active\");\n                mobileOverlay.classList.add(\"active\");\n                document.body.style.overflow = \"hidden\";\n                \n                window.scrollTo(0, 0);\n                mobileMenu.scrollTop = 0;\n            }\n            \n            \/\/ Funci\u00f3n para cerrar el men\u00fa\n            function closeMenu() {\n                mobileMenu.classList.remove(\"active\");\n                mobileOverlay.classList.remove(\"active\");\n                document.body.style.overflow = \"\";\n            }\n            \n            \/\/ Eventos para abrir\/cerrar men\u00fa\n            hamburger.addEventListener(\"click\", openMenu);\n            mobileClose.addEventListener(\"click\", closeMenu);\n            mobileOverlay.addEventListener(\"click\", closeMenu);\n            \n            \/\/ Cerrar el men\u00fa cuando se hace clic en un enlace\n            mobileLinks.forEach(link => {\n                link.addEventListener(\"click\", () => {\n                    closeMenu();\n                    \n                    \/\/ Si es un enlace interno, realizar scroll suave\n                    const href = link.getAttribute(\"href\");\n                    if (href.includes(\"#\") && !href.startsWith(\"http\")) {\n                        const targetId = href.split(\"#\")[1];\n                        if (targetId) {\n                            const targetElement = document.getElementById(targetId);\n                            if (targetElement) {\n                                setTimeout(() => {\n                                    targetElement.scrollIntoView({\n                                        behavior: \"smooth\",\n                                        block: \"start\"\n                                    });\n                                }, 300);\n                            }\n                        }\n                    }\n                });\n            });\n\n            \/\/ Efecto de scroll en la Navbar\n            window.addEventListener(\"scroll\", () => {\n                const navbar = document.querySelector(\".mulita-navbar\");\n                if (window.scrollY > 50) {\n                    navbar.classList.add(\"scrolled\");\n                } else {\n                    navbar.classList.remove(\"scrolled\");\n                }\n            });\n        });\n    <\/script>\n\n\n        <section class=\"mulita-hero\">\n            <!-- Loading State -->\n            <div class=\"hero-loader\">\n                <div class=\"loader-spinner\"><\/div>\n            <\/div>\n\n            <!-- Video Background -->\n            <div class=\"hero-video-wrapper\">\n                <div class=\"hero-video-container\">\n                    <video \n                        autoplay \n                        muted \n                        loop \n                        playsinline \n                        id=\"hero-bg-video\"\n                        style=\"position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; object-fit: cover; transform: translate(-50%, -50%); pointer-events: none; filter: brightness(0.6) contrast(1.1);\">\n                        <source src=\"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-content\/uploads\/2025\/12\/la-mulita-hero.mp4\" type=\"video\/mp4\">\n                    <\/video>\n                <\/div>\n                \n                <!-- Capas de overlay cinematogr\u00e1fico -->\n                <div class=\"cinematic-overlay\"><\/div>\n                <div class=\"vignette-overlay\"><\/div>\n                <div class=\"film-grain\"><\/div>\n                \n                <!-- Barras cinematogr\u00e1ficas -->\n                <div class=\"cinema-bars\">\n                    <div class=\"bar-top\"><\/div>\n                    <div class=\"bar-bottom\"><\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Contenido principal -->\n            <div class=\"hero-main-content\">\n                <!-- Logo gigante con animaci\u00f3n -->\n                <div class=\"hero-logo-container\" data-aos=\"zoom-in\" data-aos-duration=\"1500\">\n\n                    <img decoding=\"async\" src=\"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-content\/uploads\/2025\/12\/LaMulita-LogotipoReducido01-1.png\" alt=\"La Mulita Audiovisual\" class=\"hero-logo\">\n\n                <\/div>\n\n                <!-- Claim con efecto typewriter -->\n                <div class=\"hero-claim\" data-aos=\"fade-up\" data-aos-delay=\"800\">\n                    <div class=\"claim-line\"><\/div>\n                    <h1 class=\"claim-text\">\n                        <span class=\"claim-word\" style=\"--delay: 0\">Llevamos<\/span>\n                        <span class=\"claim-word\" style=\"--delay: 1\">la<\/span>\n                        <span class=\"claim-word\" style=\"--delay: 2\">historia<\/span>\n                        <span class=\"claim-word orange\" style=\"--delay: 3\">m\u00e1s<\/span>\n                        <span class=\"claim-word orange\" style=\"--delay: 4\">lejos<\/span>\n                    <\/h1>\n                    <div class=\"claim-line\"><\/div>\n                <\/div>\n\n                <!-- Descripci\u00f3n con efecto cine -->\n                <p class=\"hero-subtitle\" data-aos=\"fade-up\" data-aos-delay=\"1200\">\n                    Catamarca como escenario. Tu historia como protagonista.\n                    <br>\n                    <span class=\"subtitle-highlight\">Locaciones \u00e9picas \u2022 Talento local \u2022 Incentivos fiscales<\/span>\n                <\/p>\n\n                <!-- CTAs redise\u00f1ados -->\n                <div class=\"hero-actions\" data-aos=\"fade-up\" data-aos-delay=\"1500\">\n                    <a href=\"#contacto\" class=\"cta-epic\" aria-label=\"Iniciar Proyecto\">\n                        <span class=\"cta-icon-wrap\">\n                            <i class=\"fas fa-clapperboard-play\"><\/i>\n                        <\/span>\n                        <span class=\"cta-text\">\n                            <span class=\"cta-title\">Iniciar Proyecto<\/span>\n                            <span class=\"cta-subtitle\">Film\u00e1 con nosotros<\/span>\n                        <\/span>\n                        <div class=\"cta-glow\"><\/div>\n                    <\/a>\n                    \n                    <a href=\"#locaciones\" class=\"cta-outline\" aria-label=\"Explorar Escenarios\">\n                        <span class=\"cta-icon-wrap\">\n                            <i class=\"fas fa-location-dot\"><\/i>\n                        <\/span>\n                        <span class=\"cta-text\">\n                            <span class=\"cta-title\">Explorar Escenarios<\/span>\n                            <span class=\"cta-subtitle\">Ver locaciones<\/span>\n                        <\/span>\n                    <\/a>\n                <\/div>\n            <\/div>\n\n\n\n\n\n            <!-- Part\u00edculas cinematogr\u00e1ficas -->\n            <div class=\"cinema-particles\">\n                <div class=\"particle\" style=\"--x: 20%; --y: 30%; --delay: 0s; --duration: 8s;\"><\/div>\n                <div class=\"particle\" style=\"--x: 80%; --y: 20%; --delay: 2s; --duration: 10s;\"><\/div>\n                <div class=\"particle\" style=\"--x: 50%; --y: 60%; --delay: 4s; --duration: 12s;\"><\/div>\n                <div class=\"particle\" style=\"--x: 10%; --y: 80%; --delay: 1s; --duration: 9s;\"><\/div>\n                <div class=\"particle\" style=\"--x: 90%; --y: 70%; --delay: 3s; --duration: 11s;\"><\/div>\n            <\/div>\n\n            <style>\n                @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Zona+Pro:wght@300;400;600;700;800;900&family=Outfit:wght@300;400;600;800&display=swap\");\n                @import url(\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\");\n                @import url(\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\");\n\n                :root {\n                    --mulita-white: #e0e0e0;\n                    --mulita-charcoal: #1a1a1a;\n                    --mulita-black: #050505;\n                    \n                    \/* Default Orange Theme *\/\n                    --mulita-orange: #EB5E28;\n                    --mulita-orange-rgb: 235, 94, 40;\n                    --mulita-accent-light: #ff7e5f;\n                    \n                    --mulita-orange-glow: rgba(var(--mulita-orange-rgb), 0.6);\n                    --font-primary: \"Zona Pro\", \"Outfit\", sans-serif;\n                    --glass-bg: rgba(255, 255, 255, 0.05);\n                    --glass-border: rgba(255, 255, 255, 0.1);\n                    --glass-blur: 15px;\n                }\n\n                \/* Green Theme Override *\/\n                body[data-theme=\"green\"] {\n                    --mulita-orange: #588157;\n                    --mulita-orange-rgb: 88, 129, 87;\n                    --mulita-accent-light: #8FB38D;\n                }\n\n                .mulita-hero * {\n                    margin: 0;\n                    padding: 0;\n                    box-sizing: border-box;\n                }\n\n                .mulita-hero {\n                    position: relative;\n                    width: 100%;\n                    height: 100vh;\n                    overflow: hidden;\n                    background: var(--mulita-black);\n                    color: var(--mulita-white);\n                    font-family: var(--font-primary);\n                }\n                \n                \/* Loader *\/\n                .hero-loader {\n                    position: absolute;\n                    inset: 0;\n                    background: #000;\n                    z-index: 100;\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    animation: fadeOutLoader 0.5s ease-out 0.5s forwards;\n                    pointer-events: none;\n                }\n                \n                @keyframes fadeOutLoader {\n                    to { opacity: 0; visibility: hidden; }\n                }\n\n                .loader-spinner {\n                    width: 50px;\n                    height: 50px;\n                    border: 3px solid rgba(var(--mulita-orange-rgb), 0.3);\n                    border-radius: 50%;\n                    border-top-color: var(--mulita-orange);\n                    animation: spin 1s linear infinite;\n                }\n                \n                @keyframes spin { to { transform: rotate(360deg); } }\n\n                \/* Video Background System *\/\n                .hero-video-wrapper {\n                    position: absolute;\n                    inset: 0;\n                    z-index: 1;\n                    user-select: none;\n                }\n\n                .hero-video-container {\n                    position: absolute;\n                    top: 50%;\n                    left: 50%;\n                    width: 100%;\n                    height: 100%;\n                    transform: translate(-50%, -50%);\n                    overflow: hidden;\n                }\n\n                .hero-video-container iframe {\n                    position: absolute;\n                    top: 50%;\n                    left: 50%;\n                    width: 100vw;\n                    height: 56.25vw;\n                    min-height: 100vh;\n                    min-width: 177.77vh;\n                    transform: translate(-50%, -50%);\n                    pointer-events: none;\n                    filter: brightness(0.6) contrast(1.1) saturate(1.1);\n                }\n\n                \/* Overlays *\/\n                .cinematic-overlay {\n                    position: absolute;\n                    inset: 0;\n                    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.9) 100%);\n                    z-index: 2;\n                }\n                \n                .vignette-overlay {\n                    position: absolute;\n                    inset: 0;\n                    box-shadow: inset 0 0 150px rgba(0,0,0,0.9);\n                    z-index: 3;\n                }\n\n                .film-grain {\n                    position: absolute;\n                    inset: 0;\n                    \/* Updated to use cleaner SVG data with no single quotes to avoid PHP string conflict, although HEREDOC solves it too. *\/\n                    background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'\/%3E%3C\/svg%3E\");\n                    opacity: 0.07;\n                    z-index: 3;\n                    mix-blend-mode: overlay;\n                    pointer-events: none;\n                }\n\n                \/* Cinema Bars *\/\n                .cinema-bars {\n                    position: absolute;\n                    inset: 0;\n                    z-index: 4;\n                    pointer-events: none;\n                }\n\n                .bar-top, .bar-bottom {\n                    position: absolute;\n                    left: 0; right: 0;\n                    height: clamp(40px, 8vh, 80px);\n                    background: #000;\n                    z-index: 10;\n                    transform: scaleY(0);\n                    animation: barsOpen 1.2s cubic-bezier(0.8, 0, 0.2, 1) forwards;\n                }\n\n                .bar-top { top: 0; transform-origin: top; border-bottom: 1px solid rgba(var(--mulita-orange-rgb), 0.3); }\n                .bar-bottom { bottom: 0; transform-origin: bottom; border-top: 1px solid rgba(var(--mulita-orange-rgb), 0.3); }\n\n                @keyframes barsOpen {\n                    to { transform: scaleY(1); }\n                }\n\n                \/* Main Content *\/\n                .hero-main-content {\n                    position: relative;\n                    z-index: 10;\n                    height: 100vh;\n                    display: flex;\n                    flex-direction: column;\n                    align-items: center;\n                    justify-content: center;\n                    padding: 0 20px;\n                    text-align: center;\n                }\n\n                \/* Logo *\/\n                .hero-logo-container {\n                    position: relative;\n                    margin-bottom: 3vh;\n                    perspective: 1000px;\n                }\n\n                .hero-logo {\n                    width: clamp(190px, 35vw, 350px); \/* Reduced by ~30% from (280px, 50vw, 500px) *\/\n                    height: auto;\n                    filter: drop-shadow(0 0 30px rgba(var(--mulita-orange-rgb), 0.2));\n                    animation: logoFloat 6s ease-in-out infinite;\n                }\n\n                @keyframes logoFloat {\n                    0%, 100% { transform: translateY(0); }\n                    50% { transform: translateY(-10px); }\n                }\n\n\n\n                \/* Text *\/\n                .hero-claim {\n                    display: flex;\n                    align-items: center;\n                    gap: 20px;\n                    margin-bottom: 2vh;\n                }\n\n                .claim-line {\n                    width: 60px;\n                    height: 2px;\n                    background: linear-gradient(90deg, transparent, var(--mulita-orange), transparent);\n                }\n\n                .claim-text {\n                    font-size: clamp(2rem, 4vw, 3.5rem);\n                    font-weight: 800;\n                    text-transform: uppercase;\n                    letter-spacing: 0.1em;\n                    line-height: 1.1;\n                }\n\n                .claim-word {\n                    display: inline-block;\n                    opacity: 0;\n                    transform: translateY(20px);\n                    animation: wordIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;\n                    animation-delay: calc(0.5s + var(--delay) * 0.1s);\n                    margin: 0 5px;\n                }\n                \n                .claim-word.orange { color: var(--mulita-orange); text-shadow: 0 0 20px var(--mulita-orange-glow); }\n\n                @keyframes wordIn {\n                    to { opacity: 1; transform: translateY(0); }\n                }\n\n                .hero-subtitle {\n                    font-size: clamp(1rem, 1.5vw, 1.25rem);\n                    line-height: 1.6;\n                    max-width: 600px;\n                    margin-bottom: 4vh;\n                    opacity: 0.9;\n                }\n\n                .subtitle-highlight {\n                    color: var(--mulita-orange);\n                    font-weight: 600;\n                    letter-spacing: 1px;\n                    display: block;\n                    margin-top: 5px;\n                }\n\n                \/* Actions *\/\n                .hero-actions {\n                    display: flex;\n                    gap: 20px;\n                    flex-wrap: wrap;\n                    justify-content: center;\n                }\n\n                .cta-epic {\n                    position: relative;\n                    display: flex;\n                    align-items: center;\n                    gap: 15px;\n                    padding: 15px 35px;\n                    background: linear-gradient(90deg, var(--mulita-orange), var(--mulita-accent-light));\n                    border-radius: 50px;\n                    color: white;\n                    text-decoration: none;\n                    overflow: hidden;\n                    transition: all 0.3s ease;\n                    box-shadow: 0 4px 20px rgba(var(--mulita-orange-rgb), 0.4);\n                }\n                \n                .cta-epic:hover {\n                    transform: translateY(-3px);\n                    box-shadow: 0 10px 30px rgba(var(--mulita-orange-rgb), 0.6);\n                }\n\n                .cta-outline {\n                    display: flex;\n                    align-items: center;\n                    gap: 15px;\n                    padding: 15px 35px;\n                    background: var(--glass-bg);\n                    border: 1px solid var(--glass-border);\n                    border-radius: 50px;\n                    color: white;\n                    text-decoration: none;\n                    backdrop-filter: blur(var(--glass-blur));\n                    transition: all 0.3s ease;\n                }\n                \n                .cta-outline:hover {\n                    background: rgba(255, 255, 255, 0.1);\n                    border-color: var(--mulita-orange);\n                    transform: translateY(-3px);\n                }\n\n                .cta-icon-wrap { font-size: 1.2rem; }\n                \n                .cta-text { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }\n                .cta-title { font-weight: 700; font-size: 0.9rem; text-transform: uppercase; }\n                .cta-subtitle { font-size: 0.75rem; opacity: 0.8; }\n\n\n\n\n\n                \/* Responsiveness *\/\n                @media (max-width: 1024px) {\n                    .hero-video-container iframe { width: 150vw; min-width: 100vh; }\n                    .hero-logo { width: 60vw; }\n                }\n\n                @media (max-width: 768px) {\n                    .hero-logo-container {\n                        margin-top: 100px; \/* Push down to clear navbar *\/\n                    }\n                    .hero-logo {\n                        width: 40vw !important; \/* Force smaller size on mobile *\/\n                        max-width: 180px;\n                    }\n                    \n                    .hero-claim { flex-direction: column; gap: 10px; }\n                    .claim-line { display: none; }\n                    .hero-actions { flex-direction: column; width: 80%; max-width: 300px; }\n                    .cta-epic, .cta-outline { width: 100%; justify-content: center; }\n\n                    .cinema-bars { display: none; \/* Remove bars on mobile to maximize space *\/ }\n                }\n            <\/style>\n\n            <!-- Script Initialization -->\n            <script>\n                (function() {\n                    function initHero() {\n                        if (typeof AOS !== 'undefined') {\n                            AOS.init({\n                                duration: 1000,\n                                once: true,\n                                offset: 0,\n                                disable: 'mobile'\n                            });\n                        }\n                        \n\n                    }\n\n                    \/\/ Check if AOS is loaded, if not wait for load\n                    if (document.readyState === 'loading') {\n                        document.addEventListener('DOMContentLoaded', initHero);\n                    } else {\n                        initHero();\n                    }\n                })();\n            <\/script>\n            <!-- AOS Library moved to head or footer ideally, but kept here for snippet completeness -->\n            <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\n        <\/section>\n\n\n        <section class=\"mulita-why\" id=\"filmar\">\n            <div class=\"why-container\">\n                <!-- Header de Secci\u00f3n -->\n                <div class=\"why-header\" data-aos=\"fade-up\">\n                    <span class=\"why-label\">Ventajas Estrat\u00e9gicas<\/span>\n                    <h2 class=\"why-title\">\u00bfPor qu\u00e9 elegir <span class=\"text-orange\">Catamarca<\/span>?<\/h2>\n                    <p class=\"why-subtitle\">Un estudio natural a cielo abierto con infinitas posibilidades para tu producci\u00f3n audiovisual.<\/p>\n                <\/div>\n\n                <!-- Grilla de Beneficios -->\n                <div class=\"why-grid\">\n                    <!-- Card 1 -->\n                    <div class=\"why-card\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n                        <div class=\"card-icon\">\n                            <i class=\"fas fa-mountain\"><\/i>\n                        <\/div>\n                        <h3 class=\"card-title\">Diversidad Geogr\u00e1fica<\/h3>\n                        <p class=\"card-desc\">Desde los \"Seismiles\" en la cordillera hasta la selva de las Yungas. Dunas, salares y volcanes a pocas horas de distancia.<\/p>\n                    <\/div>\n\n                    <!-- Card 2 -->\n                    <div class=\"why-card\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n                        <div class=\"card-icon\">\n                            <i class=\"fas fa-sun\"><\/i>\n                        <\/div>\n                        <h3 class=\"card-title\">Clima Privilegiado<\/h3>\n                        <p class=\"card-desc\">M\u00e1s de 300 d\u00edas de sol al a\u00f1o y una luz \u00fanica en el mundo, ideal para jornadas de rodaje extensas y productivas.<\/p>\n                    <\/div>\n\n                    <!-- Card 3 -->\n                    <div class=\"why-card\" data-aos=\"fade-up\" data-aos-delay=\"300\">\n                        <div class=\"card-icon\">\n                            <i class=\"fas fa-hand-holding-dollar\"><\/i>\n                        <\/div>\n                        <h3 class=\"card-title\">Incentivos Fiscales<\/h3>\n                        <p class=\"card-desc\">Pol\u00edticas de fomento audiovisual y reintegros (Cash Rebate) para producciones nacionales e internacionales.<\/p>\n                    <\/div>\n\n                    <!-- Card 4 -->\n                    <div class=\"why-card\" data-aos=\"fade-up\" data-aos-delay=\"400\">\n                        <div class=\"card-icon\">\n                            <i class=\"fas fa-route\"><\/i>\n                        <\/div>\n                        <h3 class=\"card-title\">Log\u00edstica \u00c1gil<\/h3>\n                        <p class=\"card-desc\">Conectividad a\u00e9rea y terrestre. Distancias cortas entre hoteles de categor\u00eda y locaciones salvajes.<\/p>\n                    <\/div>\n                <\/div>\n\n                <!-- Call to Action -->\n                <div class=\"why-cta-container\" data-aos=\"zoom-in\" data-aos-delay=\"500\">\n                    <div class=\"cta-box\">\n                        <div class=\"cta-content\">\n                            <h3>Descubr\u00ed el escenario perfecto<\/h3>\n                            <p>Explora nuestro cat\u00e1logo detallado de locaciones listas para filmar.<\/p>\n                        <\/div>\n                        <a href=\"#locaciones\" class=\"btn-location\">\n                            <span>Ver Locaciones<\/span>\n                            <i class=\"fas fa-arrow-right-long\"><\/i>\n                        <\/a>\n                    <\/div>\n                    <!-- Elemento decorativo de fondo del CTA -->\n                    <div class=\"cta-bg-glow\"><\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- Background Elements -->\n            <div class=\"bg-pattern\"><\/div>\n        <\/section>\n\n        <style>\n            @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Zona+Pro:wght@300;400;600;700;800&display=swap\");\n            @import url(\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\");\n\n            :root {\n                --mulita-black: #050505;\n                --mulita-dark: #1a1a1a;\n                --mulita-grey: #2a2a2a;\n                \n                \/* Default Orange Theme *\/\n                --mulita-orange: #EB5E28;\n                --mulita-orange-rgb: 235, 94, 40;\n                \n                --mulita-white: #e0e0e0;\n                --font-main: \"Zona Pro\", sans-serif;\n            }\n\n            \/* Green Theme Override *\/\n            body[data-theme=\"green\"] .mulita-why {\n                --mulita-orange: #588157;\n                --mulita-orange-rgb: 88, 129, 87;\n            }\n\n            .mulita-why {\n                position: relative;\n                background-color: var(--mulita-black);\n                padding: 100px 20px;\n                color: var(--mulita-white);\n                font-family: var(--font-main);\n                overflow: hidden;\n            }\n\n            .why-container {\n                max-width: 1200px;\n                margin: 0 auto;\n                position: relative;\n                z-index: 2;\n            }\n\n            \/* Header Styles *\/\n            .why-header {\n                text-align: center;\n                margin-bottom: 80px;\n                max-width: 800px;\n                margin-left: auto;\n                margin-right: auto;\n            }\n\n            .why-label {\n                color: var(--mulita-orange);\n                text-transform: uppercase;\n                letter-spacing: 3px;\n                font-size: 0.85rem;\n                font-weight: 700;\n                display: block;\n                margin-bottom: 15px;\n            }\n\n            .why-title {\n                font-size: clamp(2rem, 5vw, 3.5rem);\n                line-height: 1.1;\n                font-weight: 800;\n                margin-bottom: 25px;\n            }\n\n            .text-orange {\n                color: var(--mulita-orange);\n            }\n\n            .why-subtitle {\n                color: rgba(255, 255, 255, 0.7);\n                font-size: 1.1rem;\n                line-height: 1.6;\n            }\n\n            \/* Grid Styles *\/\n            .why-grid {\n                display: grid;\n                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n                gap: 30px;\n                margin-bottom: 100px;\n            }\n\n            .why-card {\n                background: linear-gradient(145deg, rgba(30, 30, 30, 0.6), rgba(20, 20, 20, 0.8));\n                border: 1px solid rgba(255, 255, 255, 0.05);\n                border-radius: 20px;\n                padding: 40px 30px;\n                transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;\n                position: relative;\n                overflow: hidden;\n            }\n\n            .why-card::before {\n                content: '';\n                position: absolute;\n                top: 0; left: 0; right: 0; height: 1px;\n                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\n                opacity: 0;\n                transition: opacity 0.3s ease;\n            }\n\n            .why-card:hover {\n                transform: translateY(-10px);\n                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);\n                border-color: rgba(var(--mulita-orange-rgb), 0.3);\n            }\n\n            .why-card:hover::before {\n                opacity: 1;\n            }\n\n            .card-icon {\n                font-size: 2.5rem;\n                color: var(--mulita-orange);\n                margin-bottom: 25px;\n                display: inline-block;\n                transition: transform 0.3s ease;\n            }\n\n            .why-card:hover .card-icon {\n                transform: scale(1.1) rotate(-5deg);\n            }\n\n            .card-title {\n                font-size: 1.25rem;\n                font-weight: 700;\n                margin-bottom: 15px;\n                color: var(--mulita-white);\n            }\n\n            .card-desc {\n                color: rgba(255, 255, 255, 0.6);\n                font-size: 0.95rem;\n                line-height: 1.6;\n            }\n\n            \/* CTA Section Styles *\/\n            .why-cta-container {\n                position: relative;\n                margin-top: 50px;\n            }\n\n            .cta-box {\n                background: linear-gradient(90deg, #1a1a1a, #252525);\n                border: 1px solid rgba(255, 255, 255, 0.1);\n                border-radius: 30px;\n                padding: 40px 60px;\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                gap: 40px;\n                position: relative;\n                z-index: 2;\n                overflow: hidden;\n            }\n\n            .cta-content h3 {\n                font-size: 1.8rem;\n                font-weight: 700;\n                margin-bottom: 10px;\n            }\n\n            .cta-content p {\n                color: rgba(255, 255, 255, 0.7);\n                font-size: 1.1rem;\n            }\n\n            .btn-location {\n                display: inline-flex;\n                align-items: center;\n                gap: 15px;\n                background-color: var(--mulita-orange);\n                color: white;\n                padding: 18px 40px;\n                border-radius: 50px;\n                text-decoration: none;\n                font-weight: 700;\n                text-transform: uppercase;\n                letter-spacing: 1px;\n                transition: all 0.3s ease;\n                white-space: nowrap;\n                box-shadow: 0 10px 30px rgba(var(--mulita-orange-rgb), 0.2);\n            }\n\n            .btn-location:hover {\n                background-color: white;\n                color: var(--mulita-orange);\n                transform: translateX(5px);\n                box-shadow: 0 15px 40px rgba(var(--mulita-orange-rgb), 0.3);\n            }\n\n            .btn-location i {\n                transition: transform 0.3s ease;\n            }\n\n            .btn-location:hover i {\n                transform: translateX(5px);\n            }\n\n            \/* Glow effect behind CTA *\/\n            .cta-bg-glow {\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                width: 100%;\n                height: 100%;\n                background: var(--mulita-orange);\n                filter: blur(100px);\n                opacity: 0.15;\n                z-index: 1;\n                border-radius: 30px;\n                pointer-events: none;\n            }\n\n            \/* Background Pattern *\/\n            .bg-pattern {\n                position: absolute;\n                top: 0; left: 0; right: 0; bottom: 0;\n                background-image: \n                    radial-gradient(circle at 10% 20%, rgba(var(--mulita-orange-rgb), 0.03) 0%, transparent 20%),\n                    radial-gradient(circle at 90% 80%, rgba(var(--mulita-orange-rgb), 0.03) 0%, transparent 20%);\n                z-index: 1;\n                pointer-events: none;\n            }\n\n            \/* Responsive *\/\n            @media (max-width: 900px) {\n                .cta-box {\n                    flex-direction: column;\n                    text-align: center;\n                    padding: 40px 30px;\n                }\n                \n                .btn-location {\n                    width: 100%;\n                    justify-content: center;\n                }\n            }\n\n            @media (max-width: 600px) {\n                .why-grid {\n                    grid-template-columns: 1fr;\n                }\n                \n                .why-title {\n                    font-size: 2.5rem;\n                }\n            }\n        <\/style>\n\n        <script>\n            \/\/ Simple init check for AOS if not already initialized\n            if (typeof AOS !== 'undefined' && !document.body.classList.contains('aos-init')) {\n                AOS.init({\n                    duration: 1000,\n                    once: true\n                });\n            }\n        <\/script>\n\n\n    <section class=\"mulita-locations\" id=\"locaciones\">\n        <div class=\"locations-container\">\n            <!-- Header -->\n            <div class=\"locations-header\" data-aos=\"fade-up\">\n                <span class=\"section-tag\">Directorio de Escenarios<\/span>\n                <h2 class=\"section-title\">Locaciones <span class=\"text-gradient\">Disponibles<\/span><\/h2>\n                <p class=\"section-subtitle\">Explora nuestra base de datos completa de locaciones para tu producci\u00f3n.<\/p>\n            <\/div>\n\n            <!-- Dynamic Filters -->\n            <div class=\"locations-tabs\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n                <button class=\"tab-btn active\" data-filter=\"all\">Todo<\/button>\n                                    <button class=\"tab-btn\" data-filter=\"4x4\">\n                        4x4                    <\/button>\n                                    <button class=\"tab-btn\" data-filter=\"agua\">\n                        Agua                    <\/button>\n                                    <button class=\"tab-btn\" data-filter=\"altura\">\n                        Altura                    <\/button>\n                                    <button class=\"tab-btn\" data-filter=\"blanco\">\n                        Blanco                    <\/button>\n                                    <button class=\"tab-btn\" data-filter=\"curvas\">\n                        Curvas                    <\/button>\n                                    <button class=\"tab-btn\" data-filter=\"desierto\">\n                        Desierto                    <\/button>\n                                    <button class=\"tab-btn\" data-filter=\"espejismo\">\n                        Espejismo                    <\/button>\n                                    <button class=\"tab-btn\" data-filter=\"inmensidad\">\n                        Inmensidad                    <\/button>\n                                    <button class=\"tab-btn\" data-filter=\"lagunas\">\n                        Lagunas                    <\/button>\n                                    <button class=\"tab-btn\" data-filter=\"natural\">\n                        Natural                    <\/button>\n                                    <button class=\"tab-btn\" data-filter=\"nieve\">\n                        Nieve                    <\/button>\n                                    <button class=\"tab-btn\" data-filter=\"panoramica\">\n                        Panor\u00e1mica                    <\/button>\n                                    <button class=\"tab-btn\" data-filter=\"rocas\">\n                        Rocas                    <\/button>\n                                    <button class=\"tab-btn\" data-filter=\"sal\">\n                        Sal                    <\/button>\n                                    <button class=\"tab-btn\" data-filter=\"surrealista\">\n                        Surrealista                    <\/button>\n                                    <button class=\"tab-btn\" data-filter=\"turquesa\">\n                        Turquesa                    <\/button>\n                                    <button class=\"tab-btn\" data-filter=\"verde\">\n                        Verde                    <\/button>\n                                    <button class=\"tab-btn\" data-filter=\"volcanes\">\n                        Volcanes                    <\/button>\n                            <\/div>\n\n            <!-- Grid -->\n            <div class=\"locations-grid\">\n                                <div class=\"location-card  filter-agua filter-rocas filter-natural\" data-aos=\"fade-up\" data-aos-delay=\"100\" data-loc-id=\"12\">\n                    <div class=\"card-image-wrap\">\n                        <img decoding=\"async\" src=\"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-content\/uploads\/2026\/01\/Captura-de-pantalla-2026-01-19-a-las-6.05.06-p.-m-scaled.png\" alt=\"Dique El Jumeal\" class=\"card-img\">\n                        <div class=\"card-overlay\"><\/div>\n                        <div class=\"card-badges\">\n                            <span class=\"badge\">Urbano<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"card-content\">\n                        <h3 class=\"location-name\">Dique El Jumeal<\/h3>\n                        <p class=\"location-desc\">Ubicaci\u00f3n: San Fernando del Valle de Catamarca Tipo de locaci\u00f3n: Dique \/ entorno urbano-natural Altitud:...<\/p>\n                        \n                        <!-- Open Modal Trigger -->\n                        <button type=\"button\" class=\"card-link open-modal-btn\" onclick=\"openLocationModal(12)\">\n                            Ver Ficha <i class=\"fas fa-arrow-right\"><\/i>\n                        <\/button>\n                    <\/div>\n                <\/div>\n                                <div class=\"location-card  filter-volcanes filter-nieve filter-altura\" data-aos=\"fade-up\" data-aos-delay=\"200\" data-loc-id=\"7\">\n                    <div class=\"card-image-wrap\">\n                        <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/800x600?text=No+Image\" alt=\"Ruta de los Seismiles\" class=\"card-img\">\n                        <div class=\"card-overlay\"><\/div>\n                        <div class=\"card-badges\">\n                            <span class=\"badge\">Alta Monta\u00f1a<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"card-content\">\n                        <h3 class=\"location-name\">Ruta de los Seismiles<\/h3>\n                        <p class=\"location-desc\">Zona: Oeste provincial (Tinogasta \u2013 Fiambal\u00e1 \u2013 Paso San Francisco) Tipo de locaci\u00f3n: Ruta de...<\/p>\n                        \n                        <!-- Open Modal Trigger -->\n                        <button type=\"button\" class=\"card-link open-modal-btn\" onclick=\"openLocationModal(7)\">\n                            Ver Ficha <i class=\"fas fa-arrow-right\"><\/i>\n                        <\/button>\n                    <\/div>\n                <\/div>\n                                <div class=\"location-card  filter-panoramica filter-verde filter-curvas\" data-aos=\"fade-up\" data-aos-delay=\"300\" data-loc-id=\"6\">\n                    <div class=\"card-image-wrap\">\n                        <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/800x600?text=No+Image\" alt=\"Cuesta del Portezuelo\" class=\"card-img\">\n                        <div class=\"card-overlay\"><\/div>\n                        <div class=\"card-badges\">\n                            <span class=\"badge\">Monta\u00f1a<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"card-content\">\n                        <h3 class=\"location-name\">Cuesta del Portezuelo<\/h3>\n                        <p class=\"location-desc\">Ubicaci\u00f3n: Acceso a San Fernando del Valle de Catamarca Tipo de locaci\u00f3n: Ruta esc\u00e9nica \/...<\/p>\n                        \n                        <!-- Open Modal Trigger -->\n                        <button type=\"button\" class=\"card-link open-modal-btn\" onclick=\"openLocationModal(6)\">\n                            Ver Ficha <i class=\"fas fa-arrow-right\"><\/i>\n                        <\/button>\n                    <\/div>\n                <\/div>\n                                <div class=\"location-card  filter-lagunas filter-turquesa filter-4x4\" data-aos=\"fade-up\" data-aos-delay=\"400\" data-loc-id=\"11\">\n                    <div class=\"card-image-wrap\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1506905925346-21bda4d32df4?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" alt=\"Duna M\u00e1gica\" class=\"card-img\">\n                        <div class=\"card-overlay\"><\/div>\n                        <div class=\"card-badges\">\n                            <span class=\"badge\">Alta Monta\u00f1a<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"card-content\">\n                        <h3 class=\"location-name\">Duna M\u00e1gica<\/h3>\n                        <p class=\"location-desc\">Zona: Fiambal\u00e1 \u2013 Saujil Tipo de locaci\u00f3n: Desierto \/ duna aislada Altitud: aprox. 1.500\u20131.700 msnm...<\/p>\n                        \n                        <!-- Open Modal Trigger -->\n                        <button type=\"button\" class=\"card-link open-modal-btn\" onclick=\"openLocationModal(11)\">\n                            Ver Ficha <i class=\"fas fa-arrow-right\"><\/i>\n                        <\/button>\n                    <\/div>\n                <\/div>\n                                <div class=\"location-card  filter-sal filter-espejismo filter-inmensidad\" data-aos=\"fade-up\" data-aos-delay=\"500\" data-loc-id=\"10\">\n                    <div class=\"card-image-wrap\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1483363364942-886d34e9dfd0?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" alt=\"Dunas de Tat\u00f3n\" class=\"card-img\">\n                        <div class=\"card-overlay\"><\/div>\n                        <div class=\"card-badges\">\n                            <span class=\"badge\">Puna<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"card-content\">\n                        <h3 class=\"location-name\">Dunas de Tat\u00f3n<\/h3>\n                        <p class=\"location-desc\">Zona: Norte de Fiambal\u00e1 Tipo de locaci\u00f3n: Mar de dunas \/ desierto de gran escala...<\/p>\n                        \n                        <!-- Open Modal Trigger -->\n                        <button type=\"button\" class=\"card-link open-modal-btn\" onclick=\"openLocationModal(10)\">\n                            Ver Ficha <i class=\"fas fa-arrow-right\"><\/i>\n                        <\/button>\n                    <\/div>\n                <\/div>\n                                <div class=\"location-card  filter-surrealista filter-desierto filter-blanco\" data-aos=\"fade-up\" data-aos-delay=\"500\" data-loc-id=\"4\">\n                    <div class=\"card-image-wrap\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1518182170546-0766aa6f790c?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" alt=\"Campo de Piedra P\u00f3mez\" class=\"card-img\">\n                        <div class=\"card-overlay\"><\/div>\n                        <div class=\"card-badges\">\n                            <span class=\"badge\">Puna<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"card-content\">\n                        <h3 class=\"location-name\">Campo de Piedra P\u00f3mez<\/h3>\n                        <p class=\"location-desc\">Departamento: Antofagasta de la Sierra Tipo de locaci\u00f3n: Paisaje volc\u00e1nico \/ puna Altitud: aprox. 3.000\u20133.500...<\/p>\n                        \n                        <!-- Open Modal Trigger -->\n                        <button type=\"button\" class=\"card-link open-modal-btn\" onclick=\"openLocationModal(4)\">\n                            Ver Ficha <i class=\"fas fa-arrow-right\"><\/i>\n                        <\/button>\n                    <\/div>\n                <\/div>\n                                <div class=\"location-card  filter-agua filter-rocas filter-natural\" data-aos=\"fade-up\" data-aos-delay=\"500\" data-loc-id=\"8\">\n                    <div class=\"card-image-wrap\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1570701564993-e00652af8aa7?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" alt=\"Fiambal\u00e1\" class=\"card-img\">\n                        <div class=\"card-overlay\"><\/div>\n                        <div class=\"card-badges\">\n                            <span class=\"badge\">Desierto<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"card-content\">\n                        <h3 class=\"location-name\">Fiambal\u00e1<\/h3>\n                        <p class=\"location-desc\">Departamento: Tinogasta Tipo de locaci\u00f3n: Ciudad \/ Pueblo andino \u2013 entorno des\u00e9rtico Altitud: aprox. 1.600...<\/p>\n                        \n                        <!-- Open Modal Trigger -->\n                        <button type=\"button\" class=\"card-link open-modal-btn\" onclick=\"openLocationModal(8)\">\n                            Ver Ficha <i class=\"fas fa-arrow-right\"><\/i>\n                        <\/button>\n                    <\/div>\n                <\/div>\n                            <\/div>\n            \n            \n        <\/div>\n        \n        <!-- Decoration -->\n        <div class=\"ambient-glow\"><\/div>\n\n        <!-- Modals Container (Hidden by default) -->\n        <div id=\"locations-modals-wrapper\">\n                        <div class=\"location-modal-backdrop\" id=\"modal-12\">\n                <div class=\"location-modal-content\">\n                    <button class=\"modal-close-btn\" onclick=\"closeLocationModal(12)\">&times;<\/button>\n                    \n                    <div class=\"modal-layout\">\n                        <!-- Left: Gallery\/Image -->\n                        <div class=\"modal-gallery\">\n                                                             <div class=\"gallery-wrapper\">\n                                    <div class=\"gallery-main\">\n                                        <img decoding=\"async\" src=\"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-content\/uploads\/2026\/01\/Captura-de-pantalla-2026-01-19-a-las-6.05.06-p.-m-scaled.png\" class=\"gallery-main-img\" id=\"main-img-12\">\n                                    <\/div>\n                                    <div class=\"gallery-thumbs\">\n                                                                                    <img decoding=\"async\" src=\"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-content\/uploads\/2026\/01\/Captura-de-pantalla-2026-01-19-a-las-6.05.06-p.-m-scaled.png\" onclick=\"changeModalImage(12, 'https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-content\/uploads\/2026\/01\/Captura-de-pantalla-2026-01-19-a-las-6.05.06-p.-m-scaled.png')\" class=\"gallery-thumb\">\n                                                                            <\/div>\n                                <\/div>\n                                                     <\/div>\n                        \n                        <!-- Right: Info -->\n                        <div class=\"modal-info\">\n                            <h2 class=\"modal-title\">Dique El Jumeal<\/h2>\n                            <div class=\"modal-tags\">\n                                <span class=\"modal-cat\">Urbano<\/span>\n                                                                    <span class=\"modal-tag\">Agua<\/span>\n                                                                    <span class=\"modal-tag\">Rocas<\/span>\n                                                                    <span class=\"modal-tag\">Natural<\/span>\n                                                            <\/div>\n                            \n                            <div class=\"modal-description\">\n                                <h3>Descripci\u00f3n<\/h3>\n                                <p>Ubicaci\u00f3n: San Fernando del Valle de Catamarca<br \/>\r\nTipo de locaci\u00f3n: Dique \/ entorno urbano-natural<br \/>\r\nAltitud: aprox. 500\u2013550 msnm<br \/>\r\n<br \/>\r\nDescripci\u00f3n visual:<br \/>\r\nEspejo de agua ubicado dentro del ejido urbano, rodeado por cerros, vegetaci\u00f3n y senderos. Combina paisaje natural con vistas a la ciudad, generando un entorno vers\u00e1til que permite m\u00faltiples registros visuales en un mismo espacio.<br \/>\r\n<br \/>\r\nAccesibilidad:<br \/>\r\nAcceso asfaltado y directo desde el centro de la ciudad. F\u00e1cil ingreso para equipos t\u00e9cnicos y log\u00edstica.<br \/>\r\n<br \/>\r\nServicios disponibles:<br \/>\r\nServicios completos en la ciudad: alojamiento, gastronom\u00eda, hospitales, proveedores t\u00e9cnicos y conectividad.<br \/>\r\n<br \/>\r\nCondiciones de rodaje:<br \/>\r\nBuena luz natural durante todo el d\u00eda. Bajo nivel de ruido relativo seg\u00fan franja horaria. Ideal para rodajes urbanos con entorno natural.<br \/>\r\n<br \/>\r\nUsos audiovisuales sugeridos:<br \/>\r\nPublicidad, ficci\u00f3n, series, documentales, videoclips, escenas recreativas o paisaj\u00edsticas.<br \/>\r\n<br \/>\r\nhttps:\/\/www.youtube.com\/watch?v=kIK-bufxtDg<\/p>\n                            <\/div>\n                            \n                            <div class=\"modal-meta\">\n                                                                <div class=\"meta-item\">\n                                    <h3>Ubicaci\u00f3n<\/h3>\n                                    <a href=\"https:\/\/www.google.com\/maps\/place\/Dique+El+Jumeal\/@-28.4566112,-65.8196078,15z\/data=!4m15!1m8!3m7!1s0x94242899c17d2db5:0x642512cf716d091e!2sEl+Jumeal,+K4703+San+Fernando+del+Valle+de+Catamarca,+Catamarca!3b1!8m2!3d-28.4582688!4d-65.788954!16s%2Fg%2F11dfj8dw84!3m5!1s0x9424287e17555d0f:0xf5cff60acb642953!8m2!3d-28.4566104!4d-65.8092502!16s%2Fg%2F11bx5q1d6v?entry=ttu&#038;g_ep=EgoyMDI2MDExMy4wIKXMDSoKLDEwMDc5MjA2OUgBUAM%3D\" target=\"_blank\" class=\"map-btn\">\n                                        <i class=\"fas fa-map-marker-alt\"><\/i> Ver en Google Maps\n                                    <\/a>\n                                <\/div>\n                                                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n                        <div class=\"location-modal-backdrop\" id=\"modal-7\">\n                <div class=\"location-modal-content\">\n                    <button class=\"modal-close-btn\" onclick=\"closeLocationModal(7)\">&times;<\/button>\n                    \n                    <div class=\"modal-layout\">\n                        <!-- Left: Gallery\/Image -->\n                        <div class=\"modal-gallery\">\n                                                             <img decoding=\"async\" src=\"\" class=\"gallery-single-img\">\n                                                     <\/div>\n                        \n                        <!-- Right: Info -->\n                        <div class=\"modal-info\">\n                            <h2 class=\"modal-title\">Ruta de los Seismiles<\/h2>\n                            <div class=\"modal-tags\">\n                                <span class=\"modal-cat\">Alta Monta\u00f1a<\/span>\n                                                                    <span class=\"modal-tag\">Volcanes<\/span>\n                                                                    <span class=\"modal-tag\">Nieve<\/span>\n                                                                    <span class=\"modal-tag\">Altura<\/span>\n                                                            <\/div>\n                            \n                            <div class=\"modal-description\">\n                                <h3>Descripci\u00f3n<\/h3>\n                                <p>Zona: Oeste provincial (Tinogasta \u2013 Fiambal\u00e1 \u2013 Paso San Francisco)<br \/>\r\nTipo de locaci\u00f3n: Ruta de alta monta\u00f1a \/ cordillera<br \/>\r\nAltitud: aprox. 2.000 a m\u00e1s de 4.500 msnm<br \/>\r\n<br \/>\r\nDescripci\u00f3n visual:<br \/>\r\nCorredor esc\u00e9nico internacional que atraviesa volcanes y monta\u00f1as de m\u00e1s de 6.000 metros de altura. Paisaje de alta monta\u00f1a, colores intensos, salares, lagunas altoandinas y cielos de gran pureza visual.<br \/>\r\n<br \/>\r\nAccesibilidad:<br \/>\r\nRuta asfaltada en gran parte del trayecto. Acceso vehicular, con tramos de altura extrema. Requiere planificaci\u00f3n log\u00edstica.<br \/>\r\n<br \/>\r\nServicios disponibles:<br \/>\r\nServicios limitados en localidades intermedias (Tinogasta, Fiambal\u00e1). Paso internacional.<br \/>\r\n<br \/>\r\nCondiciones de rodaje:<br \/>\r\nClima extremo, vientos y amplitud t\u00e9rmica. Excelente visibilidad y atm\u00f3sfera limpia. Ideal para tomas de gran escala y drones.<br \/>\r\n<br \/>\r\nUsos audiovisuales sugeridos:<br \/>\r\nCine \u00e9pico, documental, publicidad internacional, automotriz, aventura y exploraci\u00f3n.<\/p>\n                            <\/div>\n                            \n                            <div class=\"modal-meta\">\n                                                                <div class=\"meta-item\">\n                                    <h3>Ubicaci\u00f3n<\/h3>\n                                    <a href=\"https:\/\/www.google.com\/maps\/place\/Los+seismiles\/@-27.5396413,-68.2841765,11.57z\/data=!4m15!1m8!3m7!1s0x969f00c0a473c0bf:0xdebc0bac7209990e!2sCortaderas,+Catamarca!3b1!8m2!3d-27.5609208!4d-68.1469281!16s%2Fg%2F1tm2bx45!3m5!1s0x969eff2c515e323b:0xb77e6bfc77e12c8c!8m2!3d-27.6445015!4d-68.1639064!16s%2Fg%2F11n0c9jqmp?entry=ttu&#038;g_ep=EgoyMDI2MDExMy4wIKXMDSoKLDEwMDc5MjA2OUgBUAM%3D\" target=\"_blank\" class=\"map-btn\">\n                                        <i class=\"fas fa-map-marker-alt\"><\/i> Ver en Google Maps\n                                    <\/a>\n                                <\/div>\n                                                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n                        <div class=\"location-modal-backdrop\" id=\"modal-6\">\n                <div class=\"location-modal-content\">\n                    <button class=\"modal-close-btn\" onclick=\"closeLocationModal(6)\">&times;<\/button>\n                    \n                    <div class=\"modal-layout\">\n                        <!-- Left: Gallery\/Image -->\n                        <div class=\"modal-gallery\">\n                                                             <img decoding=\"async\" src=\"\" class=\"gallery-single-img\">\n                                                     <\/div>\n                        \n                        <!-- Right: Info -->\n                        <div class=\"modal-info\">\n                            <h2 class=\"modal-title\">Cuesta del Portezuelo<\/h2>\n                            <div class=\"modal-tags\">\n                                <span class=\"modal-cat\">Monta\u00f1a<\/span>\n                                                                    <span class=\"modal-tag\">Panor\u00e1mica<\/span>\n                                                                    <span class=\"modal-tag\">Verde<\/span>\n                                                                    <span class=\"modal-tag\">Curvas<\/span>\n                                                            <\/div>\n                            \n                            <div class=\"modal-description\">\n                                <h3>Descripci\u00f3n<\/h3>\n                                <p>Ubicaci\u00f3n: Acceso a San Fernando del Valle de Catamarca<br \/>\r\nTipo de locaci\u00f3n: Ruta esc\u00e9nica \/ monta\u00f1a<br \/>\r\nAltitud: aprox. 1.100\u20131.300 msnm<br \/>\r\n<br \/>\r\nDescripci\u00f3n visual:<br \/>\r\nRuta sinuosa de monta\u00f1a con vistas panor\u00e1micas al Valle Central. Curvas pronunciadas, desniveles, vegetaci\u00f3n serrana y miradores naturales. Paisaje ic\u00f3nico de la provincia, reconocible y de fuerte identidad visual.<br \/>\r\n<br \/>\r\nAccesibilidad:<br \/>\r\nAcceso asfaltado. Tr\u00e1nsito vehicular permanente. Cercan\u00eda inmediata a la capital provincial.<br \/>\r\n<br \/>\r\nServicios disponibles:<br \/>\r\nServicios completos en San Fernando del Valle de Catamarca.<br \/>\r\n<br \/>\r\nCondiciones de rodaje:<br \/>\r\nExcelente luz natural. Vistas abiertas para planos generales y tomas a\u00e9reas. Requiere coordinaci\u00f3n por cortes parciales de ruta.<br \/>\r\n<br \/>\r\nUsos audiovisuales sugeridos:<br \/>\r\nPublicidad, ficci\u00f3n, videoclips, escenas de viaje, automovilismo, spots institucionales.<\/p>\n                            <\/div>\n                            \n                            <div class=\"modal-meta\">\n                                                                <div class=\"meta-item\">\n                                    <h3>Ubicaci\u00f3n<\/h3>\n                                    <a href=\"https:\/\/www.google.com\/maps\/place\/Cuesta+de+El+Portezuelo\/@-28.472053,-65.7200216,12.99z\/data=!4m9!1m2!2m1!1sCuesta+del+Portezuelo,+Catamarca!3m5!1s0x942431e09df332d9:0x2c50655f1f270129!8m2!3d-28.4939803!4d-65.6178648!16s%2Fg%2F11g0w1qv6w?entry=ttu&#038;g_ep=EgoyMDI2MDExMy4wIKXMDSoKLDEwMDc5MjA2OUgBUAM%3D\" target=\"_blank\" class=\"map-btn\">\n                                        <i class=\"fas fa-map-marker-alt\"><\/i> Ver en Google Maps\n                                    <\/a>\n                                <\/div>\n                                                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n                        <div class=\"location-modal-backdrop\" id=\"modal-11\">\n                <div class=\"location-modal-content\">\n                    <button class=\"modal-close-btn\" onclick=\"closeLocationModal(11)\">&times;<\/button>\n                    \n                    <div class=\"modal-layout\">\n                        <!-- Left: Gallery\/Image -->\n                        <div class=\"modal-gallery\">\n                                                             <div class=\"gallery-wrapper\">\n                                    <div class=\"gallery-main\">\n                                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1506905925346-21bda4d32df4?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" class=\"gallery-main-img\" id=\"main-img-11\">\n                                    <\/div>\n                                    <div class=\"gallery-thumbs\">\n                                                                                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1506905925346-21bda4d32df4?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" onclick=\"changeModalImage(11, 'https:\/\/images.unsplash.com\/photo-1506905925346-21bda4d32df4?auto=format&#038;fit=crop&#038;w=800&#038;q=80')\" class=\"gallery-thumb\">\n                                                                                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1506905925346-21bda4d32df4?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" onclick=\"changeModalImage(11, 'https:\/\/images.unsplash.com\/photo-1506905925346-21bda4d32df4?auto=format&#038;fit=crop&#038;w=800&#038;q=80')\" class=\"gallery-thumb\">\n                                                                            <\/div>\n                                <\/div>\n                                                     <\/div>\n                        \n                        <!-- Right: Info -->\n                        <div class=\"modal-info\">\n                            <h2 class=\"modal-title\">Duna M\u00e1gica<\/h2>\n                            <div class=\"modal-tags\">\n                                <span class=\"modal-cat\">Alta Monta\u00f1a<\/span>\n                                                                    <span class=\"modal-tag\">Lagunas<\/span>\n                                                                    <span class=\"modal-tag\">Turquesa<\/span>\n                                                                    <span class=\"modal-tag\">4x4<\/span>\n                                                            <\/div>\n                            \n                            <div class=\"modal-description\">\n                                <h3>Descripci\u00f3n<\/h3>\n                                <p>Zona: Fiambal\u00e1 \u2013 Saujil<br \/>\r\nTipo de locaci\u00f3n: Desierto \/ duna aislada<br \/>\r\nAltitud: aprox. 1.500\u20131.700 msnm<br \/>\r\n<br \/>\r\nDescripci\u00f3n visual:<br \/>\r\nGran duna de arena clara, con pendientes pronunciadas y formas definidas por la acci\u00f3n del viento. Paisaje minimalista, sin elementos urbanos visibles y con alto impacto est\u00e9tico.<br \/>\r\n<br \/>\r\nAccesibilidad:<br \/>\r\nAcceso por camino de ripio y arena. Recomendado uso de veh\u00edculos 4x4.<br \/>\r\n<br \/>\r\nServicios disponibles:<br \/>\r\nServicios b\u00e1sicos en Fiambal\u00e1 (a corta distancia).<br \/>\r\n<br \/>\r\nCondiciones de rodaje:<br \/>\r\nAmplio espacio para despliegue t\u00e9cnico. Cambios de textura y luz a lo largo del d\u00eda. Ideal para tomas amplias y a\u00e9reas.<br \/>\r\n<br \/>\r\nUsos audiovisuales sugeridos:<br \/>\r\nPublicidad, moda, videoclips, escenas on\u00edricas, acci\u00f3n y aventura.<\/p>\n                            <\/div>\n                            \n                            <div class=\"modal-meta\">\n                                                                <div class=\"meta-item\">\n                                    <h3>Ubicaci\u00f3n<\/h3>\n                                    <a href=\"https:\/\/www.google.com\/maps\/place\/Duna+M%C3%A1gica\/@-27.5667586,-67.6137676,17z\/data=!4m14!1m7!3m6!1s0x969e32e507f9d14b:0x1c0a5f6153489121!2sDuna+M%C3%A1gica!8m2!3d-27.5667634!4d-67.6088967!16s%2Fg%2F11c2y18qz8!3m5!1s0x969e32e507f9d14b:0x1c0a5f6153489121!8m2!3d-27.5667634!4d-67.6088967!16s%2Fg%2F11c2y18qz8?entry=ttu&#038;g_ep=EgoyMDI2MDExMy4wIKXMDSoKLDEwMDc5MjA2OUgBUAM%3D\" target=\"_blank\" class=\"map-btn\">\n                                        <i class=\"fas fa-map-marker-alt\"><\/i> Ver en Google Maps\n                                    <\/a>\n                                <\/div>\n                                                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n                        <div class=\"location-modal-backdrop\" id=\"modal-10\">\n                <div class=\"location-modal-content\">\n                    <button class=\"modal-close-btn\" onclick=\"closeLocationModal(10)\">&times;<\/button>\n                    \n                    <div class=\"modal-layout\">\n                        <!-- Left: Gallery\/Image -->\n                        <div class=\"modal-gallery\">\n                                                             <div class=\"gallery-wrapper\">\n                                    <div class=\"gallery-main\">\n                                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1483363364942-886d34e9dfd0?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" class=\"gallery-main-img\" id=\"main-img-10\">\n                                    <\/div>\n                                    <div class=\"gallery-thumbs\">\n                                                                                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1483363364942-886d34e9dfd0?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" onclick=\"changeModalImage(10, 'https:\/\/images.unsplash.com\/photo-1483363364942-886d34e9dfd0?auto=format&#038;fit=crop&#038;w=800&#038;q=80')\" class=\"gallery-thumb\">\n                                                                                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1483363364942-886d34e9dfd0?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" onclick=\"changeModalImage(10, 'https:\/\/images.unsplash.com\/photo-1483363364942-886d34e9dfd0?auto=format&#038;fit=crop&#038;w=800&#038;q=80')\" class=\"gallery-thumb\">\n                                                                            <\/div>\n                                <\/div>\n                                                     <\/div>\n                        \n                        <!-- Right: Info -->\n                        <div class=\"modal-info\">\n                            <h2 class=\"modal-title\">Dunas de Tat\u00f3n<\/h2>\n                            <div class=\"modal-tags\">\n                                <span class=\"modal-cat\">Puna<\/span>\n                                                                    <span class=\"modal-tag\">Sal<\/span>\n                                                                    <span class=\"modal-tag\">Espejismo<\/span>\n                                                                    <span class=\"modal-tag\">Inmensidad<\/span>\n                                                            <\/div>\n                            \n                            <div class=\"modal-description\">\n                                <h3>Descripci\u00f3n<\/h3>\n                                <p>Zona: Norte de Fiambal\u00e1<br \/>\r\nTipo de locaci\u00f3n: Mar de dunas \/ desierto de gran escala<br \/>\r\nAltitud: aprox. 1.600 msnm<br \/>\r\n<br \/>\r\nDescripci\u00f3n visual:<br \/>\r\nExtenso sistema de dunas de gran altura, considerado entre los m\u00e1s imponentes del mundo. Paisaje continuo, sin referencias urbanas, con sensaci\u00f3n de inmensidad y aislamiento absoluto.<br \/>\r\n<br \/>\r\nAccesibilidad:<br \/>\r\nAcceso por caminos de arena. Requiere log\u00edstica 4x4 y planificaci\u00f3n previa.<br \/>\r\n<br \/>\r\nServicios disponibles:<br \/>\r\nServicios b\u00e1sicos en Fiambal\u00e1 y localidades cercanas.<br \/>\r\n<br \/>\r\nCondiciones de rodaje:<br \/>\r\nAlta intensidad lum\u00ednica. Contrastes marcados de luz y sombra. Escala ideal para planos generales y tomas a\u00e9reas.<br \/>\r\n<br \/>\r\nUsos audiovisuales sugeridos:<br \/>\r\nCine \u00e9pico, acci\u00f3n, aventura, publicidad internacional, series y videoclips.<\/p>\n                            <\/div>\n                            \n                            <div class=\"modal-meta\">\n                                                                <div class=\"meta-item\">\n                                    <h3>Ubicaci\u00f3n<\/h3>\n                                    <a href=\"https:\/\/www.google.com\/maps\/place\/Dunas+de+Tat%C3%B3n\/@-27.3540254,-67.6198411,14z\/data=!4m10!1m2!2m1!1sdunas+de+taton!3m6!1s0x969fcf98601b2217:0xd6376323625b3a0a!8m2!3d-27.354017!4d-67.5817336!15sCg5kdW5hcyBkZSB0YXRvbpIBC3NjZW5pY19zcG904AEA!16s%2Fg%2F11h8f4w0kc?entry=ttu&#038;g_ep=EgoyMDI2MDExMy4wIKXMDSoKLDEwMDc5MjA2OUgBUAM%3D\" target=\"_blank\" class=\"map-btn\">\n                                        <i class=\"fas fa-map-marker-alt\"><\/i> Ver en Google Maps\n                                    <\/a>\n                                <\/div>\n                                                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n                        <div class=\"location-modal-backdrop\" id=\"modal-4\">\n                <div class=\"location-modal-content\">\n                    <button class=\"modal-close-btn\" onclick=\"closeLocationModal(4)\">&times;<\/button>\n                    \n                    <div class=\"modal-layout\">\n                        <!-- Left: Gallery\/Image -->\n                        <div class=\"modal-gallery\">\n                                                             <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1518182170546-0766aa6f790c?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" class=\"gallery-single-img\">\n                                                     <\/div>\n                        \n                        <!-- Right: Info -->\n                        <div class=\"modal-info\">\n                            <h2 class=\"modal-title\">Campo de Piedra P\u00f3mez<\/h2>\n                            <div class=\"modal-tags\">\n                                <span class=\"modal-cat\">Puna<\/span>\n                                                                    <span class=\"modal-tag\">Surrealista<\/span>\n                                                                    <span class=\"modal-tag\">Desierto<\/span>\n                                                                    <span class=\"modal-tag\">Blanco<\/span>\n                                                            <\/div>\n                            \n                            <div class=\"modal-description\">\n                                <h3>Descripci\u00f3n<\/h3>\n                                <p>Departamento: Antofagasta de la Sierra<br \/>\r\nTipo de locaci\u00f3n: Paisaje volc\u00e1nico \/ puna<br \/>\r\nAltitud: aprox. 3.000\u20133.500 msnm<br \/>\r\n<br \/>\r\nDescripci\u00f3n visual:<br \/>\r\n\u00c1rea natural protegida con extensas formaciones de piedra p\u00f3mez blanca erosionada. Est\u00e9tica lunar o extraterrestre, con texturas \u00fanicas y gran continuidad visual.<br \/>\r\n<br \/>\r\nAccesibilidad:<br \/>\r\nAcceso controlado. Caminos de ripio. Requiere autorizaci\u00f3n previa y log\u00edstica especializada.<br \/>\r\n<br \/>\r\nServicios disponibles:<br \/>\r\nServicios b\u00e1sicos en Antofagasta de la Sierra.<br \/>\r\n<br \/>\r\nCondiciones de rodaje:<br \/>\r\nClima extremo y gran amplitud t\u00e9rmica. Silencio absoluto. Cielos de alta calidad lum\u00ednica y atmosf\u00e9rica.<br \/>\r\n<br \/>\r\nUsos audiovisuales sugeridos:<br \/>\r\nCiencia ficci\u00f3n, fantas\u00eda, cine experimental, producciones de alto impacto visual.<\/p>\n                            <\/div>\n                            \n                            <div class=\"modal-meta\">\n                                                                <div class=\"meta-item\">\n                                    <h3>Ubicaci\u00f3n<\/h3>\n                                    <a href=\"https:\/\/www.google.com\/maps\/place\/Campo+de+Piedra+Pomez\/@-26.6041665,-67.5092225,14z\/data=!4m10!1m2!2m1!1scampo+de+piedra+pomez!3m6!1s0x96a00f2c3f9a00af:0x817c13538f2a8fb9!8m2!3d-26.5856619!4d-67.4800292!15sChVjYW1wbyBkZSBwaWVkcmEgcG9tZXqSAR9tdW5pY2lwYWxfZGVwYXJ0bWVudF9vZl90b3VyaXNt4AEA!16s%2Fg%2F11fy4d2k62?entry=ttu&#038;g_ep=EgoyMDI2MDExMy4wIKXMDSoKLDEwMDc5MjA2OUgBUAM%3D\" target=\"_blank\" class=\"map-btn\">\n                                        <i class=\"fas fa-map-marker-alt\"><\/i> Ver en Google Maps\n                                    <\/a>\n                                <\/div>\n                                                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n                        <div class=\"location-modal-backdrop\" id=\"modal-8\">\n                <div class=\"location-modal-content\">\n                    <button class=\"modal-close-btn\" onclick=\"closeLocationModal(8)\">&times;<\/button>\n                    \n                    <div class=\"modal-layout\">\n                        <!-- Left: Gallery\/Image -->\n                        <div class=\"modal-gallery\">\n                                                             <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1570701564993-e00652af8aa7?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" class=\"gallery-single-img\">\n                                                     <\/div>\n                        \n                        <!-- Right: Info -->\n                        <div class=\"modal-info\">\n                            <h2 class=\"modal-title\">Fiambal\u00e1<\/h2>\n                            <div class=\"modal-tags\">\n                                <span class=\"modal-cat\">Desierto<\/span>\n                                                                    <span class=\"modal-tag\">Agua<\/span>\n                                                                    <span class=\"modal-tag\">Rocas<\/span>\n                                                                    <span class=\"modal-tag\">Natural<\/span>\n                                                            <\/div>\n                            \n                            <div class=\"modal-description\">\n                                <h3>Descripci\u00f3n<\/h3>\n                                <p>Departamento: Tinogasta<br \/>\r\nTipo de locaci\u00f3n: Ciudad \/ Pueblo andino \u2013 entorno des\u00e9rtico<br \/>\r\nAltitud: aprox. 1.600 msnm<br \/>\r\n<br \/>\r\nDescripci\u00f3n visual:<br \/>\r\nLocalidad de peque\u00f1a escala con arquitectura tradicional y colonial de adobe, calles tranquilas y fuerte identidad cultural andina. Rodeada por paisajes \u00e1ridos, monta\u00f1as y cauces secos, ofrece una combinaci\u00f3n de entorno urbano y natural en un mismo territorio.<br \/>\r\n<br \/>\r\nAccesibilidad:<br \/>\r\nAcceso asfaltado. Conectividad vehicular directa. Base log\u00edstica para rodajes en el oeste provincial.<br \/>\r\n<br \/>\r\nServicios disponibles:<br \/>\r\nAlojamiento, gastronom\u00eda, estaciones de servicio, comercios, hospital, conectividad b\u00e1sica.<br \/>\r\n<br \/>\r\nCondiciones de rodaje:<br \/>\r\nClima seco, cielos despejados gran parte del a\u00f1o. Bajo nivel de contaminaci\u00f3n sonora y visual. Excelente luz natural.<br \/>\r\n<br \/>\r\nUsos audiovisuales sugeridos:<br \/>\r\nFicci\u00f3n, documental, publicidad, series, road movies, relatos hist\u00f3ricos o contempor\u00e1neos.<\/p>\n                            <\/div>\n                            \n                            <div class=\"modal-meta\">\n                                                                <div class=\"meta-item\">\n                                    <h3>Ubicaci\u00f3n<\/h3>\n                                    <a href=\"https:\/\/www.google.com\/maps\/place\/Fiambala,+Catamarca\/@-27.6848736,-67.7063642,12z\/data=!4m15!1m8!3m7!1s0x969e30f162b7c3bf:0xd70071b33b64eb44!2sFiambala,+Catamarca!3b1!8m2!3d-27.68933!4d-67.6193274!16s%2Fm%2F053zphq!3m5!1s0x969e30f162b7c3bf:0xd70071b33b64eb44!8m2!3d-27.68933!4d-67.6193274!16s%2Fm%2F053zphq?entry=ttu&#038;g_ep=EgoyMDI2MDExMy4wIKXMDSoKLDEwMDc5MjA2OUgBUAM%3D\" target=\"_blank\" class=\"map-btn\">\n                                        <i class=\"fas fa-map-marker-alt\"><\/i> Ver en Google Maps\n                                    <\/a>\n                                <\/div>\n                                                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n                    <\/div>\n\n    <\/section>\n\n    <!-- STYLES -->\n    <style>\n        @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Zona+Pro:wght@300;400;600;700;800&display=swap\");\n\n        :root {\n            --mulita-black: #050505;\n            --mulita-dark: #1a1a1a;\n            --mulita-card-bg: #111111;\n            --mulita-orange: #EB5E28;\n            --mulita-orange-rgb: 235, 94, 40;\n            --mulita-white: #e0e0e0;\n            --font-loc: \"Zona Pro\", sans-serif;\n        }\n\n        \/* Support for Theme Switching (from previous context) *\/\n        body[data-theme=\"green\"] .mulita-locations {\n            --mulita-orange: #588157;\n            --mulita-orange-rgb: 88, 129, 87;\n        }\n\n        .mulita-locations {\n            position: relative;\n            background-color: var(--mulita-black);\n            padding: 120px 20px;\n            color: var(--mulita-white);\n            font-family: var(--font-loc);\n            overflow: hidden;\n        }\n\n        .locations-container {\n            max-width: 1400px;\n            margin: 0 auto;\n            position: relative;\n            z-index: 2;\n        }\n\n        .locations-header {\n            text-align: center;\n            margin-bottom: 60px;\n        }\n\n        .section-tag {\n            color: var(--mulita-orange);\n            font-size: 0.8rem;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 3px;\n            display: block;\n            margin-bottom: 15px;\n        }\n\n        .section-title {\n            font-size: clamp(2rem, 5vw, 4rem);\n            font-weight: 800;\n            line-height: 1;\n            margin-bottom: 20px;\n        }\n\n        .text-gradient {\n            background: linear-gradient(135deg, #fff 0%, #999 100%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            color: white;\n        }\n        \n        .section-subtitle {\n            color: rgba(255, 255, 255, 0.6);\n            max-width: 600px;\n            margin: 0 auto;\n            font-size: 1.1rem;\n            line-height: 1.6;\n        }\n\n        \/* Tabs \/ Filters *\/\n        .locations-tabs {\n            display: flex;\n            justify-content: center;\n            gap: 15px;\n            flex-wrap: wrap;\n            margin-bottom: 50px;\n        }\n\n        .tab-btn {\n            background: transparent;\n            border: 1px solid rgba(255, 255, 255, 0.2);\n            color: var(--mulita-white);\n            padding: 10px 25px;\n            border-radius: 30px;\n            font-family: var(--font-loc);\n            font-size: 0.9rem;\n            cursor: pointer;\n            transition: all 0.3s ease;\n        }\n\n        .tab-btn:hover, .tab-btn.active {\n            border-color: var(--mulita-orange);\n            background: rgba(var(--mulita-orange-rgb), 0.1);\n            color: var(--mulita-orange);\n        }\n\n        \/* Grid *\/\n        .locations-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr); \/* Force 3 columns *\/\n            gap: 30px;\n        }\n\n        \/* Responsive Grid *\/\n        @media (max-width: 1100px) {\n            .locations-grid {\n                grid-template-columns: repeat(2, 1fr);\n            }\n        }\n\n        @media (max-width: 768px) {\n            .locations-grid {\n                grid-template-columns: 1fr;\n            }\n            .section-title {\n                font-size: 2.5rem;\n            }\n        }\n\n        \/* Card Styles *\/\n        .location-card {\n            background: var(--mulita-card-bg);\n            border-radius: 20px;\n            overflow: hidden;\n            border: 1px solid rgba(255, 255, 255, 0.05);\n            transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);\n            position: relative;\n            display: block; \/* Visible by default *\/\n        }\n        \n        .location-card.hidden {\n            display: none;\n        }\n\n        .location-card:hover {\n            transform: translateY(-10px);\n            border-color: rgba(var(--mulita-orange-rgb), 0.3);\n            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);\n        }\n\n        .card-image-wrap {\n            position: relative;\n            height: 250px;\n            overflow: hidden;\n        }\n\n        .card-img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);\n        }\n\n        .location-card:hover .card-img {\n            transform: scale(1.1);\n        }\n\n        .card-overlay {\n            position: absolute;\n            inset: 0;\n            background: linear-gradient(to bottom, transparent 0%, rgba(5,5,5,0.8) 100%);\n            z-index: 1;\n        }\n\n        .card-badges {\n            position: absolute;\n            top: 20px;\n            left: 20px;\n            display: flex;\n            gap: 10px;\n            z-index: 2;\n        }\n\n        .badge {\n            background: rgba(5, 5, 5, 0.7);\n            backdrop-filter: blur(5px);\n            padding: 6px 12px;\n            border-radius: 20px;\n            font-size: 0.7rem;\n            font-weight: 600;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            border: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        .card-content {\n            padding: 25px;\n            position: relative;\n            z-index: 2;\n        }\n\n        .location-name {\n            font-size: 1.4rem;\n            font-weight: 700;\n            margin-bottom: 10px;\n            color: #fff;\n        }\n\n        .location-desc {\n            color: #888;\n            font-size: 0.95rem;\n            line-height: 1.5;\n            margin-bottom: 20px;\n        }\n\n        .card-link {\n            display: inline-flex;\n            align-items: center;\n            gap: 10px;\n            color: var(--mulita-orange);\n            background: none;\n            border: none;\n            padding: 0;\n            cursor: pointer;\n            font-weight: 600;\n            font-size: 0.9rem;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            transition: gap 0.3s ease;\n            font-family: inherit;\n        }\n\n        .card-link:hover {\n            gap: 15px;\n        }\n\n        \/* Ambient Glow *\/\n        .ambient-glow {\n            position: absolute;\n            width: 800px;\n            height: 800px;\n            background: radial-gradient(circle, rgba(var(--mulita-orange-rgb), 0.08) 0%, transparent 70%);\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            pointer-events: none;\n            z-index: 1;\n        }\n\n        \/* ========================\n           MODAL STYLES\n           ======================== *\/\n        .location-modal-backdrop {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0,0,0,0.85);\n            backdrop-filter: blur(10px);\n            z-index: 9999;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            opacity: 0;\n            pointer-events: none;\n            transition: opacity 0.3s ease;\n        }\n        \n        .location-modal-backdrop.open {\n            opacity: 1;\n            pointer-events: all;\n        }\n\n        .location-modal-content {\n            background: #111;\n            border: 1px solid rgba(255,255,255,0.1);\n            width: 90%;\n            max-width: 1000px;\n            max-height: 90vh;\n            overflow-y: auto;\n            border-radius: 20px;\n            position: relative;\n            box-shadow: 0 50px 100px rgba(0,0,0,0.5);\n            transform: translateY(30px);\n            transition: transform 0.3s ease;\n        }\n        \n        .location-modal-backdrop.open .location-modal-content {\n            transform: translateY(0);\n        }\n\n        .modal-close-btn {\n            position: absolute;\n            top: 20px;\n            right: 20px;\n            background: rgba(255,255,255,0.1);\n            color: #fff;\n            border: none;\n            width: 40px;\n            height: 40px;\n            border-radius: 50%;\n            font-size: 24px;\n            cursor: pointer;\n            z-index: 10;\n            transition: background 0.2s;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n        \n        .modal-close-btn:hover {\n            background: var(--mulita-orange);\n        }\n\n        .modal-layout {\n            display: grid;\n            grid-template-columns: 1.2fr 1fr;\n            min-height: 500px;\n        }\n        \n        \/* Modal Gallery *\/\n        .modal-gallery {\n            background: #000;\n            padding: 0;\n            display: flex;\n            flex-direction: column;\n        }\n        \n        .gallery-wrapper {\n            height: 100%;\n            display: flex;\n            flex-direction: column;\n        }\n        \n        .gallery-main {\n            flex: 1;\n            overflow: hidden;\n            position: relative;\n        }\n        \n        .gallery-main-img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            position: absolute;\n        }\n        \n        .gallery-thumbs {\n            display: flex;\n            gap: 10px;\n            padding: 15px;\n            overflow-x: auto;\n            background: #0a0a0a;\n        }\n        \n        .gallery-thumb {\n            width: 80px;\n            height: 60px;\n            object-fit: cover;\n            border-radius: 6px;\n            cursor: pointer;\n            opacity: 0.6;\n            transition: opacity 0.2s;\n            border: 2px solid transparent;\n        }\n        \n        .gallery-thumb:hover {\n            opacity: 1;\n            border-color: var(--mulita-orange);\n        }\n        \n        .gallery-single-img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n        }\n        \n        \/* Modal Info *\/\n        .modal-info {\n            padding: 40px;\n            overflow-y: auto;\n        }\n        \n        .modal-title {\n            font-size: 2.5rem;\n            margin-bottom: 15px;\n            line-height: 1.1;\n        }\n        \n        .modal-tags {\n            margin-bottom: 30px;\n            display: flex;\n            gap: 10px;\n            flex-wrap: wrap;\n        }\n        \n        .modal-cat {\n            color: var(--mulita-orange);\n            font-weight: 700;\n            text-transform: uppercase;\n            font-size: 0.9rem;\n            letter-spacing: 1px;\n        }\n        \n        .modal-tag {\n            background: rgba(255,255,255,0.1);\n            padding: 4px 12px;\n            border-radius: 12px;\n            font-size: 0.8rem;\n            color: #ccc;\n        }\n        \n        .modal-description h3, .modal-meta h3 {\n            font-size: 1rem;\n            text-transform: uppercase;\n            color: #888;\n            margin-bottom: 15px;\n            letter-spacing: 2px;\n        }\n        \n        .modal-description p {\n            font-size: 1.05rem;\n            line-height: 1.8;\n            color: #ddd;\n            margin-bottom: 30px;\n        }\n        \n        .map-btn {\n            display: inline-block;\n            background: var(--mulita-orange);\n            color: white;\n            padding: 12px 25px;\n            border-radius: 8px;\n            text-decoration: none;\n            font-weight: 600;\n            transition: all 0.2s;\n        }\n        \n        .map-btn:hover {\n            opacity: 0.9;\n            transform: translateY(-2px);\n        }\n\n        \/* Responsive Modal *\/\n        @media (max-width: 900px) {\n            .modal-layout {\n                grid-template-columns: 1fr;\n            }\n            .modal-gallery {\n                height: 300px;\n            }\n        }\n        \n    <\/style>\n\n    <!-- SCRIPTS -->\n    <script>\n        document.addEventListener('DOMContentLoaded', () => {\n            \/\/ Filter Logic\n            const buttons = document.querySelectorAll('.tab-btn');\n            const cards = document.querySelectorAll('.location-card');\n\n            buttons.forEach(btn => {\n                btn.addEventListener('click', function() {\n                    buttons.forEach(b => b.classList.remove('active'));\n                    this.classList.add('active');\n                    \n                    const filter = this.getAttribute('data-filter');\n                    \n                    cards.forEach(card => {\n                        if (filter === 'all') {\n                            card.classList.remove('hidden');\n                        } else {\n                            if (card.classList.contains('filter-' + filter)) {\n                                card.classList.remove('hidden');\n                            } else {\n                                card.classList.add('hidden');\n                            }\n                        }\n                    });\n                });\n            });\n        });\n\n        \/\/ Modal Logic\n        function openLocationModal(id) {\n            const modal = document.getElementById('modal-' + id);\n            if(modal) {\n                modal.classList.add('open');\n                document.body.style.overflow = 'hidden'; \/\/ Prevent background scrolling\n            }\n        }\n\n        function closeLocationModal(id) {\n            const modal = document.getElementById('modal-' + id);\n            if(modal) {\n                modal.classList.remove('open');\n                document.body.style.overflow = '';\n            }\n        }\n        \n        function changeModalImage(locId, newSrc) {\n            const mainImg = document.getElementById('main-img-' + locId);\n            if(mainImg) {\n                \/\/ optional fade effect could go here\n                mainImg.src = newSrc;\n            }\n        }\n\n        \/\/ Close on backdrop click\n        document.querySelectorAll('.location-modal-backdrop').forEach(backdrop => {\n            backdrop.addEventListener('click', function(e) {\n                if (e.target === this) {\n                    this.classList.remove('open');\n                    document.body.style.overflow = '';\n                }\n            });\n        });\n    <\/script>\n    \n\n\n    <section class=\"mulita-directory\" id=\"directorio\">\n        <div class=\"directory-container\">\n            <!-- Header -->\n            <div class=\"directory-header\" data-aos=\"fade-up\">\n                <span class=\"dir-tag\">Talento & Servicios<\/span>\n                <h2 class=\"dir-title\">Directorio <span class=\"text-orange\">Audiovisual<\/span><\/h2>\n                <p class=\"dir-subtitle\">Conecta con las empresas locales y profesionales t\u00e9cnicos que har\u00e1n posible tu rodaje en Catamarca.<\/p>\n            <\/div>\n\n            <!-- Toolbar -->\n            <div class=\"directory-toolbar\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n                <div class=\"search-box\">\n                    <i class=\"fas fa-search\"><\/i>\n                    <input type=\"text\" id=\"dir-search\" placeholder=\"Buscar por nombre, rubro o equipo...\">\n                <\/div>\n                <div class=\"filter-group\">\n                    <select class=\"dir-select\" id=\"dir-filter\">\n                        <option value=\"all\">Todas las categor\u00edas<\/option>\n                                                    <option value=\"Catering\">Catering<\/option>\n                                                    <option value=\"Director de Arte\">Director de Arte<\/option>\n                                                    <option value=\"Director de Fotograf\u00eda\">Director de Fotograf\u00eda<\/option>\n                                                    <option value=\"El\u00e9ctrico\">El\u00e9ctrico<\/option>\n                                                    <option value=\"Gaffer\">Gaffer<\/option>\n                                                    <option value=\"Location Manager\">Location Manager<\/option>\n                                                    <option value=\"Maquillaje\">Maquillaje<\/option>\n                                                    <option value=\"Operador Drone\">Operador Drone<\/option>\n                                                    <option value=\"Productora\">Productora<\/option>\n                                                    <option value=\"Rental House\">Rental House<\/option>\n                                                    <option value=\"Sonidista\">Sonidista<\/option>\n                                                    <option value=\"Transporte\">Transporte<\/option>\n                                            <\/select>\n                <\/div>\n            <\/div>\n\n            <!-- Grid -->\n            <div class=\"directory-grid\" id=\"directory-grid\">\n                                <div class=\"dir-card\" \n                     data-aos=\"fade-up\" \n                     data-aos-delay=\"100\"\n                     data-name=\"norte rental\"\n                     data-role=\"Rental House\"\n                     data-search=\"norte rental rental house biling\u00fce, movilidad propia, factura a\">\n                    \n                    <div class=\"card-header\">\n                                                    <div class=\"verified-badge\" title=\"Verificado\"><i class=\"fas fa-check-circle\"><\/i><\/div>\n                                                \n                        <div class=\"profile-img company\">\n                                                            <img decoding=\"async\" src=\"https:\/\/ui-avatars.com\/api\/?name=Norte+Rental&#038;background=random\" alt=\"Norte Rental\">\n                                                    <\/div>\n                    <\/div>\n                    \n                    <div class=\"card-body\">\n                        <span class=\"card-category\">Rental House<\/span>\n                        <h3 class=\"card-name\">Norte Rental<\/h3>\n                        <p class=\"card-bio\">Profesional con amplia experiencia en la industria audiovisual de la regi\u00f3n. Disponible para proyectos.<\/p>\n                        \n                                                <div class=\"card-specs\">\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Biling\u00fce<\/span>\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Movilidad Propia<\/span>\n                                                    <\/div>\n                                            <\/div>\n                    \n                    <div class=\"card-footer\">\n                        <a href=\"#\" class=\"btn-contact \">\n                            Contactar\n                        <\/a>\n                    <\/div>\n                <\/div>\n                                <div class=\"dir-card\" \n                     data-aos=\"fade-up\" \n                     data-aos-delay=\"200\"\n                     data-name=\"juan carlos luz\"\n                     data-role=\"Gaffer\"\n                     data-search=\"juan carlos luz gaffer biling\u00fce, movilidad propia, factura a\">\n                    \n                    <div class=\"card-header\">\n                                                    <div class=\"verified-badge\" title=\"Verificado\"><i class=\"fas fa-check-circle\"><\/i><\/div>\n                                                \n                        <div class=\"profile-img user\">\n                                                            <img decoding=\"async\" src=\"https:\/\/ui-avatars.com\/api\/?name=Juan+Carlos+Luz&#038;background=random\" alt=\"Juan Carlos Luz\">\n                                                    <\/div>\n                    <\/div>\n                    \n                    <div class=\"card-body\">\n                        <span class=\"card-category\">Gaffer<\/span>\n                        <h3 class=\"card-name\">Juan Carlos Luz<\/h3>\n                        <p class=\"card-bio\">Profesional con amplia experiencia en la industria audiovisual de la regi\u00f3n. Disponible para proyectos.<\/p>\n                        \n                                                <div class=\"card-specs\">\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Biling\u00fce<\/span>\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Movilidad Propia<\/span>\n                                                    <\/div>\n                                            <\/div>\n                    \n                    <div class=\"card-footer\">\n                        <a href=\"#\" class=\"btn-contact outline\">\n                            Contactar\n                        <\/a>\n                    <\/div>\n                <\/div>\n                                <div class=\"dir-card\" \n                     data-aos=\"fade-up\" \n                     data-aos-delay=\"300\"\n                     data-name=\"maria catering\"\n                     data-role=\"Catering\"\n                     data-search=\"maria catering catering biling\u00fce, movilidad propia, factura a\">\n                    \n                    <div class=\"card-header\">\n                                                \n                        <div class=\"profile-img company\">\n                                                            <img decoding=\"async\" src=\"https:\/\/ui-avatars.com\/api\/?name=Maria+Catering&#038;background=random\" alt=\"Maria Catering\">\n                                                    <\/div>\n                    <\/div>\n                    \n                    <div class=\"card-body\">\n                        <span class=\"card-category\">Catering<\/span>\n                        <h3 class=\"card-name\">Maria Catering<\/h3>\n                        <p class=\"card-bio\">Profesional con amplia experiencia en la industria audiovisual de la regi\u00f3n. Disponible para proyectos.<\/p>\n                        \n                                                <div class=\"card-specs\">\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Biling\u00fce<\/span>\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Movilidad Propia<\/span>\n                                                    <\/div>\n                                            <\/div>\n                    \n                    <div class=\"card-footer\">\n                        <a href=\"#\" class=\"btn-contact \">\n                            Contactar\n                        <\/a>\n                    <\/div>\n                <\/div>\n                                <div class=\"dir-card\" \n                     data-aos=\"fade-up\" \n                     data-aos-delay=\"400\"\n                     data-name=\"pedro camara\"\n                     data-role=\"Director de Fotograf\u00eda\"\n                     data-search=\"pedro camara director de fotograf\u00eda biling\u00fce, movilidad propia, factura a\">\n                    \n                    <div class=\"card-header\">\n                                                \n                        <div class=\"profile-img user\">\n                                                            <img decoding=\"async\" src=\"https:\/\/ui-avatars.com\/api\/?name=Pedro+Camara&#038;background=random\" alt=\"Pedro Camara\">\n                                                    <\/div>\n                    <\/div>\n                    \n                    <div class=\"card-body\">\n                        <span class=\"card-category\">Director de Fotograf\u00eda<\/span>\n                        <h3 class=\"card-name\">Pedro Camara<\/h3>\n                        <p class=\"card-bio\">Profesional con amplia experiencia en la industria audiovisual de la regi\u00f3n. Disponible para proyectos.<\/p>\n                        \n                                                <div class=\"card-specs\">\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Biling\u00fce<\/span>\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Movilidad Propia<\/span>\n                                                    <\/div>\n                                            <\/div>\n                    \n                    <div class=\"card-footer\">\n                        <a href=\"#\" class=\"btn-contact outline\">\n                            Contactar\n                        <\/a>\n                    <\/div>\n                <\/div>\n                                <div class=\"dir-card\" \n                     data-aos=\"fade-up\" \n                     data-aos-delay=\"500\"\n                     data-name=\"log\u00edstica andina\"\n                     data-role=\"Transporte\"\n                     data-search=\"log\u00edstica andina transporte biling\u00fce, movilidad propia, factura a\">\n                    \n                    <div class=\"card-header\">\n                                                    <div class=\"verified-badge\" title=\"Verificado\"><i class=\"fas fa-check-circle\"><\/i><\/div>\n                                                \n                        <div class=\"profile-img company\">\n                                                            <img decoding=\"async\" src=\"https:\/\/ui-avatars.com\/api\/?name=Log%C3%ADstica+Andina&#038;background=random\" alt=\"Log\u00edstica Andina\">\n                                                    <\/div>\n                    <\/div>\n                    \n                    <div class=\"card-body\">\n                        <span class=\"card-category\">Transporte<\/span>\n                        <h3 class=\"card-name\">Log\u00edstica Andina<\/h3>\n                        <p class=\"card-bio\">Profesional con amplia experiencia en la industria audiovisual de la regi\u00f3n. Disponible para proyectos.<\/p>\n                        \n                                                <div class=\"card-specs\">\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Biling\u00fce<\/span>\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Movilidad Propia<\/span>\n                                                    <\/div>\n                                            <\/div>\n                    \n                    <div class=\"card-footer\">\n                        <a href=\"#\" class=\"btn-contact \">\n                            Contactar\n                        <\/a>\n                    <\/div>\n                <\/div>\n                                <div class=\"dir-card\" \n                     data-aos=\"fade-up\" \n                     data-aos-delay=\"500\"\n                     data-name=\"ana scouting\"\n                     data-role=\"Location Manager\"\n                     data-search=\"ana scouting location manager biling\u00fce, movilidad propia, factura a\">\n                    \n                    <div class=\"card-header\">\n                                                    <div class=\"verified-badge\" title=\"Verificado\"><i class=\"fas fa-check-circle\"><\/i><\/div>\n                                                \n                        <div class=\"profile-img user\">\n                                                            <img decoding=\"async\" src=\"https:\/\/ui-avatars.com\/api\/?name=Ana+Scouting&#038;background=random\" alt=\"Ana Scouting\">\n                                                    <\/div>\n                    <\/div>\n                    \n                    <div class=\"card-body\">\n                        <span class=\"card-category\">Location Manager<\/span>\n                        <h3 class=\"card-name\">Ana Scouting<\/h3>\n                        <p class=\"card-bio\">Profesional con amplia experiencia en la industria audiovisual de la regi\u00f3n. Disponible para proyectos.<\/p>\n                        \n                                                <div class=\"card-specs\">\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Biling\u00fce<\/span>\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Movilidad Propia<\/span>\n                                                    <\/div>\n                                            <\/div>\n                    \n                    <div class=\"card-footer\">\n                        <a href=\"#\" class=\"btn-contact outline\">\n                            Contactar\n                        <\/a>\n                    <\/div>\n                <\/div>\n                                <div class=\"dir-card\" \n                     data-aos=\"fade-up\" \n                     data-aos-delay=\"500\"\n                     data-name=\"sonido total\"\n                     data-role=\"Sonidista\"\n                     data-search=\"sonido total sonidista biling\u00fce, movilidad propia, factura a\">\n                    \n                    <div class=\"card-header\">\n                                                \n                        <div class=\"profile-img user\">\n                                                            <img decoding=\"async\" src=\"https:\/\/ui-avatars.com\/api\/?name=Sonido+Total&#038;background=random\" alt=\"Sonido Total\">\n                                                    <\/div>\n                    <\/div>\n                    \n                    <div class=\"card-body\">\n                        <span class=\"card-category\">Sonidista<\/span>\n                        <h3 class=\"card-name\">Sonido Total<\/h3>\n                        <p class=\"card-bio\">Profesional con amplia experiencia en la industria audiovisual de la regi\u00f3n. Disponible para proyectos.<\/p>\n                        \n                                                <div class=\"card-specs\">\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Biling\u00fce<\/span>\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Movilidad Propia<\/span>\n                                                    <\/div>\n                                            <\/div>\n                    \n                    <div class=\"card-footer\">\n                        <a href=\"#\" class=\"btn-contact outline\">\n                            Contactar\n                        <\/a>\n                    <\/div>\n                <\/div>\n                                <div class=\"dir-card\" \n                     data-aos=\"fade-up\" \n                     data-aos-delay=\"500\"\n                     data-name=\"makeup pro\"\n                     data-role=\"Maquillaje\"\n                     data-search=\"makeup pro maquillaje biling\u00fce, movilidad propia, factura a\">\n                    \n                    <div class=\"card-header\">\n                                                \n                        <div class=\"profile-img user\">\n                                                            <img decoding=\"async\" src=\"https:\/\/ui-avatars.com\/api\/?name=MakeUp+Pro&#038;background=random\" alt=\"MakeUp Pro\">\n                                                    <\/div>\n                    <\/div>\n                    \n                    <div class=\"card-body\">\n                        <span class=\"card-category\">Maquillaje<\/span>\n                        <h3 class=\"card-name\">MakeUp Pro<\/h3>\n                        <p class=\"card-bio\">Profesional con amplia experiencia en la industria audiovisual de la regi\u00f3n. Disponible para proyectos.<\/p>\n                        \n                                                <div class=\"card-specs\">\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Biling\u00fce<\/span>\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Movilidad Propia<\/span>\n                                                    <\/div>\n                                            <\/div>\n                    \n                    <div class=\"card-footer\">\n                        <a href=\"#\" class=\"btn-contact outline\">\n                            Contactar\n                        <\/a>\n                    <\/div>\n                <\/div>\n                                <div class=\"dir-card\" \n                     data-aos=\"fade-up\" \n                     data-aos-delay=\"500\"\n                     data-name=\"drone catamarca\"\n                     data-role=\"Operador Drone\"\n                     data-search=\"drone catamarca operador drone biling\u00fce, movilidad propia, factura a\">\n                    \n                    <div class=\"card-header\">\n                                                \n                        <div class=\"profile-img user\">\n                                                            <img decoding=\"async\" src=\"https:\/\/ui-avatars.com\/api\/?name=Drone+Catamarca&#038;background=random\" alt=\"Drone Catamarca\">\n                                                    <\/div>\n                    <\/div>\n                    \n                    <div class=\"card-body\">\n                        <span class=\"card-category\">Operador Drone<\/span>\n                        <h3 class=\"card-name\">Drone Catamarca<\/h3>\n                        <p class=\"card-bio\">Profesional con amplia experiencia en la industria audiovisual de la regi\u00f3n. Disponible para proyectos.<\/p>\n                        \n                                                <div class=\"card-specs\">\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Biling\u00fce<\/span>\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Movilidad Propia<\/span>\n                                                    <\/div>\n                                            <\/div>\n                    \n                    <div class=\"card-footer\">\n                        <a href=\"#\" class=\"btn-contact outline\">\n                            Contactar\n                        <\/a>\n                    <\/div>\n                <\/div>\n                                <div class=\"dir-card\" \n                     data-aos=\"fade-up\" \n                     data-aos-delay=\"500\"\n                     data-name=\"cine noa\"\n                     data-role=\"Productora\"\n                     data-search=\"cine noa productora biling\u00fce, movilidad propia, factura a\">\n                    \n                    <div class=\"card-header\">\n                                                \n                        <div class=\"profile-img company\">\n                                                            <img decoding=\"async\" src=\"https:\/\/ui-avatars.com\/api\/?name=Cine+NOA&#038;background=random\" alt=\"Cine NOA\">\n                                                    <\/div>\n                    <\/div>\n                    \n                    <div class=\"card-body\">\n                        <span class=\"card-category\">Productora<\/span>\n                        <h3 class=\"card-name\">Cine NOA<\/h3>\n                        <p class=\"card-bio\">Profesional con amplia experiencia en la industria audiovisual de la regi\u00f3n. Disponible para proyectos.<\/p>\n                        \n                                                <div class=\"card-specs\">\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Biling\u00fce<\/span>\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Movilidad Propia<\/span>\n                                                    <\/div>\n                                            <\/div>\n                    \n                    <div class=\"card-footer\">\n                        <a href=\"#\" class=\"btn-contact \">\n                            Contactar\n                        <\/a>\n                    <\/div>\n                <\/div>\n                                <div class=\"dir-card\" \n                     data-aos=\"fade-up\" \n                     data-aos-delay=\"500\"\n                     data-name=\"luces del valle\"\n                     data-role=\"El\u00e9ctrico\"\n                     data-search=\"luces del valle el\u00e9ctrico biling\u00fce, movilidad propia, factura a\">\n                    \n                    <div class=\"card-header\">\n                                                    <div class=\"verified-badge\" title=\"Verificado\"><i class=\"fas fa-check-circle\"><\/i><\/div>\n                                                \n                        <div class=\"profile-img user\">\n                                                            <img decoding=\"async\" src=\"https:\/\/ui-avatars.com\/api\/?name=Luces+del+Valle&#038;background=random\" alt=\"Luces del Valle\">\n                                                    <\/div>\n                    <\/div>\n                    \n                    <div class=\"card-body\">\n                        <span class=\"card-category\">El\u00e9ctrico<\/span>\n                        <h3 class=\"card-name\">Luces del Valle<\/h3>\n                        <p class=\"card-bio\">Profesional con amplia experiencia en la industria audiovisual de la regi\u00f3n. Disponible para proyectos.<\/p>\n                        \n                                                <div class=\"card-specs\">\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Biling\u00fce<\/span>\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Movilidad Propia<\/span>\n                                                    <\/div>\n                                            <\/div>\n                    \n                    <div class=\"card-footer\">\n                        <a href=\"#\" class=\"btn-contact outline\">\n                            Contactar\n                        <\/a>\n                    <\/div>\n                <\/div>\n                                <div class=\"dir-card\" \n                     data-aos=\"fade-up\" \n                     data-aos-delay=\"500\"\n                     data-name=\"arte &amp; set\"\n                     data-role=\"Director de Arte\"\n                     data-search=\"arte &amp; set director de arte biling\u00fce, movilidad propia, factura a\">\n                    \n                    <div class=\"card-header\">\n                                                \n                        <div class=\"profile-img user\">\n                                                            <img decoding=\"async\" src=\"https:\/\/ui-avatars.com\/api\/?name=Arte+%26+Set&#038;background=random\" alt=\"Arte &amp; Set\">\n                                                    <\/div>\n                    <\/div>\n                    \n                    <div class=\"card-body\">\n                        <span class=\"card-category\">Director de Arte<\/span>\n                        <h3 class=\"card-name\">Arte &amp; Set<\/h3>\n                        <p class=\"card-bio\">Profesional con amplia experiencia en la industria audiovisual de la regi\u00f3n. Disponible para proyectos.<\/p>\n                        \n                                                <div class=\"card-specs\">\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Biling\u00fce<\/span>\n                                                            <span><i class=\"fas fa-star\" style=\"font-size:0.7em;\"><\/i> Movilidad Propia<\/span>\n                                                    <\/div>\n                                            <\/div>\n                    \n                    <div class=\"card-footer\">\n                        <a href=\"#\" class=\"btn-contact outline\">\n                            Contactar\n                        <\/a>\n                    <\/div>\n                <\/div>\n                                \n                            <\/div>\n\n            <!-- Join Banner -->\n            <div class=\"join-banner\" data-aos=\"fade-up\" data-aos-offset=\"50\">\n                <div class=\"join-content\">\n                    <h3>\u00bfSos profesional o proveedor?<\/h3>\n                    <p>Sumate a la gu\u00eda oficial de La Mulita y trabaj\u00e1 en grandes producciones.<\/p>\n                <\/div>\n                <a href=\"#\" class=\"btn-join\">Registrarme <i class=\"fas fa-plus\"><\/i><\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <style>\n        @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Zona+Pro:wght@300;400;600;700;800&display=swap\");\n\n        :root {\n            --mulita-black: #050505;\n            --mulita-card: #141414;\n            --mulita-card-hover: #1e1e1e;\n            --mulita-orange: #EB5E28;\n            --mulita-orange-rgb: 235, 94, 40;\n            --mulita-white: #e0e0e0;\n            --font-dir: \"Zona Pro\", sans-serif;\n        }\n        \n        \/* Theme Switching Support *\/\n        body[data-theme=\"green\"] .mulita-directory {\n            --mulita-orange: #588157;\n            --mulita-orange-rgb: 88, 129, 87;\n        }\n        body[data-theme=\"green\"] .dir-select {\n               background-image: url(\"data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23588157%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E\");\n        }\n\n        .mulita-directory * { box-sizing: border-box; }\n        .mulita-directory {\n            background-color: var(--mulita-black);\n            padding: 100px 20px;\n            color: var(--mulita-white);\n            font-family: var(--font-dir);\n            position: relative;\n            overflow: hidden;\n        }\n\n        .directory-container {\n            max-width: 1200px;\n            margin: 0 auto;\n            width: 100%;\n        }\n\n        .directory-header {\n            text-align: center;\n            margin-bottom: 50px;\n        }\n\n        .dir-tag {\n            color: rgba(255, 255, 255, 0.5);\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            font-size: 0.8rem;\n            display: block;\n            margin-bottom: 10px;\n            font-weight: 700;\n        }\n        .dir-title {\n            font-size: clamp(2rem, 4vw, 3rem);\n            font-weight: 800;\n            margin-bottom: 20px;\n        }\n        .text-orange { color: var(--mulita-orange); }\n        .dir-subtitle {\n            max-width: 600px;\n            margin: 0 auto;\n            color: rgba(255, 255, 255, 0.7);\n            font-size: 1.1rem;\n            line-height: 1.5;\n        }\n\n        \/* Toolbar *\/\n        .directory-toolbar {\n            display: flex;\n            gap: 15px;\n            justify-content: center;\n            margin-bottom: 60px;\n            flex-wrap: wrap;\n        }\n        .search-box {\n            position: relative;\n            flex: 1;\n            max-width: 500px;\n            min-width: 280px;\n        }\n        .search-box i {\n            position: absolute;\n            left: 20px;\n            top: 50%;\n            transform: translateY(-50%);\n            color: rgba(255, 255, 255, 0.4);\n        }\n        .search-box input {\n            width: 100%;\n            background: #1a1a1a;\n            border: 1px solid #333;\n            border-radius: 50px;\n            padding: 15px 20px 15px 50px;\n            color: white;\n            font-family: var(--font-dir);\n            font-size: 1rem;\n            outline: none;\n            transition: all 0.3s;\n        }\n        .search-box input:focus {\n            border-color: var(--mulita-orange);\n            box-shadow: 0 0 15px rgba(var(--mulita-orange-rgb), 0.2);\n        }\n        .dir-select {\n            background: #1a1a1a;\n            border: 1px solid #333;\n            color: white;\n            padding: 15px 30px;\n            border-radius: 50px;\n            font-family: var(--font-dir);\n            cursor: pointer;\n            outline: none;\n            appearance: none;\n            background-image: url(\"data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23EB5E28%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E\");\n            background-repeat: no-repeat;\n            background-position: right 20px center;\n            background-size: 12px;\n            padding-right: 50px;\n            transition: border-color 0.3s;\n            max-width: 100%; \n        }\n        .dir-select:focus { border-color: var(--mulita-orange); }\n\n        \/* Grid *\/\n        .directory-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n            gap: 30px;\n            margin-bottom: 60px;\n        }\n        .dir-card {\n            background: var(--mulita-card);\n            border: 1px solid rgba(255, 255, 255, 0.05);\n            border-radius: 16px;\n            padding: 30px;\n            text-align: center;\n            transition: all 0.3s ease;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            position: relative;\n            overflow: hidden;\n        }\n        .dir-card.hidden { display: none; }\n        \n        .dir-card:hover {\n            transform: translateY(-7px);\n            background: var(--mulita-card-hover);\n            border-color: rgba(var(--mulita-orange-rgb), 0.4);\n            box-shadow: 0 15px 30px rgba(0,0,0,0.3);\n        }\n        .verified-badge {\n            position: absolute;\n            top: 0;\n            right: -5px;\n            color: var(--mulita-orange);\n            font-size: 1.2rem;\n            background: var(--mulita-card);\n            border-radius: 50%;\n            z-index: 2;\n        }\n        .card-header { position: relative; margin-bottom: 20px; }\n        .profile-img {\n            width: 80px; height: 80px;\n            border-radius: 50%;\n            display: flex; align-items: center; justify-content: center;\n            background: #252525;\n            font-size: 2rem;\n            color: rgba(255, 255, 255, 0.5);\n            border: 2px solid rgba(255, 255, 255, 0.1);\n            transition: all 0.3s;\n            overflow: hidden;\n        }\n        .profile-img img {\n            width: 100%; height: 100%;\n            border-radius: 50%;\n            object-fit: cover;\n        }\n        .dir-card:hover .profile-img { border-color: var(--mulita-orange); color: var(--mulita-orange); }\n        .card-category {\n            font-size: 0.75rem; text-transform: uppercase;\n            letter-spacing: 1px; color: var(--mulita-orange);\n            margin-bottom: 8px; display: block; font-weight: 700;\n        }\n        .card-name { font-size: 1.2rem; margin-bottom: 10px; color: white; }\n        .card-bio {\n            font-size: 0.9rem; color: #999;\n            line-height: 1.5; margin-bottom: 20px;\n            display: -webkit-box; -webkit-line-clamp: 3;\n            -webkit-box-orient: vertical; overflow: hidden;\n        }\n        .card-specs {\n            display: flex; gap: 10px;\n            justify-content: center; margin-bottom: 25px;\n            font-size: 0.8rem; color: #ccc;\n        }\n        .card-footer { margin-top: auto; width: 100%; }\n        .btn-contact {\n            display: block; width: 100%; padding: 12px 0;\n            background: var(--mulita-orange); color: white;\n            border-radius: 8px; text-decoration: none;\n            font-weight: 700; font-size: 0.9rem; transition: all 0.3s;\n        }\n        .btn-contact.outline {\n            background: transparent; border: 1px solid rgba(255, 255, 255, 0.2);\n        }\n        .btn-contact:hover { background: white; color: var(--mulita-orange); }\n\n        \/* Join Banner *\/\n        .join-banner {\n            background: linear-gradient(90deg, #1e1e1e 0%, #141414 100%);\n            border: 1px solid rgba(255, 255, 255, 0.1);\n            border-radius: 20px; padding: 40px;\n            display: flex; align-items: center; justify-content: space-between;\n            flex-wrap: wrap; gap: 20px;\n        }\n        .join-content h3 { font-size: 1.5rem; margin-bottom: 5px; }\n        .join-content p { color: #999; }\n        .btn-join {\n            padding: 15px 30px; background: transparent;\n            border: 1px solid var(--mulita-orange); color: var(--mulita-orange);\n            text-decoration: none; border-radius: 50px;\n            font-weight: 700; display: flex; align-items: center; gap: 10px;\n            transition: all 0.3s;\n        }\n        .btn-join:hover { background: var(--mulita-orange); color: white; }\n\n        @media (max-width: 768px) {\n            .search-box { min-width: 100%; }\n            .directory-grid { grid-template-columns: 1fr; }\n            .join-banner { flex-direction: column; text-align: center; padding: 30px 20px; }\n        }\n    <\/style>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        const searchInput = document.getElementById('dir-search');\n        const filterSelect = document.getElementById('dir-filter');\n        const cards = document.querySelectorAll('.dir-card');\n\n        function filterDirectory() {\n            const searchTerm = searchInput.value.toLowerCase();\n            const filterValue = filterSelect.value;\n            \n            cards.forEach(card => {\n                const searchData = card.getAttribute('data-search');\n                const cardRole = card.getAttribute('data-role');\n                \n                let matchesSearch = searchData.includes(searchTerm);\n                let matchesFilter = (filterValue === 'all') || (cardRole === filterValue);\n                \n                if (matchesSearch && matchesFilter) {\n                    card.classList.remove('hidden');\n                } else {\n                    card.classList.add('hidden');\n                }\n            });\n        }\n\n        if(searchInput) searchInput.addEventListener('input', filterDirectory);\n        if(filterSelect) filterSelect.addEventListener('change', filterDirectory);\n    });\n    <\/script>\n    \n\n\n        <section class=\"mulita-films\" id=\"filmografia\">\n            <div class=\"films-container\">\n                <!-- Header -->\n                <div class=\"films-header\" data-aos=\"fade-up\">\n                    <span class=\"films-tag\">Nuestra Experiencia<\/span>\n                    <h2 class=\"films-title\">Filmograf\u00eda <span class=\"text-stroke\">Selecta<\/span><\/h2>\n                    <p class=\"films-subtitle\">Producciones nacionales e internacionales que confiaron en nuestros servicios de producci\u00f3n y locaciones en Catamarca.<\/p>\n                <\/div>\n\n                <!-- Projects Grid -->\n                <div class=\"films-grid\">\n                                            <div class=\"film-item \" data-aos=\"fade-up\" data-aos-delay=\"100\">\n                            <div class=\"poster-wrap\">\n                                <img decoding=\"async\" src=\"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-content\/uploads\/2025\/12\/logo-empuje.png\" alt=\"Empuje\" class=\"poster-img\">\n                                <div class=\"film-overlay\">\n                                    <div class=\"film-details\">\n                                        <span class=\"film-role\">Evento<\/span>\n                                        <h3 class=\"film-name\">Empuje<\/h3>\n                                        <span class=\"film-year\">2025 \u2022 Otro<\/span>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n\n                <!-- Clients Logo Strip -->\n                <div class=\"clients-strip\" data-aos=\"fade-in\" data-aos-delay=\"600\">\n                    <p class=\"clients-label\">Clientes & Partners<\/p>\n                    <div class=\"logos-track\">\n                        <span>NETFLIX<\/span>\n                        <span>AMAZON STUDIOS<\/span>\n                        <span>K&S FILMS<\/span>\n                        <span>REBOLUCION<\/span>\n                        <span>LANDIA<\/span>\n                        <span>NAT GEO<\/span>\n                        <!-- Duplicate for infinite scroll illusion if implemented with JS\/CSS loop -->\n                        <span>NETFLIX<\/span> \n                        <span>AMAZON STUDIOS<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <style>\n            @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Zona+Pro:wght@300;400;600;700;800&display=swap\");\n\n            :root {\n                --mulita-bg-film: #0a0a0a;\n                \n                \/* Default Orange Theme *\/\n                --mulita-orange: #EB5E28;\n                --mulita-orange-rgb: 235, 94, 40;\n                \n                --mulita-white: #e0e0e0;\n                --font-film: \"Zona Pro\", sans-serif;\n            }\n\n            \/* Green Theme Override *\/\n            body[data-theme=\"green\"] .mulita-films {\n                --mulita-orange: #588157;\n                --mulita-orange-rgb: 88, 129, 87;\n            }\n\n            .mulita-films {\n                background-color: var(--mulita-bg-film);\n                padding: 120px 20px;\n                color: var(--mulita-white);\n                font-family: var(--font-film);\n                overflow: hidden;\n            }\n\n            .films-container {\n                max-width: 1400px;\n                margin: 0 auto;\n            }\n\n            \/* Header *\/\n            .films-header {\n                margin-bottom: 70px;\n                max-width: 800px;\n            }\n\n            .films-tag {\n                color: var(--mulita-orange);\n                font-weight: 700;\n                text-transform: uppercase;\n                letter-spacing: 2px;\n                font-size: 0.85rem;\n                display: block;\n                margin-bottom: 15px;\n            }\n\n            .films-title {\n                font-size: clamp(2.5rem, 5vw, 4rem);\n                font-weight: 800;\n                line-height: 1;\n                margin-bottom: 25px;\n            }\n\n            .text-stroke {\n                -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);\n                color: transparent;\n                position: relative;\n            }\n\n            .films-subtitle {\n                color: rgba(255, 255, 255, 0.6);\n                font-size: 1.1rem;\n                line-height: 1.6;\n                max-width: 600px;\n            }\n\n            \/* Mosaic Grid *\/\n            .films-grid {\n                display: grid;\n                grid-template-columns: repeat(4, 1fr);\n                gap: 20px;\n                grid-auto-rows: 400px;\n                margin-bottom: 100px;\n            }\n\n            .film-item {\n                position: relative;\n                grid-column: span 1;\n                border-radius: 4px;\n                overflow: hidden;\n                cursor: pointer;\n            }\n\n            .film-item.wide {\n                grid-column: span 2;\n            }\n\n            .poster-wrap {\n                width: 100%;\n                height: 100%;\n                position: relative;\n                overflow: hidden;\n            }\n\n            .poster-img {\n                width: 100%;\n                height: 100%;\n                object-fit: cover;\n                transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);\n                filter: grayscale(80%) contrast(1.1);\n            }\n\n            .film-item:hover .poster-img {\n                transform: scale(1.05);\n                filter: grayscale(0%) contrast(1.1);\n            }\n\n            .film-overlay {\n                position: absolute;\n                inset: 0;\n                background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(var(--mulita-orange-rgb), 0.1) 100%);\n                opacity: 0;\n                transition: opacity 0.4s ease;\n                display: flex;\n                align-items: flex-end;\n                padding: 30px;\n            }\n\n            .film-item:hover .film-overlay {\n                opacity: 1;\n            }\n\n            .film-details {\n                transform: translateY(20px);\n                transition: transform 0.4s ease;\n            }\n\n            .film-item:hover .film-details {\n                transform: translateY(0);\n            }\n\n            .film-role {\n                display: block;\n                color: var(--mulita-orange);\n                font-size: 0.8rem;\n                font-weight: 700;\n                text-transform: uppercase;\n                margin-bottom: 5px;\n            }\n\n            .film-name {\n                font-size: 1.8rem;\n                font-weight: 800;\n                line-height: 1.1;\n                margin-bottom: 8px;\n                color: white;\n            }\n\n            .film-year {\n                font-size: 0.9rem;\n                color: rgba(255, 255, 255, 0.7);\n            }\n\n            \/* Clients Strip *\/\n            .clients-strip {\n                border-top: 1px solid rgba(255, 255, 255, 0.1);\n                border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n                padding: 40px 0;\n                position: relative;\n                overflow: hidden;\n            }\n\n            .clients-label {\n                text-align: center;\n                text-transform: uppercase;\n                font-size: 0.75rem;\n                letter-spacing: 2px;\n                color: rgba(255, 255, 255, 0.4);\n                margin-bottom: 25px;\n            }\n\n            .logos-track {\n                display: flex;\n                justify-content: space-around;\n                align-items: center;\n                gap: 50px;\n                font-weight: 800;\n                font-size: 1.5rem;\n                color: rgba(255, 255, 255, 0.2);\n                white-space: nowrap;\n            }\n            \n            .logos-track span {\n                transition: color 0.3s ease;\n            }\n            \n            .logos-track span:hover {\n                color: var(--mulita-white);\n            }\n\n            \/* Responsive *\/\n            @media (max-width: 1024px) {\n                .films-grid {\n                    grid-template-columns: repeat(2, 1fr);\n                    grid-auto-rows: 350px;\n                }\n                \n                .film-item.wide {\n                    grid-column: span 2;\n                }\n            }\n\n            @media (max-width: 600px) {\n                .films-grid {\n                    grid-template-columns: 1fr;\n                    grid-auto-rows: 400px;\n                }\n                \n                .film-item.wide {\n                    grid-column: span 1;\n                }\n                \n                .logos-track {\n                    flex-wrap: wrap;\n                    gap: 20px;\n                    font-size: 1.2rem;\n                }\n            }\n        <\/style>\n        \n\n\n        <section class=\"mulita-benefits\" id=\"beneficios\">\n            <div class=\"benefits-container\">\n                <div class=\"benefits-row\">\n                    <!-- Text Content -->\n                    <div class=\"benefits-info\" data-aos=\"fade-right\">\n                        <span class=\"benefits-tag\">Apoyo a la Producci\u00f3n<\/span>\n                        <h2 class=\"benefits-title\">Incentivos que <br><span class=\"highlight\">Hacen la Diferencia<\/span><\/h2>\n                        <p class=\"benefits-lead\">Catamarca ofrece un esquema competitivo de fomento para maximizar el presupuesto de tu producci\u00f3n.<\/p>\n                        \n                        <ul class=\"benefits-list\">\n                            <li>\n                                <div class=\"benefit-icon\"><i class=\"fas fa-hand-holding-dollar\"><\/i><\/div>\n                                <div>\n                                    <h3>Cash Rebate<\/h3>\n                                    <p>Devoluci\u00f3n de hasta un % sobre gastos calificados realizados en la provincia.<\/p>\n                                <\/div>\n                            <\/li>\n                            <li>\n                                <div class=\"benefit-icon\"><i class=\"fas fa-hotel\"><\/i><\/div>\n                                <div>\n                                    <h3>Alojamiento & Log\u00edstica<\/h3>\n                                    <p>Tarifas preferenciales en hoteler\u00eda y transporte para equipos de rodaje.<\/p>\n                                <\/div>\n                            <\/li>\n                            <li>\n                                <div class=\"benefit-icon\"><i class=\"fas fa-file-signature\"><\/i><\/div>\n                                <div>\n                                    <h3>Permisos \u00c1giles<\/h3>\n                                    <p>Ventanilla \u00fanica para gestiones municipales y permisos de rodaje en \u00e1reas protegidas.<\/p>\n                                <\/div>\n                            <\/li>\n                        <\/ul>\n\n                        <a href=\"#contacto\" class=\"btn-guide\">\n                            Descargar Gu\u00eda de Incentivos <i class=\"fas fa-download\"><\/i>\n                        <\/a>\n                    <\/div>\n\n                    <!-- Visual Content -->\n                    <div class=\"benefits-visual\" data-aos=\"fade-left\">\n                        <div class=\"stat-box primary\">\n                            <span class=\"stat-value\">300+<\/span>\n                            <span class=\"stat-desc\">D\u00edas de Sol \/ A\u00f1o<\/span>\n                        <\/div>\n                        <div class=\"stat-box secondary\">\n                            <span class=\"stat-value\">-20%<\/span>\n                            <span class=\"stat-desc\">Costos vs. CABA<\/span>\n                        <\/div>\n                        <div class=\"image-stack\">\n                            <!-- Image representing production value\/budget -->\n                            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1604871000636-074fa5117945?q=80&w=800&auto=format&fit=crop\" alt=\"Equipo de Producci\u00f3n en Rodaje\" class=\"img-main\">\n                            <!-- Decorative elements -->\n                            <div class=\"deco-circle\"><\/div>\n                            <div class=\"deco-dots\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <style>\n            @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Zona+Pro:wght@300;400;600;700;800&display=swap\");\n\n            :root {\n                --mulita-dark-bg: #111111;\n                \n                \/* Default Orange Theme *\/\n                --mulita-orange: #EB5E28;\n                --mulita-orange-rgb: 235, 94, 40;\n                \n                --mulita-white: #e0e0e0;\n                --font-ben: \"Zona Pro\", sans-serif;\n            }\n\n            \/* Green Theme Override *\/\n            body[data-theme=\"green\"] .mulita-benefits {\n                --mulita-orange: #588157;\n                --mulita-orange-rgb: 88, 129, 87;\n            }\n\n            .mulita-benefits {\n                background-color: var(--mulita-dark-bg);\n                padding: 120px 20px;\n                color: var(--mulita-white);\n                font-family: var(--font-ben);\n                overflow: hidden;\n            }\n\n            .benefits-container {\n                max-width: 1200px;\n                margin: 0 auto;\n            }\n\n            .benefits-row {\n                display: flex;\n                align-items: center;\n                gap: 80px;\n                flex-wrap: wrap;\n            }\n\n            \/* Info Column *\/\n            .benefits-info {\n                flex: 1;\n                min-width: 320px;\n            }\n\n            .benefits-tag {\n                color: var(--mulita-orange);\n                font-weight: 700;\n                text-transform: uppercase;\n                letter-spacing: 2px;\n                font-size: 0.85rem;\n                display: block;\n                margin-bottom: 15px;\n            }\n\n            .benefits-title {\n                font-size: clamp(2.5rem, 4vw, 3.5rem);\n                line-height: 1.1;\n                font-weight: 800;\n                margin-bottom: 25px;\n            }\n\n            .highlight {\n                color: var(--mulita-orange);\n            }\n\n            .benefits-lead {\n                font-size: 1.15rem;\n                color: rgba(255, 255, 255, 0.8);\n                margin-bottom: 40px;\n                line-height: 1.6;\n            }\n\n            .benefits-list {\n                list-style: none;\n                padding: 0;\n                margin: 0 0 40px 0;\n            }\n\n            .benefits-list li {\n                display: flex;\n                gap: 20px;\n                margin-bottom: 30px;\n            }\n\n            .benefit-icon {\n                width: 50px;\n                height: 50px;\n                background: rgba(var(--mulita-orange-rgb), 0.15);\n                border-radius: 12px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                color: var(--mulita-orange);\n                font-size: 1.25rem;\n                flex-shrink: 0;\n            }\n\n            .benefits-list h3 {\n                font-size: 1.2rem;\n                margin-bottom: 5px;\n                font-weight: 700;\n            }\n\n            .benefits-list p {\n                color: #999;\n                font-size: 0.95rem;\n                line-height: 1.5;\n            }\n\n            .btn-guide {\n                display: inline-flex;\n                align-items: center;\n                gap: 10px;\n                background: white;\n                color: var(--mulita-dark-bg);\n                padding: 15px 35px;\n                border-radius: 50px;\n                text-decoration: none;\n                font-weight: 700;\n                text-transform: uppercase;\n                letter-spacing: 0.5px;\n                transition: all 0.3s;\n                border: 2px solid white;\n            }\n\n            .btn-guide:hover {\n                background: transparent;\n                color: white;\n            }\n\n            \/* Visual Column *\/\n            .benefits-visual {\n                flex: 1;\n                min-width: 320px;\n                position: relative;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n            }\n\n            .image-stack {\n                position: relative;\n                width: 100%;\n                max-width: 500px;\n                aspect-ratio: 4\/5;\n            }\n\n            .img-main {\n                width: 100%;\n                height: 100%;\n                object-fit: cover;\n                border-radius: 30px;\n                filter: grayscale(20%);\n                position: relative;\n                z-index: 2;\n                box-shadow: 0 20px 50px rgba(0,0,0,0.5);\n            }\n\n            .stat-box {\n                position: absolute;\n                background: rgba(20, 20, 20, 0.9);\n                backdrop-filter: blur(10px);\n                padding: 20px;\n                border: 1px solid rgba(255, 255, 255, 0.1);\n                border-radius: 20px;\n                z-index: 5;\n                box-shadow: 0 10px 30px rgba(0,0,0,0.3);\n                text-align: center;\n            }\n\n            .stat-value {\n                display: block;\n                font-size: 2rem;\n                font-weight: 800;\n                color: white;\n                line-height: 1;\n                margin-bottom: 5px;\n            }\n\n            .stat-desc {\n                font-size: 0.75rem;\n                text-transform: uppercase;\n                letter-spacing: 1px;\n                color: #999;\n            }\n\n            .stat-box.primary {\n                top: 40px;\n                right: -20px;\n                border-bottom: 3px solid var(--mulita-orange);\n            }\n\n            .stat-box.secondary {\n                bottom: 40px;\n                left: -20px;\n                border-bottom: 3px solid var(--mulita-orange);\n            }\n\n            .deco-circle {\n                position: absolute;\n                top: -30px;\n                left: -30px;\n                width: 150px;\n                height: 150px;\n                border: 2px solid var(--mulita-orange);\n                border-radius: 50%;\n                opacity: 0.3;\n                z-index: 1;\n            }\n\n            .deco-dots {\n                position: absolute;\n                bottom: -30px;\n                right: -30px;\n                width: 100px;\n                height: 100px;\n                background-image: radial-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px);\n                background-size: 10px 10px;\n                z-index: 1;\n            }\n\n            \/* Responsive *\/\n            @media (max-width: 900px) {\n                .benefits-row {\n                    flex-direction: column;\n                    gap: 60px;\n                }\n                \n                .benefits-info, .benefits-visual {\n                    width: 100%;\n                }\n                \n                .image-stack {\n                    max-width: 400px;\n                }\n                \n                .stat-box.primary { right: 0; }\n                .stat-box.secondary { left: 0; }\n            }\n        <\/style>\n\n\n        <section class=\"mulita-news\" id=\"novedades\">\n            <div class=\"news-container\">\n                <!-- Header -->\n                <div class=\"news-header\">\n                    <div class=\"header-content\" data-aos=\"fade-right\">\n                        <span class=\"news-tag\">Actualidad<\/span>\n                        <h2 class=\"news-title\">Novedades <br><span class=\"text-orange\">del Sector<\/span><\/h2>\n                    <\/div>\n                    <div class=\"header-action\" data-aos=\"fade-left\">\n                        <a href=\"#\" class=\"btn-all-news\">Ver todas las noticias <i class=\"fas fa-arrow-right\"><\/i><\/a>\n                    <\/div>\n                <\/div>\n\n                <!-- News Grid -->\n                <div class=\"news-grid\">\n                                        <article class=\"news-card \" \n                             data-aos=\"fade-up\" \n                             data-aos-delay=\"100\"\n                             data-title=\"NOticia ejemplo 1\"\n                             data-image=\"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-content\/uploads\/2025\/12\/logo-mulita.png\"\n                             data-date=\"11 Dic 2025\"\n                             data-category=\"Institucional\">\n                        \n                        <div class=\"card-thumb\">\n                            <img decoding=\"async\" src=\"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-content\/uploads\/2025\/12\/logo-mulita.png\" alt=\"NOticia ejemplo 1\" class=\"news-img\">\n                            <span class=\"card-date\">11 Dic 2025<\/span>\n                        <\/div>\n                        <div class=\"card-body\">\n                            <div class=\"cat-pill\">Institucional<\/div>\n                            <h3 class=\"card-title\">\n                                <a href=\"#\" class=\"js-open-news-modal\">NOticia ejemplo 1<\/a>\n                            <\/h3>\n                            \n                                                        \n                            <!-- Hidden Content for Modal -->\n                            <div class=\"news-full-body\" style=\"display:none;\">\n                                esta es una noticio de ejemplo                            <\/div>\n\n                            <a href=\"#\" class=\"read-more js-open-news-modal\">Leer nota completa<\/a>\n                        <\/div>\n                    <\/article>\n                                    <\/div>\n            <\/div>\n\n            <!-- MODAL STRUCTURE -->\n            <div id=\"mulita-news-modal\" class=\"mulita-modal\">\n                <div class=\"mulita-modal-overlay\"><\/div>\n                <div class=\"mulita-modal-content\">\n                    <button class=\"mulita-modal-close\">&times;<\/button>\n                    <div class=\"mulita-modal-header\">\n                        <span class=\"modal-date\" id=\"modal-date\"><\/span>\n                        <span class=\"modal-cat\" id=\"modal-cat\"><\/span>\n                    <\/div>\n                    <h2 id=\"modal-title\"><\/h2>\n                    <div class=\"modal-img-container\">\n                        <img decoding=\"async\" id=\"modal-image\" src=\"\" alt=\"\">\n                    <\/div>\n                    <div class=\"modal-body-text\" id=\"modal-body\"><\/div>\n                <\/div>\n            <\/div>\n\n        <\/section>\n\n        <style>\n            @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Zona+Pro:wght@300;400;600;700;800&display=swap\");\n\n            :root {\n                --mulita-news-bg: #050505;\n                --mulita-card-dark: #111111;\n                \n                \/* Default Orange Theme *\/\n                --mulita-orange: #EB5E28;\n                --mulita-orange-rgb: 235, 94, 40;\n                \n                --mulita-white: #e0e0e0;\n                --font-news: \"Zona Pro\", sans-serif;\n            }\n\n            \/* Green Theme Override *\/\n            body[data-theme=\"green\"] .mulita-news {\n                --mulita-orange: #588157;\n                --mulita-orange-rgb: 88, 129, 87;\n            }\n\n            .mulita-news {\n                background-color: var(--mulita-news-bg);\n                padding: 120px 20px;\n                color: var(--mulita-white);\n                font-family: var(--font-news);\n            }\n\n            .news-container {\n                max-width: 1200px;\n                margin: 0 auto;\n            }\n\n            \/* Header *\/\n            .news-header {\n                display: flex;\n                justify-content: space-between;\n                align-items: flex-end;\n                margin-bottom: 60px;\n                flex-wrap: wrap;\n                gap: 30px;\n            }\n\n            .news-tag {\n                color: var(--mulita-orange);\n                font-weight: 700;\n                text-transform: uppercase;\n                letter-spacing: 2px;\n                font-size: 0.85rem;\n                display: block;\n                margin-bottom: 10px;\n            }\n\n            .news-title {\n                font-size: clamp(2.5rem, 4vw, 3.5rem);\n                font-weight: 800;\n                line-height: 1;\n            }\n\n            .text-orange { color: var(--mulita-orange); }\n\n            .btn-all-news {\n                color: white;\n                text-decoration: none;\n                border: 1px solid rgba(255, 255, 255, 0.3);\n                padding: 12px 25px;\n                border-radius: 50px;\n                transition: all 0.3s;\n                display: inline-flex;\n                align-items: center;\n                gap: 10px;\n                font-size: 0.9rem;\n            }\n\n            .btn-all-news:hover {\n                border-color: var(--mulita-orange);\n                background: var(--mulita-orange);\n            }\n\n            \/* Grid *\/\n            .news-grid {\n                display: grid;\n                grid-template-columns: repeat(3, 1fr);\n                gap: 30px;\n            }\n\n            \/* Featured Article (Span 2 cols on desktop) *\/\n            .news-card.featured {\n                grid-column: span 2;\n                display: flex;\n                background: var(--mulita-card-dark);\n                border-radius: 20px;\n                overflow: hidden;\n            }\n            \n            .news-card.featured .card-thumb {\n                width: 50%;\n                height: 100%;\n            }\n            \n            .news-card.featured .card-body {\n                width: 50%;\n                padding: 40px;\n                display: flex;\n                flex-direction: column;\n                justify-content: center;\n            }\n            \n            .news-card.featured .card-title {\n                font-size: 1.8rem;\n                margin-bottom: 15px;\n            }\n\n            \/* Standard Article *\/\n            .news-card {\n                background: transparent;\n                display: flex;\n                flex-direction: column;\n            }\n\n            .news-card:not(.featured) {\n                background: var(--mulita-card-dark);\n                border-radius: 20px;\n                overflow: hidden;\n                border: 1px solid rgba(255, 255, 255, 0.05);\n                transition: transform 0.3s ease;\n            }\n\n            .news-card:not(.featured):hover {\n                transform: translateY(-10px);\n                border-color: rgba(var(--mulita-orange-rgb), 0.3);\n            }\n\n            .card-thumb {\n                position: relative;\n                height: 220px;\n                overflow: hidden;\n            }\n            \n            .news-card.featured .card-thumb {\n                height: auto;\n                min-height: 300px;\n            }\n\n            .news-img {\n                width: 100%;\n                height: 100%;\n                object-fit: cover;\n                transition: transform 0.5s ease;\n            }\n\n            .news-card:hover .news-img {\n                transform: scale(1.1);\n            }\n\n            .card-date {\n                position: absolute;\n                top: 20px;\n                left: 20px;\n                background: rgba(0, 0, 0, 0.7);\n                backdrop-filter: blur(5px);\n                padding: 5px 12px;\n                border-radius: 8px;\n                font-size: 0.75rem;\n                font-weight: 600;\n                color: white;\n            }\n\n            .card-body {\n                padding: 25px;\n            }\n\n            .cat-pill {\n                display: inline-block;\n                font-size: 0.7rem;\n                text-transform: uppercase;\n                letter-spacing: 1px;\n                color: var(--mulita-orange);\n                font-weight: 700;\n                margin-bottom: 10px;\n            }\n\n            .card-title {\n                font-size: 1.2rem;\n                font-weight: 700;\n                line-height: 1.3;\n                margin-bottom: 15px;\n            }\n\n            .card-title a {\n                color: white;\n                text-decoration: none;\n                transition: color 0.3s;\n            }\n\n            .card-title a:hover {\n                color: var(--mulita-orange);\n            }\n\n            .card-excerpt {\n                color: #999;\n                font-size: 0.95rem;\n                line-height: 1.6;\n                margin-bottom: 20px;\n                display: -webkit-box;\n                -webkit-line-clamp: 3;\n                -webkit-box-orient: vertical;\n                overflow: hidden;\n            }\n\n            .read-more {\n                color: var(--mulita-white);\n                text-decoration: none;\n                font-size: 0.85rem;\n                font-weight: 600;\n                text-transform: uppercase;\n                margin-top: auto;\n                display: inline-block;\n                position: relative;\n                cursor: pointer;\n            }\n\n            .read-more::after {\n                content: '';\n                display: block;\n                width: 0;\n                height: 1px;\n                background: var(--mulita-orange);\n                transition: width 0.3s;\n                margin-top: 2px;\n            }\n\n            .news-card:hover .read-more::after {\n                width: 100%;\n            }\n\n            \/* --- MODAL STYLES --- *\/\n            .mulita-modal {\n                 position: fixed;\n                 top: 0;\n                 left: 0;\n                 width: 100%;\n                 height: 100%;\n                 z-index: 99999;\n                 display: none;\n                 opacity: 0;\n                 transition: opacity 0.3s ease;\n                 justify-content: center;\n                 align-items: center;\n                 pointer-events: none;\n            }\n            .mulita-modal.active {\n                 opacity: 1;\n                 pointer-events: auto;\n            }\n            .mulita-modal-overlay {\n                 position: absolute;\n                 top: 0; \n                 left: 0;\n                 width: 100%;\n                 height: 100%;\n                 background: rgba(0,0,0,0.85);\n                 backdrop-filter: blur(8px);\n            }\n            .mulita-modal-content {\n                 position: relative;\n                 background: #111;\n                 width: 90%;\n                 max-width: 800px;\n                 max-height: 90vh;\n                 overflow-y: auto;\n                 border-radius: 20px;\n                 padding: 40px;\n                 border: 1px solid rgba(255,255,255,0.1);\n                 box-shadow: 0 20px 50px rgba(0,0,0,0.7);\n                 transform: translateY(30px);\n                 transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n            }\n            .mulita-modal.active .mulita-modal-content {\n                 transform: translateY(0);\n            }\n            .mulita-modal-close {\n                 position: absolute;\n                 top: 15px;\n                 right: 20px;\n                 background: transparent;\n                 border: none;\n                 color: rgba(255,255,255,0.6);\n                 font-size: 2.5rem;\n                 cursor: pointer;\n                 line-height: 1;\n                 z-index: 10;\n                 transition: color 0.3s;\n            }\n            .mulita-modal-close:hover { color: var(--mulita-orange); }\n             \n            .mulita-modal-header {\n                 display: flex;\n                 gap: 15px;\n                 margin-bottom: 20px;\n                 font-size: 0.9rem;\n                 color: #888;\n                 text-transform: uppercase;\n                 letter-spacing: 1px;\n            }\n            .modal-cat { color: var(--mulita-orange); font-weight: 700; }\n            #modal-title {\n                 font-size: clamp(2rem, 3vw, 2.5rem);\n                 margin-bottom: 25px;\n                 line-height: 1.1;\n                 color: white;\n                 font-weight: 700;\n            }\n            .modal-img-container {\n                 width: 100%;\n                 height: auto;\n                 max-height: 400px;\n                 margin-bottom: 30px;\n                 border-radius: 12px;\n                 overflow: hidden;\n            }\n            #modal-image {\n                 width: 100%;\n                 height: 100%;\n                 object-fit: cover;\n            }\n            .modal-body-text {\n                 color: #ccc;\n                 line-height: 1.8;\n                 font-size: 1.05rem;\n                 font-family: sans-serif; \/* Fallback for readability *\/\n            }\n            .modal-body-text p { margin-bottom: 1.5em; }\n            \n            \/* Responsive *\/\n            @media (max-width: 1024px) {\n                .news-grid {\n                    grid-template-columns: repeat(2, 1fr);\n                }\n                \n                .news-card.featured {\n                    grid-column: span 2;\n                }\n            }\n\n            @media (max-width: 768px) {\n                .news-grid {\n                    grid-template-columns: 1fr;\n                }\n                \n                .news-card.featured {\n                    grid-column: span 1;\n                    flex-direction: column;\n                }\n                \n                .news-card.featured .card-thumb,\n                .news-card.featured .card-body {\n                    width: 100%;\n                }\n                \n                .news-card.featured .card-thumb {\n                    height: 250px;\n                }\n                \n                .news-header {\n                    flex-direction: column;\n                    align-items: flex-start;\n                    gap: 20px;\n                }\n\n                .mulita-modal-content { padding: 25px; }\n                #modal-title { font-size: 1.5rem; }\n            }\n        <\/style>\n\n        <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            const modal = document.getElementById('mulita-news-modal');\n            const overlay = modal ? modal.querySelector('.mulita-modal-overlay') : null;\n            const closeBtn = modal ? modal.querySelector('.mulita-modal-close') : null;\n            \n            \/\/ Note: Event delegation is better if items are dynamic, but straightforward binding works for shortcode output.\n            \/\/ We use delegation on the container just in case.\n            const container = document.querySelector('.news-grid');\n\n            \/\/ Elements to populate\n            const mTitle = document.getElementById('modal-title');\n            const mImage = document.getElementById('modal-image');\n            const mDate = document.getElementById('modal-date');\n            const mCat = document.getElementById('modal-cat');\n            const mBody = document.getElementById('modal-body');\n\n            if (!modal) return;\n\n            function openModal(e) {\n                \/\/ Check if clicked element is a trigger\n                if (!e.target.closest('.js-open-news-modal')) return;\n                \n                e.preventDefault();\n                const btn = e.target.closest('.js-open-news-modal');\n                const article = btn.closest('article');\n                \n                if (!article) return;\n\n                const fullContent = article.querySelector('.news-full-body').innerHTML;\n                \n                \/\/ Populate\n                mTitle.textContent = article.dataset.title;\n                mImage.src = article.dataset.image;\n                mDate.textContent = article.dataset.date;\n                mCat.textContent = article.dataset.category;\n                mBody.innerHTML = fullContent;\n                \n                \/\/ Show\n                modal.style.display = 'flex';\n                \/\/ Trigger reflow\n                void modal.offsetWidth;\n                modal.classList.add('active');\n                document.body.style.overflow = 'hidden'; \/\/ Lock scroll\n            }\n\n            function closeModal() {\n                modal.classList.remove('active');\n                setTimeout(() => {\n                    modal.style.display = 'none';\n                    if(mImage) mImage.src = ''; \n                    document.body.style.overflow = ''; \/\/ Unlock scroll\n                }, 400); \/\/ match css transition\n            }\n\n            if (container) {\n                container.addEventListener('click', openModal);\n            }\n            \n            if (closeBtn) closeBtn.addEventListener('click', closeModal);\n            if (overlay) overlay.addEventListener('click', closeModal);\n            \n            \/\/ Close on Escape\n            document.addEventListener('keydown', function(e) {\n                if (e.key === 'Escape' && modal.classList.contains('active')) {\n                    closeModal();\n                }\n            });\n        });\n        <\/script>\n        \n\n\n        <section class=\"mulita-contact\" id=\"contacto\">\n            <div class=\"contact-container\">\n                <div class=\"contact-grid\">\n                    <!-- Left: Contact Info & Visual -->\n                    <div class=\"contact-info\" data-aos=\"fade-right\">\n                        <span class=\"section-tag\">Hablemos<\/span>\n                        <h2 class=\"contact-title\">Tu pr\u00f3xima historia <br>comienza <span class=\"text-orange\">aqu\u00ed<\/span>.<\/h2>\n                        <p class=\"contact-desc\">Estamos listos para asesorarte sobre locaciones, permisos y log\u00edstica en Catamarca. Escribinos y recib\u00ed una respuesta en menos de 24hs.<\/p>\n                        \n                        <div class=\"info-items\">\n                            <div class=\"info-item\">\n                                <div class=\"icon-box\"><i class=\"fas fa-envelope\"><\/i><\/div>\n                                <div>\n                                    <span class=\"label\">Email<\/span>\n                                    <a href=\"mailto:hola@lamulita.com.ar\" class=\"value\">hola@lamulita.com.ar<\/a>\n                                <\/div>\n                            <\/div>\n                            <div class=\"info-item\">\n                                <div class=\"icon-box\"><i class=\"fas fa-phone\"><\/i><\/div>\n                                <div>\n                                    <span class=\"label\">Tel\u00e9fono \/ WhatsApp<\/span>\n                                    <a href=\"tel:+5493834123456\" class=\"value\">+54 9 3834 12-3456<\/a>\n                                <\/div>\n                            <\/div>\n                            <div class=\"info-item\">\n                                <div class=\"icon-box\"><i class=\"fas fa-map-marker-alt\"><\/i><\/div>\n                                <div>\n                                    <span class=\"label\">Oficina<\/span>\n                                    <span class=\"value\">San Fernando del Valle de Catamarca,<br>Catamarca, Argentina.<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Social Links -->\n                        <div class=\"contact-social\">\n                            <a href=\"#\" class=\"social-btn\"><i class=\"fab fa-instagram\"><\/i><\/a>\n                            <a href=\"#\" class=\"social-btn\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\n                            <a href=\"#\" class=\"social-btn\"><i class=\"fab fa-vimeo-v\"><\/i><\/a>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Right: Form -->\n                    <div class=\"contact-form-wrapper\" data-aos=\"fade-left\">\n                        <form class=\"mulita-form\" id=\"mulita-contact-form\" method=\"POST\">\n                            <input type=\"hidden\" id=\"mulita_contact_nonce\" name=\"mulita_contact_nonce\" value=\"e3dde34854\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/cataset\/wp-json\/wp\/v2\/pages\/28\" \/>                            <div id=\"contact-form-message\" style=\"display:none; padding:15px; margin-bottom:20px; border-radius:8px;\"><\/div>\n                            \n                            <div class=\"form-row\">\n                                <div class=\"form-group\">\n                                    <label for=\"name\">Nombre Completo<\/label>\n                                    <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"Tu nombre\" required>\n                                <\/div>\n                                <div class=\"form-group\">\n                                    <label for=\"email\">Email Profesional<\/label>\n                                    <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"nombre@empresa.com\" required>\n                                <\/div>\n                            <\/div>\n                            \n                            <div class=\"form-group\">\n                                <label for=\"interest\">Motivo de contacto<\/label>\n                                <select id=\"interest\" name=\"interest\" required>\n                                    <option value=\"\" disabled selected>Selecciona una opci\u00f3n<\/option>\n                                    <option value=\"scouting\">Consulta de Locaciones<\/option>\n                                    <option value=\"production\">Servicios de Producci\u00f3n<\/option>\n                                    <option value=\"incentives\">Incentivos Fiscales<\/option>\n                                    <option value=\"press\">Prensa \/ Institucional<\/option>\n                                    <option value=\"other\">Otro<\/option>\n                                <\/select>\n                            <\/div>\n\n                            <div class=\"form-group\">\n                                <label for=\"message\">Mensaje<\/label>\n                                <textarea id=\"message\" name=\"message\" rows=\"4\" placeholder=\"Contanos brevemente sobre tu proyecto...\" required><\/textarea>\n                            <\/div>\n\n                            <button type=\"submit\" class=\"btn-submit\" id=\"contact-submit-btn\">\n                                <span>Enviar Mensaje<\/span>\n                                <i class=\"fas fa-paper-plane\"><\/i>\n                            <\/button>\n                        <\/form>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Footer Bottom -->\n            <div class=\"footer-bottom\">\n                <div class=\"container-bottom\">\n                    <div class=\"copyright\">\n                        &copy; 2025 La Mulita Audiovisual. \n                        <span>Hecho con <i class=\"fas fa-heart text-orange\" style=\"font-size: 0.8em;\"><\/i> en Catamarca.<\/span>\n                    <\/div>\n                    <div class=\"legal-links\">\n                        <a href=\"#\">Pol\u00edtica de Privacidad<\/a>\n                        <a href=\"#\">T\u00e9rminos y Condiciones<\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- Bg Gradient -->\n            <div class=\"contact-glow\"><\/div>\n        <\/section>\n\n        <style>\n            @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Zona+Pro:wght@300;400;600;700;800&display=swap\");\n\n            :root {\n                --mulita-bg-dark: #050505;\n                --mulita-card: #141414;\n                \n                \/* Default Orange Theme *\/\n                --mulita-orange: #EB5E28;\n                --mulita-orange-rgb: 235, 94, 40;\n                \n                --mulita-white: #e0e0e0;\n                --font-contact: \"Zona Pro\", sans-serif;\n            }\n\n            \/* Green Theme Override *\/\n            body[data-theme=\"green\"] .mulita-contact {\n                --mulita-orange: #588157;\n                --mulita-orange-rgb: 88, 129, 87;\n            }\n\n            .mulita-contact {\n                background-color: var(--mulita-bg-dark);\n                padding-top: 100px;\n                color: var(--mulita-white);\n                font-family: var(--font-contact);\n                position: relative;\n                overflow: hidden;\n            }\n\n            .contact-container {\n                max-width: 1200px;\n                margin: 0 auto;\n                padding: 0 20px 100px 20px;\n                position: relative;\n                z-index: 2;\n            }\n\n            .contact-grid {\n                display: grid;\n                grid-template-columns: 1fr 1.2fr;\n                gap: 80px;\n                align-items: flex-start;\n            }\n\n            \/* Left Info *\/\n            .contact-info {\n                padding-top: 20px;\n            }\n\n            .section-tag {\n                color: var(--mulita-orange);\n                font-size: 0.85rem;\n                font-weight: 700;\n                text-transform: uppercase;\n                letter-spacing: 2px;\n                display: block;\n                margin-bottom: 20px;\n            }\n\n            .contact-title {\n                font-size: clamp(2.5rem, 4vw, 3.5rem);\n                font-weight: 800;\n                line-height: 1.1;\n                margin-bottom: 25px;\n            }\n\n            .text-orange { color: var(--mulita-orange); }\n\n            .contact-desc {\n                color: rgba(255, 255, 255, 0.7);\n                font-size: 1.1rem;\n                line-height: 1.6;\n                margin-bottom: 40px;\n            }\n\n            .info-items {\n                margin-bottom: 50px;\n            }\n\n            .info-item {\n                display: flex;\n                gap: 20px;\n                margin-bottom: 30px;\n            }\n\n            .icon-box {\n                width: 50px;\n                height: 50px;\n                background: rgba(255, 255, 255, 0.05);\n                border: 1px solid rgba(255, 255, 255, 0.1);\n                border-radius: 12px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                color: var(--mulita-orange);\n                font-size: 1.2rem;\n                flex-shrink: 0;\n            }\n\n            .label {\n                display: block;\n                font-size: 0.75rem;\n                text-transform: uppercase;\n                color: rgba(255, 255, 255, 0.4);\n                margin-bottom: 5px;\n                letter-spacing: 1px;\n            }\n\n            .value {\n                font-size: 1.1rem;\n                color: white;\n                text-decoration: none;\n                font-weight: 600;\n                line-height: 1.4;\n            }\n\n            .value:hover {\n                color: var(--mulita-orange);\n            }\n\n            .contact-social {\n                display: flex;\n                gap: 15px;\n            }\n\n            .social-btn {\n                width: 45px;\n                height: 45px;\n                border-radius: 50%;\n                background: rgba(255, 255, 255, 0.05);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                color: white;\n                text-decoration: none;\n                transition: all 0.3s;\n                border: 1px solid rgba(255, 255, 255, 0.1);\n            }\n\n            .social-btn:hover {\n                background: var(--mulita-orange);\n                border-color: var(--mulita-orange);\n                transform: translateY(-3px);\n            }\n\n            \/* Right Form *\/\n            .contact-form-wrapper {\n                background: var(--mulita-card);\n                border: 1px solid rgba(255, 255, 255, 0.05);\n                padding: 40px;\n                border-radius: 20px;\n                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\n            }\n\n            .mulita-form .form-row {\n                display: grid;\n                grid-template-columns: 1fr 1fr;\n                gap: 20px;\n            }\n\n            .form-group {\n                margin-bottom: 25px;\n            }\n\n            .form-group label {\n                display: block;\n                font-size: 0.85rem;\n                margin-bottom: 10px;\n                color: rgba(255, 255, 255, 0.8);\n                font-weight: 600;\n            }\n\n            .form-group input,\n            .form-group select,\n            .form-group textarea {\n                width: 100%;\n                background: rgba(0, 0, 0, 0.3);\n                border: 1px solid rgba(255, 255, 255, 0.1);\n                border-radius: 10px;\n                padding: 15px;\n                color: white;\n                font-family: var(--font-contact);\n                font-size: 1rem;\n                outline: none;\n                transition: all 0.3s;\n            }\n\n            .form-group input:focus,\n            .form-group select:focus,\n            .form-group textarea:focus {\n                border-color: var(--mulita-orange);\n                background: rgba(0, 0, 0, 0.5);\n                box-shadow: 0 0 0 2px rgba(var(--mulita-orange-rgb), 0.2);\n            }\n            \n            \/* Custom Select Arrow Styling override if needed, but standard selects are more accessible *\/\n\n            .btn-submit {\n                width: 100%;\n                background: var(--mulita-orange);\n                border: none;\n                padding: 18px;\n                border-radius: 50px;\n                color: white;\n                font-family: var(--font-contact);\n                font-size: 1rem;\n                font-weight: 700;\n                text-transform: uppercase;\n                letter-spacing: 1px;\n                cursor: pointer;\n                transition: all 0.3s;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                gap: 10px;\n            }\n\n            .btn-submit:hover {\n                background: white;\n                color: var(--mulita-orange);\n                transform: translateY(-2px);\n                box-shadow: 0 10px 25px rgba(var(--mulita-orange-rgb), 0.3);\n            }\n\n            \/* Footer Bottom *\/\n            .footer-bottom {\n                border-top: 1px solid rgba(255, 255, 255, 0.1);\n                background: #000;\n                padding: 30px 0;\n            }\n\n            .container-bottom {\n                max-width: 1200px;\n                margin: 0 auto;\n                padding: 0 20px;\n                display: flex;\n                justify-content: space-between;\n                align-items: center;\n                flex-wrap: wrap;\n                gap: 20px;\n            }\n\n            .copyright {\n                color: #666;\n                font-size: 0.9rem;\n            }\n\n            .legal-links {\n                display: flex;\n                gap: 25px;\n            }\n\n            .legal-links a {\n                color: #666;\n                text-decoration: none;\n                font-size: 0.9rem;\n                transition: color 0.3s;\n            }\n\n            .legal-links a:hover {\n                color: var(--mulita-orange);\n            }\n            \n            .contact-glow {\n                position: absolute;\n                top: 50%;\n                left: 0;\n                width: 500px;\n                height: 500px;\n                background: radial-gradient(circle, rgba(var(--mulita-orange-rgb), 0.08) 0%, transparent 70%);\n                transform: translate(-50%, -50%);\n                pointer-events: none;\n                z-index: 1;\n            }\n\n            \/* Responsive *\/\n            @media (max-width: 900px) {\n                .contact-grid {\n                    grid-template-columns: 1fr;\n                    gap: 50px;\n                }\n                \n                .mulita-form .form-row {\n                    grid-template-columns: 1fr;\n                }\n                \n                .container-bottom {\n                    flex-direction: column;\n                    text-align: center;\n                }\n                \n                .legal-links {\n                    justify-content: center;\n                }\n            }\n        <\/style>\n        \n        <script>\n        jQuery(document).ready(function($) {\n            $('#mulita-contact-form').on('submit', function(e) {\n                e.preventDefault();\n                \n                var $form = $(this);\n                var $btn = $('#contact-submit-btn');\n                var $message = $('#contact-form-message');\n                var originalText = $btn.html();\n                \n                \/\/ Disable button and show loading\n                $btn.prop('disabled', true).html('<span>Enviando...<\/span>');\n                $message.hide().removeClass('success error');\n                \n                \/\/ Submit via AJAX\n                $.ajax({\n                    url: 'https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-admin\/admin-ajax.php',\n                    type: 'POST',\n                    data: {\n                        action: 'mulita_contact_submit',\n                        name: $('#name').val(),\n                        email: $('#email').val(),\n                        interest: $('#interest').val(),\n                        message: $('#message').val(),\n                        mulita_contact_nonce: $('#mulita_contact_nonce').val()\n                    },\n                    success: function(response) {\n                        if (response.success) {\n                            $message.addClass('success').html('<strong>\u2713<\/strong> ' + response.data.message).css({\n                                'background': '#d4edda',\n                                'color': '#155724',\n                                'border': '1px solid #c3e6cb'\n                            }).fadeIn();\n                            $form[0].reset();\n                        } else {\n                            $message.addClass('error').html('<strong>\u2717<\/strong> ' + response.data.message).css({\n                                'background': '#f8d7da',\n                                'color': '#721c24',\n                                'border': '1px solid #f5c6cb'\n                            }).fadeIn();\n                        }\n                    },\n                    error: function() {\n                        $message.addClass('error').html('<strong>\u2717<\/strong> Error de conexi\u00f3n. Por favor, intenta nuevamente.').css({\n                            'background': '#f8d7da',\n                            'color': '#721c24',\n                            'border': '1px solid #f5c6cb'\n                        }).fadeIn();\n                    },\n                    complete: function() {\n                        $btn.prop('disabled', false).html(originalText);\n                    }\n                });\n            });\n        });\n        <\/script>\n        \n\n\n        <!-- Theme Switcher Floating Button -->\n        <div class=\"mulita-theme-switcher\" id=\"mulitaThemeSwitcher\" title=\"Cambiar Tema\">\n            <div class=\"switcher-icon\">\n                <i class=\"fas fa-palette\"><\/i>\n            <\/div>\n        <\/div>\n\n        <style>\n            .mulita-theme-switcher {\n                position: fixed;\n                bottom: 30px;\n                right: 30px; \/* Right aligned *\/\n                width: 60px;\n                height: 60px;\n                background: linear-gradient(135deg, #EB5E28, #ff7e5f);\n                color: #fff;\n                border-radius: 50%;\n                box-shadow: 0 4px 15px rgba(0,0,0,0.3);\n                z-index: 9999;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                cursor: pointer;\n                transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n                border: 2px solid rgba(255,255,255,0.2);\n            }\n\n            .mulita-theme-switcher:hover {\n                transform: scale(1.1) rotate(15deg);\n                box-shadow: 0 6px 20px rgba(0,0,0,0.4);\n            }\n\n            .mulita-theme-switcher .switcher-icon {\n                font-size: 24px;\n            }\n            \n            \/* Green Theme State for Button *\/\n            body[data-theme=\"green\"] .mulita-theme-switcher {\n                background: linear-gradient(135deg, #588157, #8FB38D);\n            }\n            \n            \/* Mobile Positioning *\/\n            @media (max-width: 768px) {\n                .mulita-theme-switcher {\n                    bottom: 20px;\n                    right: 20px;\n                    width: 50px;\n                    height: 50px;\n                }\n                .mulita-theme-switcher .switcher-icon {\n                    font-size: 20px;\n                }\n            }\n        <\/style>\n\n        <script>\n            document.addEventListener('DOMContentLoaded', function() {\n                const switcher = document.getElementById('mulitaThemeSwitcher');\n                \n                \/\/ Check saved preference\n                const currentTheme = localStorage.getItem('mulita-theme');\n                if (currentTheme) {\n                    document.body.setAttribute('data-theme', currentTheme);\n                }\n\n                switcher.addEventListener('click', function() {\n                    const body = document.body;\n                    if (body.getAttribute('data-theme') === 'green') {\n                        body.removeAttribute('data-theme');\n                        localStorage.setItem('mulita-theme', 'default');\n                    } else {\n                        body.setAttribute('data-theme', 'green');\n                        localStorage.setItem('mulita-theme', 'green');\n                    }\n                });\n            });\n        <\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-28","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-json\/wp\/v2\/pages\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-json\/wp\/v2\/comments?post=28"}],"version-history":[{"count":12,"href":"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-json\/wp\/v2\/pages\/28\/revisions"}],"predecessor-version":[{"id":45,"href":"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-json\/wp\/v2\/pages\/28\/revisions\/45"}],"wp:attachment":[{"href":"https:\/\/lamulitaaudiovisual.com.ar\/cataset\/wp-json\/wp\/v2\/media?parent=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}