{"id":303,"date":"2026-07-03T13:14:26","date_gmt":"2026-07-03T13:14:26","guid":{"rendered":"https:\/\/mariachiguzman.com\/?page_id=303"},"modified":"2026-08-26T22:10:30","modified_gmt":"2026-08-26T22:10:30","slug":"home","status":"publish","type":"page","link":"https:\/\/mariachiguzman.com\/en\/","title":{"rendered":"Home"},"content":{"rendered":"<div class=\"et_pb_section_0 et_pb_section et_section_regular et_flex_section\">\n<div class=\"et_pb_row_0 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_0 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_code_0 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><!-- SLIDER DE VIDEOS GUZM\u00c1N -->\n<section class=\"guz-full-video-slider\" id=\"guzFullVideoSlider\">\n\n    <div class=\"guz-full-video-stage\">\n\n        <!-- VIDEO 1 -->\n        <div class=\"guz-full-video-slide guz-full-video-slide-active\">\n            <video\n                class=\"guz-full-video-player\"\n                src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/video3comprimido.mp4\"\n                poster=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/s3.png\"\n                muted\n                playsinline\n                preload=\"metadata\">\n            <\/video>\n        <\/div>\n\n        <!-- VIDEO 2 -->\n        <div class=\"guz-full-video-slide\">\n            <video\n                class=\"guz-full-video-player\"\n                src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/video2comprimido.mp4\"\n                poster=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/s2.png\"\n                muted\n                playsinline\n                preload=\"metadata\">\n            <\/video>\n        <\/div>\n\n        <!-- VIDEO 3 -->\n        <div class=\"guz-full-video-slide\">\n            <video\n                class=\"guz-full-video-player\"\n                src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/bastayavideo3comprimed.mp4\"\n                poster=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/s1.png\"\n                muted\n                playsinline\n                preload=\"metadata\">\n            <\/video>\n        <\/div>\n\n        <!-- FLECHA ANTERIOR -->\n        <button\n            type=\"button\"\n            class=\"guz-full-video-arrow guz-full-video-arrow-prev\"\n            aria-label=\"Video anterior\">\n\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path d=\"M15 18l-6-6 6-6\"\/>\n            <\/svg>\n\n        <\/button>\n\n        <!-- FLECHA SIGUIENTE -->\n        <button\n            type=\"button\"\n            class=\"guz-full-video-arrow guz-full-video-arrow-next\"\n            aria-label=\"Video siguiente\">\n\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path d=\"M9 6l6 6-6 6\"\/>\n            <\/svg>\n\n        <\/button>\n\n        <!-- THUMBNAILS DENTRO DEL VIDEO -->\n        <div class=\"guz-full-thumbnails-overlay\">\n\n            <button\n                type=\"button\"\n                class=\"guz-full-thumb-arrow guz-full-thumb-arrow-prev\"\n                aria-label=\"Mover miniaturas a la izquierda\">\n\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path d=\"M15 18l-6-6 6-6\"\/>\n                <\/svg>\n\n            <\/button>\n\n            <div class=\"guz-full-thumbnails\">\n\n                <!-- THUMBNAIL 1 -->\n                <button\n                    type=\"button\"\n                    class=\"guz-full-thumbnail guz-full-thumbnail-active\"\n                    data-video-index=\"0\"\n                    aria-label=\"Ver video 1\"\n                    aria-current=\"true\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/s3.png\"\n                        alt=\"Miniatura del video 1\">\n\n                    <span class=\"guz-full-thumbnail-play\">\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M8 5v14l11-7z\"\/>\n                        <\/svg>\n                    <\/span>\n\n                <\/button>\n\n                <!-- THUMBNAIL 2 -->\n                <button\n                    type=\"button\"\n                    class=\"guz-full-thumbnail\"\n                    data-video-index=\"1\"\n                    aria-label=\"Ver video 2\"\n                    aria-current=\"false\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/s2.png\"\n                        alt=\"Miniatura del video 2\">\n\n                    <span class=\"guz-full-thumbnail-play\">\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M8 5v14l11-7z\"\/>\n                        <\/svg>\n                    <\/span>\n\n                <\/button>\n\n                <!-- THUMBNAIL 3 -->\n                <button\n                    type=\"button\"\n                    class=\"guz-full-thumbnail\"\n                    data-video-index=\"2\"\n                    aria-label=\"Ver video 3\"\n                    aria-current=\"false\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/s1.png\"\n                        alt=\"Miniatura del video 3\">\n\n                    <span class=\"guz-full-thumbnail-play\">\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M8 5v14l11-7z\"\/>\n                        <\/svg>\n                    <\/span>\n\n                <\/button>\n\n            <\/div>\n\n            <button\n                type=\"button\"\n                class=\"guz-full-thumb-arrow guz-full-thumb-arrow-next\"\n                aria-label=\"Mover miniaturas a la derecha\">\n\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path d=\"M9 6l6 6-6 6\"\/>\n                <\/svg>\n\n            <\/button>\n\n        <\/div>\n\n        <!-- BARRA DE PROGRESO -->\n        <div class=\"guz-full-video-progress\">\n            <span class=\"guz-full-video-progress-bar\"><\/span>\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n\/* =========================================================\n   CONFIGURACI\u00d3N GENERAL\n========================================================= *\/\n\n.guz-full-video-slider,\n.guz-full-video-slider * {\n    box-sizing: border-box;\n}\n\n.guz-full-video-slider {\n    --guz-gold: #c7a45b;\n    --guz-white: #ffffff;\n    --guz-black: #000000;\n\n    position: relative;\n    width: 100%;\n    max-width: none;\n    margin: 0;\n    font-family: inherit;\n}\n\n\/* =========================================================\n   CONTENEDOR PRINCIPAL\n========================================================= *\/\n\n.guz-full-video-stage {\n    position: relative;\n    width: 100%;\n    height: clamp(500px, 70vh, 850px);\n    min-height: 500px;\n    overflow: hidden;\n    background: #000000;\n    isolation: isolate;\n    touch-action: pan-y pinch-zoom;\n}\n\n\/* Degradado inferior *\/\n\n.guz-full-video-stage::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 4;\n    pointer-events: none;\n    background:\n        linear-gradient(\n            to bottom,\n            rgba(0, 0, 0, 0.03) 0%,\n            rgba(0, 0, 0, 0.04) 45%,\n            rgba(0, 0, 0, 0.46) 75%,\n            rgba(0, 0, 0, 0.88) 100%\n        );\n}\n\n\/* =========================================================\n   SLIDES\n========================================================= *\/\n\n.guz-full-video-slide {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    opacity: 0;\n    visibility: hidden;\n    transform: scale(1.025);\n    transition:\n        opacity 0.7s ease,\n        visibility 0.7s ease,\n        transform 1s ease;\n}\n\n.guz-full-video-slide-active {\n    z-index: 2;\n    opacity: 1;\n    visibility: visible;\n    transform: scale(1);\n}\n\n\/* Video ancho completo *\/\n\n.guz-full-video-player {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center center;\n    background: #000000;\n    border: 0;\n    outline: 0;\n}\n\n\/* =========================================================\n   FLECHAS PRINCIPALES\n========================================================= *\/\n\n.guz-full-video-arrow {\n    position: absolute;\n    top: 42%;\n    z-index: 20;\n    display: grid;\n    place-items: center;\n    width: 58px;\n    height: 58px;\n    padding: 0;\n    border: 1px solid rgba(255, 255, 255, 0.32);\n    border-radius: 50%;\n    color: #ffffff;\n    background: rgba(0, 0, 0, 0.38);\n    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n    cursor: pointer;\n    transform: translateY(-50%);\n    transition:\n        background 0.3s ease,\n        border-color 0.3s ease,\n        transform 0.3s ease;\n}\n\n.guz-full-video-arrow:hover {\n    background: var(--guz-gold);\n    border-color: var(--guz-gold);\n    transform: translateY(-50%) scale(1.08);\n}\n\n.guz-full-video-arrow-prev {\n    left: 30px;\n}\n\n.guz-full-video-arrow-next {\n    right: 30px;\n}\n\n.guz-full-video-arrow svg,\n.guz-full-thumb-arrow svg {\n    width: 26px;\n    height: 26px;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =========================================================\n   THUMBNAILS DENTRO DEL VIDEO\n========================================================= *\/\n\n.guz-full-thumbnails-overlay {\n    position: absolute;\n    right: 0;\n    bottom: 30px;\n    left: 0;\n    z-index: 15;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 14px;\n    width: min(940px, calc(100% - 40px));\n    margin: 0 auto;\n}\n\n.guz-full-thumbnails {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 18px;\n    max-width: 100%;\n    padding: 16px 8px;\n    overflow-x: auto;\n    overflow-y: hidden;\n    overscroll-behavior-x: contain;\n    overscroll-behavior-y: none;\n    scroll-behavior: smooth;\n    scroll-snap-type: x proximity;\n    scrollbar-width: none;\n    -webkit-overflow-scrolling: touch;\n    touch-action: pan-x;\n}\n\n.guz-full-thumbnails::-webkit-scrollbar {\n    display: none;\n}\n\n\/* =========================================================\n   THUMBNAIL INDIVIDUAL\n========================================================= *\/\n\n.guz-full-thumbnail {\n    position: relative;\n    flex: 0 0 clamp(145px, 15vw, 215px);\n    aspect-ratio: 16 \/ 9;\n    padding: 0;\n    overflow: hidden;\n    border: 2px solid rgba(255, 255, 255, 0.28);\n    border-radius: 14px;\n    background: #111111;\n    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);\n    cursor: pointer;\n    scroll-snap-align: center;\n    opacity: 0.58;\n    transform: scale(0.9);\n    transition:\n        opacity 0.35s ease,\n        transform 0.35s ease,\n        border-color 0.35s ease,\n        box-shadow 0.35s ease;\n}\n\n.guz-full-thumbnail::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    background: rgba(0, 0, 0, 0.26);\n    transition: background 0.3s ease;\n}\n\n.guz-full-thumbnail:hover {\n    opacity: 0.9;\n    transform: scale(0.96);\n}\n\n.guz-full-thumbnail:hover::after {\n    background: rgba(0, 0, 0, 0.08);\n}\n\n.guz-full-thumbnail-active {\n    opacity: 1;\n    border-color: var(--guz-gold);\n    transform: scale(1);\n    box-shadow:\n        0 16px 40px rgba(0, 0, 0, 0.4),\n        0 0 0 4px rgba(199, 164, 91, 0.24);\n}\n\n.guz-full-thumbnail-active::after {\n    background: transparent;\n}\n\n.guz-full-thumbnail img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    pointer-events: none;\n    user-select: none;\n    -webkit-user-drag: none;\n}\n\n\/* =========================================================\n   ICONO PLAY\n========================================================= *\/\n\n.guz-full-thumbnail-play {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    z-index: 3;\n    display: grid;\n    place-items: center;\n    width: 40px;\n    height: 40px;\n    color: #ffffff;\n    border: 1px solid rgba(255, 255, 255, 0.45);\n    border-radius: 50%;\n    background: rgba(0, 0, 0, 0.62);\n    backdrop-filter: blur(8px);\n    -webkit-backdrop-filter: blur(8px);\n    transform: translate(-50%, -50%);\n    transition:\n        transform 0.3s ease,\n        background 0.3s ease;\n}\n\n.guz-full-thumbnail-active .guz-full-thumbnail-play {\n    background: var(--guz-gold);\n}\n\n.guz-full-thumbnail:hover .guz-full-thumbnail-play {\n    transform: translate(-50%, -50%) scale(1.1);\n}\n\n.guz-full-thumbnail-play svg {\n    width: 18px;\n    height: 18px;\n    margin-left: 2px;\n    fill: currentColor;\n}\n\n\/* =========================================================\n   FLECHAS DE THUMBNAILS\n========================================================= *\/\n\n.guz-full-thumb-arrow {\n    flex: 0 0 auto;\n    display: grid;\n    place-items: center;\n    width: 43px;\n    height: 43px;\n    padding: 0;\n    border: 1px solid rgba(255, 255, 255, 0.35);\n    border-radius: 50%;\n    color: #ffffff;\n    background: rgba(0, 0, 0, 0.48);\n    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);\n    backdrop-filter: blur(10px);\n    -webkit-backdrop-filter: blur(10px);\n    cursor: pointer;\n    transition:\n        background 0.3s ease,\n        transform 0.3s ease;\n}\n\n.guz-full-thumb-arrow:hover {\n    background: var(--guz-gold);\n    transform: scale(1.08);\n}\n\n\/* =========================================================\n   BARRA DE PROGRESO\n========================================================= *\/\n\n.guz-full-video-progress {\n    position: absolute;\n    right: 35px;\n    bottom: 16px;\n    left: 35px;\n    z-index: 20;\n    height: 4px;\n    overflow: hidden;\n    border-radius: 20px;\n    background: rgba(255, 255, 255, 0.23);\n    pointer-events: none;\n}\n\n.guz-full-video-progress-bar {\n    display: block;\n    width: 0;\n    height: 100%;\n    border-radius: inherit;\n    background: var(--guz-gold);\n}\n\n.guz-full-video-progress-bar.guz-full-progress-running {\n    animation: guzFullVideoProgress 4s linear forwards;\n}\n\n@keyframes guzFullVideoProgress {\n    from {\n        width: 0;\n    }\n\n    to {\n        width: 100%;\n    }\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 900px) {\n\n    .guz-full-video-stage {\n        height: clamp(470px, 65vh, 680px);\n        min-height: 470px;\n    }\n\n    .guz-full-video-arrow {\n        top: 40%;\n        width: 49px;\n        height: 49px;\n    }\n\n    .guz-full-video-arrow-prev {\n        left: 15px;\n    }\n\n    .guz-full-video-arrow-next {\n        right: 15px;\n    }\n\n    .guz-full-thumbnails-overlay {\n        width: calc(100% - 20px);\n        bottom: 26px;\n    }\n\n    .guz-full-thumbnails {\n        justify-content: flex-start;\n        gap: 12px;\n        padding: 14px 5px;\n    }\n\n    .guz-full-thumbnail {\n        flex-basis: 155px;\n    }\n\n    .guz-full-thumb-arrow {\n        display: none;\n    }\n\n}\n\n\/* =========================================================\n   M\u00d3VIL\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n    .guz-full-video-stage {\n        height: 560px;\n        min-height: 560px;\n    }\n\n    .guz-full-video-player {\n        object-position: center center;\n    }\n\n    .guz-full-video-arrow {\n        top: 42%;\n        width: 42px;\n        height: 42px;\n    }\n\n    .guz-full-video-arrow-prev {\n        left: 8px;\n    }\n\n    .guz-full-video-arrow-next {\n        right: 8px;\n    }\n\n    .guz-full-video-arrow svg {\n        width: 21px;\n        height: 21px;\n    }\n\n    .guz-full-thumbnails-overlay {\n        bottom: 24px;\n        width: 100%;\n        padding: 0 8px;\n    }\n\n    .guz-full-thumbnails {\n        width: 100%;\n        justify-content: flex-start;\n        gap: 10px;\n        padding: 12px 4px;\n    }\n\n    .guz-full-thumbnail {\n        flex-basis: 125px;\n        border-radius: 10px;\n    }\n\n    .guz-full-thumbnail-play {\n        width: 32px;\n        height: 32px;\n    }\n\n    .guz-full-thumbnail-play svg {\n        width: 15px;\n        height: 15px;\n    }\n\n    .guz-full-video-progress {\n        right: 15px;\n        bottom: 10px;\n        left: 15px;\n        height: 3px;\n    }\n\n}\n\n\/* =========================================================\n   M\u00d3VILES PEQUE\u00d1OS\n========================================================= *\/\n\n@media (max-width: 380px) {\n\n    .guz-full-video-stage {\n        height: 500px;\n        min-height: 500px;\n    }\n\n    .guz-full-thumbnail {\n        flex-basis: 110px;\n    }\n\n}\n\n\/* =========================================================\n   ACCESIBILIDAD\n========================================================= *\/\n\n.guz-full-video-arrow:focus-visible,\n.guz-full-thumb-arrow:focus-visible,\n.guz-full-thumbnail:focus-visible {\n    outline: 3px solid var(--guz-gold);\n    outline-offset: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n\n    .guz-full-video-slide,\n    .guz-full-video-arrow,\n    .guz-full-thumbnail,\n    .guz-full-thumbnail-play {\n        transition: none;\n    }\n\n    .guz-full-video-progress-bar.guz-full-progress-running {\n        animation: none;\n    }\n\n}\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n    const sliders = document.querySelectorAll(\".guz-full-video-slider\");\n\n    sliders.forEach(function (slider) {\n\n        const slides = Array.from(\n            slider.querySelectorAll(\".guz-full-video-slide\")\n        );\n\n        const videos = Array.from(\n            slider.querySelectorAll(\".guz-full-video-player\")\n        );\n\n        const thumbnails = Array.from(\n            slider.querySelectorAll(\".guz-full-thumbnail\")\n        );\n\n        const previousButton = slider.querySelector(\n            \".guz-full-video-arrow-prev\"\n        );\n\n        const nextButton = slider.querySelector(\n            \".guz-full-video-arrow-next\"\n        );\n\n        const thumbnailPreviousButton = slider.querySelector(\n            \".guz-full-thumb-arrow-prev\"\n        );\n\n        const thumbnailNextButton = slider.querySelector(\n            \".guz-full-thumb-arrow-next\"\n        );\n\n        const thumbnailsContainer = slider.querySelector(\n            \".guz-full-thumbnails\"\n        );\n\n        const progressBar = slider.querySelector(\n            \".guz-full-video-progress-bar\"\n        );\n\n        const videoStage = slider.querySelector(\n            \".guz-full-video-stage\"\n        );\n\n        const intervalDuration = 4000;\n\n        let currentIndex = 0;\n        let autoplayTimer = null;\n        let touchStartX = 0;\n        let touchEndX = 0;\n\n        \/*\n         * Detiene y reinicia todos los videos.\n         *\/\n        function stopAllVideos() {\n\n            videos.forEach(function (video) {\n\n                video.pause();\n\n                try {\n                    video.currentTime = 0;\n                } catch (error) {\n                    \/* Evita errores si el video a\u00fan no carg\u00f3 *\/\n                }\n\n            });\n\n        }\n\n        \/*\n         * Reproduce \u00fanicamente el video activo.\n         *\/\n        function playActiveVideo() {\n\n            const activeVideo = videos[currentIndex];\n\n            if (!activeVideo) {\n                return;\n            }\n\n            activeVideo.muted = true;\n\n            try {\n                activeVideo.currentTime = 0;\n            } catch (error) {\n                \/* El video puede no estar listo todav\u00eda *\/\n            }\n\n            const playPromise = activeVideo.play();\n\n            if (playPromise !== undefined) {\n\n                playPromise.catch(function () {\n                    \/*\n                     * Si el navegador bloquea el autoplay,\n                     * permanecer\u00e1 visible el thumbnail o poster.\n                     *\/\n                });\n\n            }\n\n        }\n\n        \/*\n         * Reinicia la barra de progreso de 4 segundos.\n         *\/\n        function restartProgress() {\n\n            if (!progressBar) {\n                return;\n            }\n\n            progressBar.classList.remove(\n                \"guz-full-progress-running\"\n            );\n\n            void progressBar.offsetWidth;\n\n            progressBar.classList.add(\n                \"guz-full-progress-running\"\n            );\n\n        }\n\n        \/*\n         * Centra horizontalmente el thumbnail activo.\n         *\n         * IMPORTANTE:\n         * No utiliza scrollIntoView(), porque esa funci\u00f3n puede mover\n         * tambi\u00e9n el scroll vertical de toda la p\u00e1gina.\n         *\/\n        function centerActiveThumbnail() {\n\n            const activeThumbnail = thumbnails[currentIndex];\n\n            if (!activeThumbnail || !thumbnailsContainer) {\n                return;\n            }\n\n            const containerRect =\n                thumbnailsContainer.getBoundingClientRect();\n\n            const thumbnailRect =\n                activeThumbnail.getBoundingClientRect();\n\n            const currentHorizontalScroll =\n                thumbnailsContainer.scrollLeft;\n\n            const thumbnailCenter =\n                thumbnailRect.left -\n                containerRect.left +\n                currentHorizontalScroll +\n                (thumbnailRect.width \/ 2);\n\n            const targetHorizontalScroll =\n                thumbnailCenter -\n                (containerRect.width \/ 2);\n\n            const maximumScroll =\n                thumbnailsContainer.scrollWidth -\n                thumbnailsContainer.clientWidth;\n\n            const safeHorizontalScroll = Math.max(\n                0,\n                Math.min(targetHorizontalScroll, maximumScroll)\n            );\n\n            \/*\n             * Este m\u00e9todo mueve \u00fanicamente el scroll horizontal\n             * del contenedor de miniaturas.\n             *\/\n            thumbnailsContainer.scrollTo({\n                left: safeHorizontalScroll,\n                behavior: \"smooth\"\n            });\n\n        }\n\n        \/*\n         * Inicia el cambio autom\u00e1tico.\n         *\/\n        function startAutoplay() {\n\n            window.clearInterval(autoplayTimer);\n\n            autoplayTimer = window.setInterval(function () {\n\n                showVideo(currentIndex + 1, false);\n\n            }, intervalDuration);\n\n        }\n\n        \/*\n         * Detiene temporalmente el autoplay.\n         *\/\n        function pauseAutoplay() {\n\n            window.clearInterval(autoplayTimer);\n            autoplayTimer = null;\n\n        }\n\n        \/*\n         * Muestra un video determinado.\n         *\/\n        function showVideo(index, restartAutoplay = true) {\n\n            if (!slides.length) {\n                return;\n            }\n\n            if (index < 0) {\n                index = slides.length - 1;\n            }\n\n            if (index >= slides.length) {\n                index = 0;\n            }\n\n            currentIndex = index;\n\n            stopAllVideos();\n\n            slides.forEach(function (slide, slideIndex) {\n\n                slide.classList.toggle(\n                    \"guz-full-video-slide-active\",\n                    slideIndex === currentIndex\n                );\n\n            });\n\n            thumbnails.forEach(function (thumbnail, thumbnailIndex) {\n\n                const isActive =\n                    thumbnailIndex === currentIndex;\n\n                thumbnail.classList.toggle(\n                    \"guz-full-thumbnail-active\",\n                    isActive\n                );\n\n                thumbnail.setAttribute(\n                    \"aria-current\",\n                    isActive ? \"true\" : \"false\"\n                );\n\n            });\n\n            playActiveVideo();\n            centerActiveThumbnail();\n            restartProgress();\n\n            if (restartAutoplay) {\n                startAutoplay();\n            }\n\n        }\n\n        function nextVideo() {\n            showVideo(currentIndex + 1);\n        }\n\n        function previousVideo() {\n            showVideo(currentIndex - 1);\n        }\n\n        \/*\n         * Flechas principales.\n         *\/\n        if (previousButton) {\n\n            previousButton.addEventListener(\"click\", function () {\n                previousVideo();\n            });\n\n        }\n\n        if (nextButton) {\n\n            nextButton.addEventListener(\"click\", function () {\n                nextVideo();\n            });\n\n        }\n\n        \/*\n         * Selecci\u00f3n mediante thumbnails.\n         *\/\n        thumbnails.forEach(function (thumbnail) {\n\n            thumbnail.addEventListener(\"click\", function () {\n\n                const selectedIndex = Number(\n                    thumbnail.getAttribute(\"data-video-index\")\n                );\n\n                if (Number.isNaN(selectedIndex)) {\n                    return;\n                }\n\n                showVideo(selectedIndex);\n\n            });\n\n        });\n\n        \/*\n         * Flechas del carrusel de thumbnails.\n         *\/\n        if (thumbnailPreviousButton && thumbnailsContainer) {\n\n            thumbnailPreviousButton.addEventListener(\n                \"click\",\n                function () {\n\n                    thumbnailsContainer.scrollBy({\n                        left: -240,\n                        behavior: \"smooth\"\n                    });\n\n                }\n            );\n\n        }\n\n        if (thumbnailNextButton && thumbnailsContainer) {\n\n            thumbnailNextButton.addEventListener(\n                \"click\",\n                function () {\n\n                    thumbnailsContainer.scrollBy({\n                        left: 240,\n                        behavior: \"smooth\"\n                    });\n\n                }\n            );\n\n        }\n\n        \/*\n         * Deslizamiento del video principal en m\u00f3vil.\n         * No afecta el scroll vertical de la p\u00e1gina.\n         *\/\n        if (videoStage) {\n\n            videoStage.addEventListener(\n                \"touchstart\",\n                function (event) {\n\n                    if (\n                        event.target.closest(\n                            \".guz-full-thumbnails-overlay\"\n                        )\n                    ) {\n                        return;\n                    }\n\n                    touchStartX =\n                        event.changedTouches[0].clientX;\n\n                    touchEndX = touchStartX;\n\n                },\n                { passive: true }\n            );\n\n            videoStage.addEventListener(\n                \"touchend\",\n                function (event) {\n\n                    if (\n                        event.target.closest(\n                            \".guz-full-thumbnails-overlay\"\n                        )\n                    ) {\n                        return;\n                    }\n\n                    touchEndX =\n                        event.changedTouches[0].clientX;\n\n                    const swipeDistance =\n                        touchEndX - touchStartX;\n\n                    if (Math.abs(swipeDistance) < 50) {\n                        return;\n                    }\n\n                    if (swipeDistance < 0) {\n                        nextVideo();\n                    } else {\n                        previousVideo();\n                    }\n\n                },\n                { passive: true }\n            );\n\n        }\n\n        \/*\n         * Pausa cuando la pesta\u00f1a est\u00e1 oculta.\n         *\/\n        document.addEventListener(\n            \"visibilitychange\",\n            function () {\n\n                if (document.hidden) {\n\n                    pauseAutoplay();\n\n                    videos.forEach(function (video) {\n                        video.pause();\n                    });\n\n                } else {\n\n                    playActiveVideo();\n                    restartProgress();\n                    startAutoplay();\n\n                }\n\n            }\n        );\n\n        \/*\n         * Inicializaci\u00f3n.\n         *\/\n        showVideo(0);\n\n    });\n\n});\n<\/script><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_1 et_pb_section et_section_regular et_flex_section\">\n<div class=\"et_pb_row_1 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_1 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_text_0 et_pb_text et_pb_bg_layout_light et_animated et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\" data-et-mv-hidden-tablet=\"true\"><h1 class=\"gradient-title\">Mariachi in Utah and Salt Lake City<\/h1>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_2 et_pb_section et_section_regular et_flex_section et_pb_section_parallax\"><span class=\"et-pb-parallax-wrapper\"><span class=\"et-pb-parallax-background et-pb-parallax-background--css et-pb-parallax-background_phone et-pb-parallax-background_phone-module--divi-section-2\" style=\"background-image:url(https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/fondomariachis-1-fondo5.jpg)\"><\/span><\/span>\n<div class=\"et_pb_row_2 et_pb_row et_flex_row\" id=\"nosotros\">\n<div class=\"et_pb_column_2 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_animated et_flex_column_12_24 et_flex_column_12_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_row_3 et_pb_row et_pb_row_nested et_flex_row\">\n<div class=\"et_pb_column_3 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_code_1 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><div class=\"mariachi-gold-text\">\n  <p>\nMariachi Guzm\u00e1n offers live Mexican music for weddings, birthdays, quincea\u00f1eras, serenades, anniversaries, and private or corporate events in Utah. Our goal is to provide an elegant performance, exceptional musical quality, and a memorable experience for every celebration.\n\n  <\/p>\n<\/div>\n\n<style>\n.mariachi-gold-text{\n    background:#0b0b0b;\n    padding:20px 24px;\n    border-radius:12px;\n    border:1px solid rgba(234,193,113,.28);\n    box-shadow:\n        0 4px 18px rgba(0,0,0,.35),\n        inset 0 0 10px rgba(234,193,113,.05);\n    max-width:800px;\n    margin:20px auto;\n    text-align:center;\n}\n\n.mariachi-gold-text p{\n    margin:0;\n    font-family:\"Playfair Display\",Georgia,serif;\n    font-size:clamp(17px,1vw,22px);\n    line-height:1.7;\n    font-weight:lighter;\n    letter-spacing:.02em;\n    color:#eac171;\n    text-shadow:\n        0 1px 2px rgba(0,0,0,.7),\n        0 0 4px rgba(234,193,113,.18);\n}\n<\/style><\/div><\/div>\n\n<div class=\"et_pb_text_1 et_pb_text et_pb_bg_layout_light et_animated et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p>Our Mariachi in Utah is known for its live show and exceptional musical quality, as well as the excellent personal presentation and professionalism of our staff.<\/p>\n<p>We offer 3 different formats that can be tailored to the special event you want to create. We are the best mariachi in Utah.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_row_4 et_pb_row et_pb_row_nested et_flex_row et_animated\">\n<div class=\"et_pb_column_4 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_8_24 et_flex_column_8_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_blurb_0 et_pb_blurb et_pb_bg_layout_light et_pb_blurb_position_left et_pb_module et_flex_module\"><div class=\"et_pb_blurb_content et_flex_module\"><div class=\"et_pb_main_blurb_image\"><span class=\"et_pb_image_wrap et_pb_only_image_mode_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/1q.png\" width=\"48\" height=\"52\" srcset=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/1q.png 48w\" sizes=\"(max-width: 48px) 100vw, 48px\" class=\"wp-image-112\" title=\"1q\" \/><\/span><\/div><div class=\"et_pb_blurb_container\"><div class=\"et_pb_blurb_description\"><p>SONGS<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n<div class=\"et_pb_column_5 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_8_24 et_flex_column_8_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_blurb_1 et_pb_blurb et_pb_bg_layout_light et_pb_blurb_position_left et_pb_module et_flex_module\"><div class=\"et_pb_blurb_content et_flex_module\"><div class=\"et_pb_main_blurb_image\"><span class=\"et_pb_image_wrap et_pb_only_image_mode_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/2q.png\" width=\"49\" height=\"53\" srcset=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/2q.png 49w\" sizes=\"(max-width: 49px) 100vw, 49px\" class=\"wp-image-111\" title=\"2q\" \/><\/span><\/div><div class=\"et_pb_blurb_container\"><div class=\"et_pb_blurb_description\"><p>HOUR<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n<div class=\"et_pb_column_6 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_8_24 et_flex_column_8_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_blurb_2 et_pb_blurb et_pb_bg_layout_light et_pb_blurb_position_left et_pb_module et_flex_module\"><div class=\"et_pb_blurb_content et_flex_module\"><div class=\"et_pb_main_blurb_image\"><span class=\"et_pb_image_wrap et_pb_only_image_mode_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/3q.png\" width=\"79\" height=\"53\" srcset=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/3q.png 79w\" sizes=\"(max-width: 79px) 100vw, 79px\" class=\"wp-image-110\" title=\"3q\" \/><\/span><\/div><div class=\"et_pb_blurb_container\"><div class=\"et_pb_blurb_description\"><p>MINUTES<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_code_2 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><div class=\"luxury-whatsapp-button\">\n    <a href=\"https:\/\/wa.me\/18014320581\" target=\"_blank\" rel=\"noopener\">\n        Get a Quote Now\n    <\/a>\n<\/div>\n\n<style>\n.luxury-whatsapp-button{\n    display:inline-flex;\n}\n\n\/* BOT\u00d3N *\/\n.luxury-whatsapp-button a{\n\n    position:relative;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    padding:14px 42px;\n    border-radius:999px;\n\n    text-decoration:none;\n    text-transform:uppercase;\n\n    font-family:\"Playfair Display\",serif;\n    font-size:24px;\n    font-weight:700;\n    letter-spacing:.07em;\n\n    color:#4a4a4a;\n\n    overflow:hidden;\n    isolation:isolate;\n\n    border:2px solid rgba(62,162,179,.95);\n\n    background:\n        linear-gradient(180deg,\n            #ffffff 0%,\n            #eef2f5 12%,\n            #cfd7de 27%,\n            #ffffff 42%,\n            #bcc5cd 58%,\n            #eef3f6 74%,\n            #ffffff 100%);\n\n    box-shadow:\n        inset 0 1px 0 rgba(255,255,255,.95),\n        inset 0 -1px 2px rgba(0,0,0,.12),\n        inset 0 8px 10px rgba(255,255,255,.18),\n        0 10px 24px rgba(43,146,163,.18);\n\n    transition:.35s ease;\n\n    animation:\n        luxuryFloat 6s ease-in-out infinite;\n}\n\n\/* METAL CEPILLADO *\/\n.luxury-whatsapp-button a::before{\n\n    content:\"\";\n    position:absolute;\n    inset:0;\n\n    background:\n        repeating-linear-gradient(\n            90deg,\n            rgba(255,255,255,.05) 0px,\n            rgba(255,255,255,.05) 2px,\n            rgba(0,0,0,.015) 3px,\n            rgba(255,255,255,.04) 6px\n        );\n\n    opacity:.55;\n    mix-blend-mode:soft-light;\n\n    pointer-events:none;\n}\n\n\/* REFLEJO DIN\u00c1MICO *\/\n.luxury-whatsapp-button a::after{\n\n    content:\"\";\n\n    position:absolute;\n    top:-120%;\n    left:-45%;\n\n    width:40%;\n    height:340%;\n\n    background:linear-gradient(\n        90deg,\n        transparent,\n        rgba(255,255,255,.95),\n        rgba(255,255,255,.25),\n        transparent\n    );\n\n    transform:rotate(18deg);\n\n    animation:shineLoop 5.5s linear infinite;\n\n    pointer-events:none;\n}\n\n\/* TEXTO *\/\n.luxury-whatsapp-button span{\n    position:relative;\n    z-index:2;\n}\n\n.luxury-whatsapp-button a:hover{\n\n    transform:translateY(-1px);\n\n    box-shadow:\n        inset 0 1px 0 rgba(255,255,255,1),\n        inset 0 -2px 4px rgba(0,0,0,.15),\n        0 14px 32px rgba(43,146,163,.28);\n\n}\n\n\/* BRILLO MUY SUTIL *\/\n\n@keyframes shineLoop{\n\n    0%{\n        left:-60%;\n        opacity:0;\n    }\n\n    10%{\n        opacity:.9;\n    }\n\n    28%{\n        left:130%;\n        opacity:.9;\n    }\n\n    36%{\n        opacity:0;\n    }\n\n    100%{\n        left:130%;\n        opacity:0;\n    }\n\n}\n\n\/* MICRO RESPIRACI\u00d3N *\/\n\n@keyframes luxuryFloat{\n\n    0%,100%{\n\n        filter:brightness(1);\n\n    }\n\n    50%{\n\n        filter:brightness(1.04);\n\n    }\n\n}\n\n\/* RESPONSIVE *\/\n\n@media(max-width:480px){\n\n.luxury-whatsapp-button a{\n\n    font-size:20px;\n    padding:12px 30px;\n\n}\n\n}\n<\/style><\/div><\/div>\n<\/div>\n\n<div class=\"et_pb_column_7 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_animated et_flex_column_12_24 et_flex_column_12_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_image_0 et_pb_image et_pb_module et_flex_module\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/fondomariachis-1-5.jpg\" title=\"fondomariachis-1-5\" width=\"1245\" height=\"865\" srcset=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/fondomariachis-1-5.jpg 1245w, https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/fondomariachis-1-5-980x681.jpg 980w, https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/fondomariachis-1-5-480x333.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1245px, 100vw\" class=\"wp-image-281\" \/><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_3 et_pb_section et_section_regular et_flex_section\" id=\"paquetes\">\n<div class=\"et_pb_row_5 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_8 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_text_2 et_pb_text et_pb_bg_layout_light et_animated et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\" data-et-mv-hidden-tablet=\"true\"><h2 class=\"gradient-title\">Choose the Serenade You Want<\/h2>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_row_6 et_pb_row et_flex_row et_animated\">\n<div class=\"et_pb_column_9 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_12_24 et_flex_column_12_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_blurb_3 et_pb_blurb et_pb_bg_layout_light et_pb_text_align_center et_pb_blurb_position_top et_pb_module et_flex_module\"><div class=\"et_pb_blurb_content et_flex_module\"><div class=\"et_pb_main_blurb_image\"><span class=\"et_pb_image_wrap et_pb_only_image_mode_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/e1.png\" width=\"86\" height=\"89\" srcset=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/e1.png 86w\" sizes=\"(max-width: 86px) 100vw, 86px\" class=\"wp-image-130\" title=\"e1\" \/><\/span><\/div><div class=\"et_pb_blurb_container\"><div class=\"et_pb_blurb_description\"><p>Weddings<br \/>Anniversaries<br \/>Marriage Proposals<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n<div class=\"et_pb_column_10 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_12_24 et_flex_column_12_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_blurb_4 et_pb_blurb et_pb_bg_layout_light et_pb_text_align_center et_pb_blurb_position_top et_pb_module et_flex_module\"><div class=\"et_pb_blurb_content et_flex_module\"><div class=\"et_pb_main_blurb_image\"><span class=\"et_pb_image_wrap et_pb_only_image_mode_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/e2.png\" width=\"89\" height=\"89\" srcset=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/e2.png 89w\" sizes=\"(max-width: 89px) 100vw, 89px\" class=\"wp-image-129\" title=\"e2\" \/><\/span><\/div><div class=\"et_pb_blurb_container\"><div class=\"et_pb_blurb_description\"><p>Corporate Parties<br \/>Corporate Events<br \/>Corporate Fairs<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n<div class=\"et_pb_column_11 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_pb_section_parallax et_flex_column_12_24 et_flex_column_12_24_tablet et_flex_column_24_24_phone\"><span class=\"et-pb-parallax-wrapper\"><span class=\"et-pb-parallax-background et-pb-parallax-background-module--divi-column-11\" style=\"background-image:url(https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/DSC099522-1-scaled.jpg)\"><\/span><\/span>\n<div class=\"et_pb_divider_0 et_pb_divider_hidden et_pb_space et_pb_divider_position_top et_pb_module\"><div class=\"et_pb_divider_internal\"><\/div><\/div>\n<\/div>\n\n<div class=\"et_pb_column_12 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_12_24 et_flex_column_12_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_blurb_5 et_pb_blurb et_pb_bg_layout_light et_pb_text_align_center et_pb_blurb_position_top et_pb_module et_flex_module\"><div class=\"et_pb_blurb_content et_flex_module\"><div class=\"et_pb_main_blurb_image\"><span class=\"et_pb_image_wrap et_pb_only_image_mode_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/e3.png\" width=\"90\" height=\"91\" srcset=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/e3.png 90w\" sizes=\"(max-width: 90px) 100vw, 90px\" class=\"wp-image-128\" title=\"e3\" \/><\/span><\/div><div class=\"et_pb_blurb_container\"><div class=\"et_pb_blurb_description\"><p>Birthdays<br \/>Quincea\u00f1eras<br \/>Sweet Sixteens<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n<div class=\"et_pb_column_13 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_12_24 et_flex_column_12_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_blurb_6 et_pb_blurb et_pb_bg_layout_light et_pb_text_align_center et_pb_blurb_position_top et_pb_module et_flex_module\"><div class=\"et_pb_blurb_content et_flex_module\"><div class=\"et_pb_main_blurb_image\"><span class=\"et_pb_image_wrap et_pb_only_image_mode_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/e4.png\" width=\"86\" height=\"86\" srcset=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/07\/e4.png 86w\" sizes=\"(max-width: 86px) 100vw, 86px\" class=\"wp-image-127\" title=\"e4\" \/><\/span><\/div><div class=\"et_pb_blurb_container\"><div class=\"et_pb_blurb_description\"><p>At Home<br \/>At the Office<br \/>In Public Places<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_row_7 et_pb_row et_flex_row\" id=\"galeria\">\n<div class=\"et_pb_column_14 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_code_3 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><!-- ======================================================\n     MARIACHI GUZM\u00c1N\n     GALER\u00cdA INFINITA + SWIPE + LIGHTBOX\n     Compatible con DIVI 5\n======================================================= -->\n\n<div class=\"mg-gallery\">\n\n    <div class=\"mg-gallery-inner\">\n\n        <!-- FLECHA IZQUIERDA -->\n        <button class=\"mg-arrow mg-prev\" aria-label=\"Anterior\">\n            <svg viewBox=\"0 0 24 24\">\n                <path d=\"M15 18l-6-6 6-6\"\/>\n            <\/svg>\n        <\/button>\n\n        <!-- SLIDER -->\n        <div class=\"mg-slider\">\n\n            <div class=\"mg-track\">\n\n                <div class=\"mg-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/8Y4A77681.jpg\" alt=\"Mariachi Guzm\u00e1n\" loading=\"lazy\">\n                <\/div>\n              \n                <div class=\"mg-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/DSC03754-Mejorado-NR.jpg\" alt=\"Mariachi Guzm\u00e1n\" loading=\"lazy\">\n                <\/div>\n\n                <div class=\"mg-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/portada-3000-X-3000.jpg\" alt=\"Mariachi Guzm\u00e1n\" loading=\"lazy\">\n                <\/div>\n\n                <div class=\"mg-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/631A3665.jpg\" alt=\"Mariachi Guzm\u00e1n\" loading=\"lazy\">\n                <\/div>\n\n                <div class=\"mg-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/fotos-varias-47.jpg\" alt=\"Mariachi Guzm\u00e1n\" loading=\"lazy\">\n                <\/div>\n\n                <div class=\"mg-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/DSC099022-2.jpg\" alt=\"Mariachi Guzm\u00e1n\" loading=\"lazy\">\n                <\/div>\n\n                <div class=\"mg-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/DSC00067.jpg\" alt=\"Mariachi Guzm\u00e1n\" loading=\"lazy\">\n                <\/div>\n              \n                              <div class=\"mg-slide\">\n                    <img \nsrc=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/DSC01701.jpg\" alt=\"Mariachi Guzm\u00e1n\" loading=\"lazy\">\n                <\/div>\n              \n                <div class=\"mg-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/fotos-varias-192.jpg\" alt=\"Mariachi Guzm\u00e1n\" loading=\"lazy\">\n                <\/div>\n\n                <div class=\"mg-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/fotos-varias-62.jpg\" alt=\"Mariachi Guzm\u00e1n\" loading=\"lazy\">\n                <\/div>\n\n                <div class=\"mg-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/fotos1.jpg\" alt=\"Mariachi Guzm\u00e1n\" loading=\"lazy\">\n                <\/div>\n\n                <div class=\"mg-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/DSC099552.jpg\" alt=\"Mariachi Guzm\u00e1n\" loading=\"lazy\">\n                <\/div>\n          \n                <div class=\"mg-slide\">\n                    <img \nsrc=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/traje-vino-tinto-2.jpg\" alt=\"Mariachi Guzm\u00e1n\" loading=\"lazy\">\n                <\/div>\n          \n            <\/div>\n\n        <\/div>\n\n        <!-- FLECHA DERECHA -->\n        <button class=\"mg-arrow mg-next\" aria-label=\"Siguiente\">\n            <svg viewBox=\"0 0 24 24\">\n                <path d=\"M9 18l6-6-6-6\"\/>\n            <\/svg>\n        <\/button>\n\n    <\/div>\n\n<\/div>\n\n\n<!-- ======================================================\n     LIGHTBOX\n======================================================= -->\n\n<div class=\"mg-lightbox\">\n\n    <div class=\"mg-lightbox-bg\"><\/div>\n\n    <button class=\"mg-lightbox-close\" aria-label=\"Cerrar\">\n        \u00d7\n    <\/button>\n\n    <button class=\"mg-lightbox-arrow mg-lightbox-prev\" aria-label=\"Anterior\">\n        <svg viewBox=\"0 0 24 24\">\n            <path d=\"M15 18l-6-6 6-6\"\/>\n        <\/svg>\n    <\/button>\n\n    <div class=\"mg-lightbox-content\">\n        <img decoding=\"async\" src=\"\" alt=\"Mariachi Guzm\u00e1n\">\n    <\/div>\n\n    <button class=\"mg-lightbox-arrow mg-lightbox-next\" aria-label=\"Siguiente\">\n        <svg viewBox=\"0 0 24 24\">\n            <path d=\"M9 18l6-6-6-6\"\/>\n        <\/svg>\n    <\/button>\n\n<\/div>\n\n\n<style>\n\n\/* ======================================================\n   GENERAL\n======================================================= *\/\n\n.mg-gallery{\n    width:100vw;\n\n    position:relative;\n\n    left:50%;\n    right:50%;\n\n    margin-left:-50vw;\n    margin-right:-50vw;\n\n    background:#050505;\n\n    overflow:hidden;\n\n    padding:18px 0;\n\n    box-sizing:border-box;\n\n    user-select:none;\n    -webkit-user-select:none;\n}\n\n\n.mg-gallery-inner{\n    width:100%;\n    position:relative;\n}\n\n\n.mg-slider{\n    width:100%;\n\n    overflow:hidden;\n\n    position:relative;\n\n    touch-action:pan-y;\n\n    cursor:grab;\n}\n\n\n.mg-slider:active{\n    cursor:grabbing;\n}\n\n\n\/* ======================================================\n   DEGRADADOS\n======================================================= *\/\n\n.mg-slider:before,\n.mg-slider:after{\n    content:\"\";\n\n    position:absolute;\n\n    top:0;\n    bottom:0;\n\n    width:90px;\n\n    z-index:4;\n\n    pointer-events:none;\n}\n\n\n.mg-slider:before{\n    left:0;\n\n    background:linear-gradient(\n        90deg,\n        rgba(0,0,0,.75),\n        rgba(0,0,0,0)\n    );\n}\n\n\n.mg-slider:after{\n    right:0;\n\n    background:linear-gradient(\n        -90deg,\n        rgba(0,0,0,.75),\n        rgba(0,0,0,0)\n    );\n}\n\n\n\/* ======================================================\n   TRACK\n======================================================= *\/\n\n.mg-track{\n    display:flex;\n\n    align-items:stretch;\n\n    width:max-content;\n\n    will-change:transform;\n\n    transform:translate3d(0,0,0);\n}\n\n\n\/* ======================================================\n   FOTOS\n======================================================= *\/\n\n.mg-slide{\n    width:24vw;\n\n    flex:0 0 24vw;\n\n    height:clamp(300px,31vw,450px);\n\n    padding:5px;\n\n    box-sizing:border-box;\n\n    position:relative;\n\n    overflow:hidden;\n\n    cursor:pointer;\n\n    -webkit-user-drag:none;\n}\n\n\n.mg-slide img{\n    width:100%;\n    height:100%;\n\n    display:block;\n\n    object-fit:cover;\n    object-position:center;\n\n    pointer-events:none;\n\n    -webkit-user-drag:none;\n\n    transition:\n        transform .8s cubic-bezier(.2,.8,.2,1),\n        filter .6s ease,\n        opacity .6s ease;\n\n    filter:brightness(.84);\n}\n\n\n.mg-slide:hover img{\n    transform:scale(1.045);\n\n    filter:brightness(1.06);\n}\n\n\n.mg-slide:after{\n    content:\"\";\n\n    position:absolute;\n\n    left:5px;\n    right:5px;\n    top:5px;\n    bottom:5px;\n\n    pointer-events:none;\n\n    box-shadow:\n        inset 0 0 30px rgba(0,0,0,.18);\n}\n\n\n\/* ======================================================\n   FLECHAS SLIDER\n======================================================= *\/\n\n.mg-arrow{\n    position:absolute;\n\n    top:50%;\n\n    transform:translateY(-50%);\n\n    width:52px;\n    height:52px;\n\n    border:none;\n\n    border-radius:50%;\n\n    background:rgba(0,0,0,.65);\n\n    backdrop-filter:blur(10px);\n    -webkit-backdrop-filter:blur(10px);\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    padding:0;\n\n    cursor:pointer;\n\n    z-index:20;\n\n    transition:\n        background .3s ease,\n        transform .3s ease;\n}\n\n\n.mg-arrow svg{\n    width:25px;\n    height:25px;\n\n    fill:none;\n\n    stroke:#fff;\n\n    stroke-width:1.7;\n\n    stroke-linecap:round;\n    stroke-linejoin:round;\n}\n\n\n.mg-prev{\n    left:22px;\n}\n\n\n.mg-next{\n    right:22px;\n}\n\n\n.mg-arrow:hover{\n    background:rgba(255,255,255,.17);\n\n    transform:\n        translateY(-50%)\n        scale(1.08);\n}\n\n\n\/* ======================================================\n   LIGHTBOX\n======================================================= *\/\n\n.mg-lightbox{\n    position:fixed;\n\n    inset:0;\n\n    width:100%;\n    height:100%;\n\n    z-index:9999999;\n\n    display:flex;\n\n    justify-content:center;\n    align-items:center;\n\n    opacity:0;\n\n    visibility:hidden;\n\n    cursor:zoom-out;\n\n    transition:\n        opacity .4s ease,\n        visibility .4s ease;\n}\n\n\n.mg-lightbox.mg-open{\n    opacity:1;\n    visibility:visible;\n}\n\n\n.mg-lightbox-bg{\n    position:absolute;\n\n    inset:0;\n\n    background:rgba(0,0,0,.94);\n\n    backdrop-filter:blur(12px);\n    -webkit-backdrop-filter:blur(12px);\n\n    cursor:zoom-out;\n}\n\n\n\/* ======================================================\n   CONTENEDOR FOTO POPUP\n======================================================= *\/\n\n.mg-lightbox-content{\n    position:relative;\n\n    z-index:4;\n\n    width:88vw;\n    height:88vh;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    transform:scale(.92);\n\n    opacity:0;\n\n    cursor:zoom-out;\n\n    transition:\n        transform .5s cubic-bezier(.2,.8,.2,1),\n        opacity .4s ease;\n}\n\n\n.mg-lightbox.mg-open .mg-lightbox-content{\n    transform:scale(1);\n    opacity:1;\n}\n\n\n\/* LA FOTO NO CIERRA EL POPUP *\/\n\n.mg-lightbox-content img{\n    display:block;\n\n    max-width:100%;\n    max-height:100%;\n\n    width:auto;\n    height:auto;\n\n    object-fit:contain;\n\n    box-shadow:\n        0 30px 100px rgba(0,0,0,.7);\n\n    cursor:default;\n\n    transition:\n        opacity .25s ease,\n        transform .35s ease;\n}\n\n\n\/* ======================================================\n   BOT\u00d3N X\n======================================================= *\/\n\n.mg-lightbox-close{\n    position:absolute;\n\n    top:20px;\n    right:28px;\n\n    z-index:20;\n\n    width:52px;\n    height:52px;\n\n    border:none;\n\n    border-radius:50%;\n\n    background:rgba(255,255,255,.1);\n\n    color:#fff;\n\n    font-size:36px;\n\n    font-family:Arial,sans-serif;\n\n    cursor:pointer;\n\n    line-height:1;\n\n    transition:.3s ease;\n}\n\n\n.mg-lightbox-close:hover{\n    background:#fff;\n\n    color:#000;\n\n    transform:rotate(90deg);\n}\n\n\n\/* ======================================================\n   FLECHAS LIGHTBOX\n======================================================= *\/\n\n.mg-lightbox-arrow{\n    position:absolute;\n\n    top:50%;\n\n    transform:translateY(-50%);\n\n    z-index:20;\n\n    width:55px;\n    height:55px;\n\n    border-radius:50%;\n\n    border:1px solid rgba(255,255,255,.18);\n\n    background:rgba(255,255,255,.08);\n\n    backdrop-filter:blur(8px);\n    -webkit-backdrop-filter:blur(8px);\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    cursor:pointer;\n\n    transition:.3s ease;\n}\n\n\n.mg-lightbox-arrow svg{\n    width:27px;\n    height:27px;\n\n    fill:none;\n\n    stroke:#fff;\n\n    stroke-width:1.5;\n\n    stroke-linecap:round;\n    stroke-linejoin:round;\n}\n\n\n.mg-lightbox-prev{\n    left:30px;\n}\n\n\n.mg-lightbox-next{\n    right:30px;\n}\n\n\n.mg-lightbox-arrow:hover{\n    background:#fff;\n\n    transform:\n        translateY(-50%)\n        scale(1.08);\n}\n\n\n.mg-lightbox-arrow:hover svg{\n    stroke:#000;\n}\n\n\n\/* ======================================================\n   TABLET GRANDE\n======================================================= *\/\n\n@media(max-width:1200px){\n\n    .mg-slide{\n        width:30vw;\n        flex-basis:30vw;\n\n        height:400px;\n    }\n\n}\n\n\n\/* ======================================================\n   TABLET\n======================================================= *\/\n\n@media(max-width:767px){\n\n    .mg-gallery{\n        padding:10px 0;\n    }\n\n\n    .mg-slide{\n        width:60vw;\n        flex-basis:60vw;\n\n        height:440px;\n\n        padding:4px;\n    }\n\n\n    .mg-slider:before,\n    .mg-slider:after{\n        width:40px;\n    }\n\n\n    .mg-arrow{\n        width:44px;\n        height:44px;\n    }\n\n\n    .mg-prev{\n        left:12px;\n    }\n\n\n    .mg-next{\n        right:12px;\n    }\n\n}\n\n\n\/* ======================================================\n   MOBILE - 1 FOTO\n======================================================= *\/\n\n@media(max-width:520px){\n\n    .mg-gallery{\n        padding:5px 0;\n    }\n\n\n    .mg-slider{\n        touch-action:pan-y;\n    }\n\n\n    .mg-slide{\n        width:100vw;\n\n        min-width:100vw;\n        max-width:100vw;\n\n        flex:0 0 100vw;\n\n        height:520px;\n\n        padding:5px 12px;\n    }\n\n\n    .mg-slide img{\n        border-radius:3px;\n    }\n\n\n    .mg-slider:before,\n    .mg-slider:after{\n        width:25px;\n    }\n\n\n    .mg-arrow{\n        width:43px;\n        height:43px;\n\n        background:rgba(0,0,0,.72);\n    }\n\n\n    .mg-prev{\n        left:20px;\n    }\n\n\n    .mg-next{\n        right:20px;\n    }\n\n\n    .mg-lightbox-content{\n        width:94vw;\n        height:82vh;\n    }\n\n\n    .mg-lightbox-close{\n        width:45px;\n        height:45px;\n\n        top:14px;\n        right:14px;\n\n        font-size:30px;\n    }\n\n\n    .mg-lightbox-arrow{\n        width:42px;\n        height:42px;\n\n        background:rgba(0,0,0,.65);\n    }\n\n\n    .mg-lightbox-prev{\n        left:10px;\n    }\n\n\n    .mg-lightbox-next{\n        right:10px;\n    }\n\n}\n\n\nbody.mg-no-scroll{\n    overflow:hidden !important;\n}\n\n<\/style>\n\n\n<script>\n\ndocument.addEventListener(\"DOMContentLoaded\", function(){\n\n    const gallery =\n        document.querySelector(\".mg-gallery\");\n\n    if(!gallery) return;\n\n\n    const slider =\n        gallery.querySelector(\".mg-slider\");\n\n\n    const track =\n        gallery.querySelector(\".mg-track\");\n\n\n    const prevBtn =\n        gallery.querySelector(\".mg-prev\");\n\n\n    const nextBtn =\n        gallery.querySelector(\".mg-next\");\n\n\n    \/* ==================================================\n       FOTOS ORIGINALES\n    ================================================== *\/\n\n    const originalSlides =\n        Array.from(\n            track.querySelectorAll(\".mg-slide\")\n        );\n\n\n    const imageSources =\n        originalSlides.map(\n            slide =>\n            slide.querySelector(\"img\").src\n        );\n\n\n    const totalSlides =\n        originalSlides.length;\n\n\n    \/* ==================================================\n       CLONAR PARA LOOP INFINITO\n    ================================================== *\/\n\n    originalSlides.forEach(function(slide){\n\n        const clone =\n            slide.cloneNode(true);\n\n\n        clone.classList.add(\n            \"mg-clone\"\n        );\n\n\n        track.appendChild(\n            clone\n        );\n\n    });\n\n\n    \/* ==================================================\n       VARIABLES\n    ================================================== *\/\n\n    let position = 0;\n\n    \/*\n     * 20% m\u00e1s r\u00e1pido\n     *\/\n    const speed = 0.54;\n\n\n    let paused = false;\n\n    let dragging = false;\n\n    let moved = false;\n\n    let startX = 0;\n\n    let startPosition = 0;\n\n    let dragDistance = 0;\n\n    let snapping = false;\n\n\n    \/* ==================================================\n       DIMENSIONES\n    ================================================== *\/\n\n    function getSlideWidth(){\n\n        return originalSlides[0]\n            .getBoundingClientRect()\n            .width;\n    }\n\n\n    function getOriginalWidth(){\n\n        return getSlideWidth()\n            * totalSlides;\n    }\n\n\n    \/* ==================================================\n       NORMALIZAR LOOP\n    ================================================== *\/\n\n    function normalizePosition(){\n\n        const originalWidth =\n            getOriginalWidth();\n\n\n        if(\n            position <=\n            -originalWidth\n        ){\n\n            position +=\n                originalWidth;\n        }\n\n\n        if(position > 0){\n\n            position -=\n                originalWidth;\n        }\n\n    }\n\n\n    \/* ==================================================\n       RENDER\n    ================================================== *\/\n\n    function render(){\n\n        track.style.transform =\n            `translate3d(${position}px,0,0)`;\n    }\n\n\n    \/* ==================================================\n       AUTO MOVIMIENTO CONTINUO\n    ================================================== *\/\n\n    function animate(){\n\n        if(\n            !paused &&\n            !dragging &&\n            !snapping\n        ){\n\n            position -= speed;\n\n            normalizePosition();\n\n            render();\n\n        }\n\n\n        requestAnimationFrame(\n            animate\n        );\n\n    }\n\n\n    animate();\n\n\n    \/* ==================================================\n       SNAP EXACTO\n    ================================================== *\/\n\n    function snapToIndex(index){\n\n        const slideWidth =\n            getSlideWidth();\n\n\n        index =\n            ((index % totalSlides) +\n            totalSlides)\n            % totalSlides;\n\n\n        const target =\n            -(index * slideWidth);\n\n\n        snapping = true;\n\n        paused = true;\n\n\n        track.style.transition =\n            \"transform .55s cubic-bezier(.22,.75,.18,1)\";\n\n\n        position =\n            target;\n\n\n        render();\n\n\n        setTimeout(function(){\n\n            track.style.transition =\n                \"none\";\n\n\n            position =\n                target;\n\n\n            normalizePosition();\n\n            render();\n\n\n            snapping =\n                false;\n\n\n            paused =\n                false;\n\n        },560);\n\n    }\n\n\n    \/* ==================================================\n       \u00cdNDICE M\u00c1S CERCANO\n    ================================================== *\/\n\n    function getNearestIndex(){\n\n        const slideWidth =\n            getSlideWidth();\n\n\n        let index =\n            Math.round(\n                Math.abs(position)\n                \/ slideWidth\n            );\n\n\n        index =\n            index % totalSlides;\n\n\n        return index;\n    }\n\n\n    \/* ==================================================\n       SIGUIENTE\n    ================================================== *\/\n\n    nextBtn.addEventListener(\n        \"click\",\n        function(e){\n\n            e.preventDefault();\n            e.stopPropagation();\n\n\n            const slideWidth =\n                getSlideWidth();\n\n\n            let current =\n                Math.floor(\n                    Math.abs(position)\n                    \/ slideWidth\n                );\n\n\n            snapToIndex(\n                current + 1\n            );\n\n        }\n    );\n\n\n    \/* ==================================================\n       ANTERIOR\n    ================================================== *\/\n\n    prevBtn.addEventListener(\n        \"click\",\n        function(e){\n\n            e.preventDefault();\n            e.stopPropagation();\n\n\n            const slideWidth =\n                getSlideWidth();\n\n\n            let current =\n                Math.ceil(\n                    Math.abs(position)\n                    \/ slideWidth\n                );\n\n\n            snapToIndex(\n                current - 1\n            );\n\n        }\n    );\n\n\n    \/* ==================================================\n       HOVER DESKTOP\n    ================================================== *\/\n\n    gallery.addEventListener(\n        \"mouseenter\",\n        function(){\n\n            if(\n                window.matchMedia(\n                    \"(hover:hover)\"\n                ).matches\n            ){\n\n                paused = true;\n\n            }\n\n        }\n    );\n\n\n    gallery.addEventListener(\n        \"mouseleave\",\n        function(){\n\n            if(\n                window.matchMedia(\n                    \"(hover:hover)\"\n                ).matches\n            ){\n\n                paused = false;\n\n            }\n\n        }\n    );\n\n\n    \/* ==================================================\n       TOUCH START\n    ================================================== *\/\n\n    slider.addEventListener(\n        \"touchstart\",\n        function(e){\n\n            if(snapping) return;\n\n\n            dragging = true;\n\n            moved = false;\n\n            paused = true;\n\n\n            startX =\n                e.touches[0].clientX;\n\n\n            startPosition =\n                position;\n\n\n            dragDistance =\n                0;\n\n\n            track.style.transition =\n                \"none\";\n\n        },\n        {\n            passive:true\n        }\n    );\n\n\n    \/* ==================================================\n       TOUCH MOVE\n    ================================================== *\/\n\n    slider.addEventListener(\n        \"touchmove\",\n        function(e){\n\n            if(!dragging) return;\n\n\n            const currentX =\n                e.touches[0].clientX;\n\n\n            dragDistance =\n                currentX -\n                startX;\n\n\n            if(\n                Math.abs(\n                    dragDistance\n                ) > 5\n            ){\n\n                moved = true;\n\n            }\n\n\n            position =\n                startPosition +\n                dragDistance;\n\n\n            const originalWidth =\n                getOriginalWidth();\n\n\n            if(position > 0){\n\n                position -=\n                    originalWidth;\n\n\n                startPosition -=\n                    originalWidth;\n\n            }\n\n\n            if(\n                position <=\n                -originalWidth\n            ){\n\n                position +=\n                    originalWidth;\n\n\n                startPosition +=\n                    originalWidth;\n\n            }\n\n\n            render();\n\n        },\n        {\n            passive:true\n        }\n    );\n\n\n    \/* ==================================================\n       TOUCH END\n    ================================================== *\/\n\n    slider.addEventListener(\n        \"touchend\",\n        function(){\n\n            if(!dragging) return;\n\n\n            dragging = false;\n\n\n            const slideWidth =\n                getSlideWidth();\n\n\n            const threshold =\n                Math.min(\n                    slideWidth * .16,\n                    75\n                );\n\n\n            let currentIndex =\n                Math.round(\n                    Math.abs(\n                        startPosition\n                    ) \/ slideWidth\n                );\n\n\n            if(\n                dragDistance <\n                -threshold\n            ){\n\n                currentIndex += 1;\n\n            }\n\n            else if(\n                dragDistance >\n                threshold\n            ){\n\n                currentIndex -= 1;\n\n            }\n\n            else{\n\n                currentIndex =\n                    Math.round(\n                        Math.abs(\n                            position\n                        ) \/ slideWidth\n                    );\n\n            }\n\n\n            snapToIndex(\n                currentIndex\n            );\n\n\n            setTimeout(\n                function(){\n\n                    moved = false;\n\n                },\n                100\n            );\n\n        },\n        {\n            passive:true\n        }\n    );\n\n\n    \/* ==================================================\n       DRAG CON MOUSE\n    ================================================== *\/\n\n    slider.addEventListener(\n        \"mousedown\",\n        function(e){\n\n            if(snapping) return;\n\n\n            dragging = true;\n\n            moved = false;\n\n            paused = true;\n\n\n            startX =\n                e.clientX;\n\n\n            startPosition =\n                position;\n\n\n            dragDistance =\n                0;\n\n\n            track.style.transition =\n                \"none\";\n\n        }\n    );\n\n\n    window.addEventListener(\n        \"mousemove\",\n        function(e){\n\n            if(!dragging) return;\n\n\n            if(e.buttons === 0) return;\n\n\n            dragDistance =\n                e.clientX -\n                startX;\n\n\n            if(\n                Math.abs(\n                    dragDistance\n                ) > 5\n            ){\n\n                moved = true;\n\n            }\n\n\n            position =\n                startPosition +\n                dragDistance;\n\n\n            render();\n\n        }\n    );\n\n\n    window.addEventListener(\n        \"mouseup\",\n        function(){\n\n            if(!dragging) return;\n\n\n            dragging = false;\n\n\n            const slideWidth =\n                getSlideWidth();\n\n\n            const threshold =\n                Math.min(\n                    slideWidth * .16,\n                    75\n                );\n\n\n            let currentIndex =\n                Math.round(\n                    Math.abs(\n                        startPosition\n                    ) \/ slideWidth\n                );\n\n\n            if(\n                dragDistance <\n                -threshold\n            ){\n\n                currentIndex += 1;\n\n            }\n\n            else if(\n                dragDistance >\n                threshold\n            ){\n\n                currentIndex -= 1;\n\n            }\n\n            else{\n\n                currentIndex =\n                    Math.round(\n                        Math.abs(\n                            position\n                        ) \/ slideWidth\n                    );\n\n            }\n\n\n            snapToIndex(\n                currentIndex\n            );\n\n\n            setTimeout(\n                function(){\n\n                    moved = false;\n\n                },\n                100\n            );\n\n        }\n    );\n\n\n    \/* ==================================================\n       LIGHTBOX\n    ================================================== *\/\n\n    const lightbox =\n        document.querySelector(\n            \".mg-lightbox\"\n        );\n\n\n    const lightboxContent =\n        lightbox.querySelector(\n            \".mg-lightbox-content\"\n        );\n\n\n    const lightboxImg =\n        lightbox.querySelector(\n            \".mg-lightbox-content img\"\n        );\n\n\n    const closeBtn =\n        lightbox.querySelector(\n            \".mg-lightbox-close\"\n        );\n\n\n    const lightPrev =\n        lightbox.querySelector(\n            \".mg-lightbox-prev\"\n        );\n\n\n    const lightNext =\n        lightbox.querySelector(\n            \".mg-lightbox-next\"\n        );\n\n\n    const lightBg =\n        lightbox.querySelector(\n            \".mg-lightbox-bg\"\n        );\n\n\n    let currentImage =\n        0;\n\n\n    \/* ==================================================\n       ABRIR LIGHTBOX\n    ================================================== *\/\n\n    function openLightbox(index){\n\n        currentImage =\n            index;\n\n\n        lightboxImg.src =\n            imageSources[\n                currentImage\n            ];\n\n\n        lightbox.classList.add(\n            \"mg-open\"\n        );\n\n\n        document.body.classList.add(\n            \"mg-no-scroll\"\n        );\n\n\n        paused =\n            true;\n\n    }\n\n\n    \/* ==================================================\n       CERRAR LIGHTBOX\n    ================================================== *\/\n\n    function closeLightbox(){\n\n        lightbox.classList.remove(\n            \"mg-open\"\n        );\n\n\n        document.body.classList.remove(\n            \"mg-no-scroll\"\n        );\n\n\n        paused =\n            false;\n\n    }\n\n\n    \/* ==================================================\n       SIGUIENTE LIGHTBOX\n    ================================================== *\/\n\n    function nextImage(){\n\n        currentImage++;\n\n\n        if(\n            currentImage >=\n            imageSources.length\n        ){\n\n            currentImage =\n                0;\n\n        }\n\n\n        changeImage();\n\n    }\n\n\n    \/* ==================================================\n       ANTERIOR LIGHTBOX\n    ================================================== *\/\n\n    function prevImage(){\n\n        currentImage--;\n\n\n        if(\n            currentImage < 0\n        ){\n\n            currentImage =\n                imageSources.length - 1;\n\n        }\n\n\n        changeImage();\n\n    }\n\n\n    \/* ==================================================\n       TRANSICI\u00d3N LIGHTBOX\n    ================================================== *\/\n\n    function changeImage(){\n\n        lightboxImg.style.opacity =\n            \"0\";\n\n\n        lightboxImg.style.transform =\n            \"scale(.97)\";\n\n\n        setTimeout(\n            function(){\n\n                lightboxImg.src =\n                    imageSources[\n                        currentImage\n                    ];\n\n\n                lightboxImg.style.opacity =\n                    \"1\";\n\n\n                lightboxImg.style.transform =\n                    \"scale(1)\";\n\n            },\n            180\n        );\n\n    }\n\n\n    \/* ==================================================\n       CLICK FOTO DEL CARRUSEL\n    ================================================== *\/\n\n    track.addEventListener(\n        \"click\",\n        function(e){\n\n            if(moved) return;\n\n\n            const slide =\n                e.target.closest(\n                    \".mg-slide\"\n                );\n\n\n            if(!slide) return;\n\n\n            const img =\n                slide.querySelector(\n                    \"img\"\n                );\n\n\n            const src =\n                img.src;\n\n\n            const index =\n                imageSources.indexOf(\n                    src\n                );\n\n\n            openLightbox(\n                index >= 0\n                ? index\n                : 0\n            );\n\n        }\n    );\n\n\n    \/* ==================================================\n       NUEVO:\n       CLIC EN CUALQUIER ZONA FUERA DE LA FOTO\n       CIERRA EL POPUP\n    ================================================== *\/\n\n    lightbox.addEventListener(\n        \"click\",\n        function(e){\n\n            \/*\n             * Si el clic fue directamente\n             * sobre la foto:\n             * NO cerramos.\n             *\/\n\n            if(\n                e.target ===\n                lightboxImg\n            ){\n\n                return;\n\n            }\n\n\n            \/*\n             * Si el clic fue sobre\n             * alguna flecha o dentro\n             * de una flecha:\n             * NO cerramos.\n             *\/\n\n            if(\n                e.target.closest(\n                    \".mg-lightbox-arrow\"\n                )\n            ){\n\n                return;\n\n            }\n\n\n            \/*\n             * Si el clic fue sobre la X,\n             * la X tiene su propio evento.\n             *\/\n\n            if(\n                e.target.closest(\n                    \".mg-lightbox-close\"\n                )\n            ){\n\n                return;\n\n            }\n\n\n            \/*\n             * Todo lo dem\u00e1s:\n             * fondo negro, espacio superior,\n             * inferior o laterales.\n             *\/\n\n            closeLightbox();\n\n        }\n    );\n\n\n    \/* ==================================================\n       X DE CIERRE\n    ================================================== *\/\n\n    closeBtn.addEventListener(\n        \"click\",\n        function(e){\n\n            e.stopPropagation();\n\n            closeLightbox();\n\n        }\n    );\n\n\n    \/* ==================================================\n       FLECHAS POPUP\n    ================================================== *\/\n\n    lightNext.addEventListener(\n        \"click\",\n        function(e){\n\n            e.stopPropagation();\n\n            nextImage();\n\n        }\n    );\n\n\n    lightPrev.addEventListener(\n        \"click\",\n        function(e){\n\n            e.stopPropagation();\n\n            prevImage();\n\n        }\n    );\n\n\n    \/* ==================================================\n       TECLADO\n    ================================================== *\/\n\n    document.addEventListener(\n        \"keydown\",\n        function(e){\n\n            if(\n                !lightbox.classList.contains(\n                    \"mg-open\"\n                )\n            ){\n\n                return;\n\n            }\n\n\n            if(\n                e.key ===\n                \"Escape\"\n            ){\n\n                closeLightbox();\n\n            }\n\n\n            if(\n                e.key ===\n                \"ArrowRight\"\n            ){\n\n                nextImage();\n\n            }\n\n\n            if(\n                e.key ===\n                \"ArrowLeft\"\n            ){\n\n                prevImage();\n\n            }\n\n        }\n    );\n\n\n    \/* ==================================================\n       RESIZE\n    ================================================== *\/\n\n    let resizeTimer;\n\n\n    window.addEventListener(\n        \"resize\",\n        function(){\n\n            clearTimeout(\n                resizeTimer\n            );\n\n\n            resizeTimer =\n                setTimeout(\n                    function(){\n\n                        const index =\n                            getNearestIndex();\n\n\n                        const slideWidth =\n                            getSlideWidth();\n\n\n                        position =\n                            -(\n                                index *\n                                slideWidth\n                            );\n\n\n                        normalizePosition();\n\n                        render();\n\n                    },\n                    150\n                );\n\n        }\n    );\n\n});\n\n<\/script><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_4 et_pb_section et_section_regular et_flex_section\">\n<div class=\"et_pb_row_8 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_15 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_text_3 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p>Thanks to the energy, experience, and versatility of our musicians, every performance becomes an authentic and special experience. We have an extensive repertoire, a variety of voices, and the ability to adapt to <strong>weddings, birthdays, quincea\u00f1eras, serenades, and private or corporate events in Utah and Salt Lake City<\/strong>, always creating a joyful, elegant atmosphere filled with tradition.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_5 et_pb_section et_section_regular et_flex_section\">\n<div class=\"et_pb_row_9 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_16 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_image_1 et_pb_image et_pb_module et_flex_module\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/imagenfotos-mariachia-2-1.jpg\" title=\"imagenfotos-mariachia-2 (1)\" width=\"1672\" height=\"941\" srcset=\"https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/imagenfotos-mariachia-2-1.jpg 1672w, https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/imagenfotos-mariachia-2-1-1280x720.jpg 1280w, https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/imagenfotos-mariachia-2-1-980x552.jpg 980w, https:\/\/mariachiguzman.com\/wp-content\/uploads\/2026\/08\/imagenfotos-mariachia-2-1-480x270.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 1672px, 100vw\" class=\"wp-image-220\" \/><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_6 et_pb_section et_section_regular et_flex_section\">\n<div class=\"et_pb_row_10 et_pb_row et_flex_row et_animated\">\n<div class=\"et_pb_column_17 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_text_4 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\" data-et-mv-hidden-phone=\"true\"><h2 class=\"gradient-title\">\u00a0MARIACHI SERENADES IN UTAH<\/h2>\n<\/div><\/div>\n\n<div class=\"et_pb_text_5 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p>Our <strong>mariachi service in Utah<\/strong> is designed for those looking for quality, professionalism, and a performance that truly connects with their guests. You can choose the songs that best represent your occasion and enjoy a personalized show, ideal for creating unforgettable moments in <strong>Salt Lake City and the different service areas we cover throughout Utah.<\/strong><\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_code_4 et_pb_code et_pb_text_align_center et_pb_module\"><div class=\"et_pb_code_inner\"><div class=\"luxury-whatsapp-button\">\n  <a href=\"https:\/\/wa.me\/18014320581\" target=\"_blank\" rel=\"noopener\">\n    Get a Quote Now\n  <\/a>\n<\/div>\n\n<style>\n  .luxury-whatsapp-button {\n    display: inline-flex;\n  }\n\n  .luxury-whatsapp-button a {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 18px 48px;\n    border-radius: 999px;\n    text-decoration: none;\n    text-transform: uppercase;\n    font-family: \"Playfair Display\", Georgia, serif;\n    font-size: 28px;\n    font-weight: 700;\n    letter-spacing: 0.04em;\n    color: #3d3d3d;\n    overflow: hidden;\n    background:\n      linear-gradient(135deg, #f8fbff 0%, #cfd8df 22%, #ffffff 42%, #9faab3 58%, #edf3f7 78%, #b7c1c9 100%);\n    border: 4px solid #2b92a3;\n    box-shadow:\n      inset 0 2px 6px rgba(255,255,255,0.95),\n      inset 0 -5px 10px rgba(70,90,100,0.28),\n      0 0 0 1px rgba(255,255,255,0.22),\n      0 12px 28px rgba(43,146,163,0.32);\n    animation: luxuryPulse 3.8s ease-in-out infinite;\n  }\n\n  .luxury-whatsapp-button a::before {\n    content: \"\";\n    position: absolute;\n    inset: -60%;\n    background: linear-gradient(\n      115deg,\n      transparent 35%,\n      rgba(255,255,255,0.9) 48%,\n      rgba(255,255,255,0.35) 52%,\n      transparent 65%\n    );\n    transform: translateX(-65%) rotate(8deg);\n    animation: luxuryShine 3.8s ease-in-out infinite;\n  }\n\n  .luxury-whatsapp-button a::after {\n    content: \"\";\n    position: absolute;\n    inset: 5px;\n    border-radius: inherit;\n    border: 1px solid rgba(255,255,255,0.65);\n    pointer-events: none;\n  }\n\n  .luxury-whatsapp-button a:hover {\n    transform: translateY(-2px) scale(1.015);\n    box-shadow:\n      inset 0 2px 7px rgba(255,255,255,1),\n      inset 0 -5px 12px rgba(70,90,100,0.3),\n      0 16px 36px rgba(43,146,163,0.45);\n  }\n\n  .luxury-whatsapp-button a {\n    transition: transform 0.35s ease, box-shadow 0.35s ease;\n  }\n\n  @keyframes luxuryShine {\n    0% {\n      transform: translateX(-70%) rotate(8deg);\n      opacity: 0;\n    }\n    18% {\n      opacity: 1;\n    }\n    45% {\n      transform: translateX(70%) rotate(8deg);\n      opacity: 0.9;\n    }\n    100% {\n      transform: translateX(70%) rotate(8deg);\n      opacity: 0;\n    }\n  }\n\n  @keyframes luxuryPulse {\n    0%, 100% {\n      filter: brightness(1);\n    }\n    50% {\n      filter: brightness(1.08);\n    }\n  }\n\n  @media (max-width: 480px) {\n    .luxury-whatsapp-button a {\n      padding: 15px 34px;\n      font-size: 22px;\n    }\n  }\n<\/style><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"rs_blank_template":"","rs_page_bg_color":"","slide_template_v7":"","footnotes":""},"class_list":["post-303","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mariachiguzman.com\/en\/wp-json\/wp\/v2\/pages\/303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mariachiguzman.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mariachiguzman.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mariachiguzman.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mariachiguzman.com\/en\/wp-json\/wp\/v2\/comments?post=303"}],"version-history":[{"count":4,"href":"https:\/\/mariachiguzman.com\/en\/wp-json\/wp\/v2\/pages\/303\/revisions"}],"predecessor-version":[{"id":310,"href":"https:\/\/mariachiguzman.com\/en\/wp-json\/wp\/v2\/pages\/303\/revisions\/310"}],"wp:attachment":[{"href":"https:\/\/mariachiguzman.com\/en\/wp-json\/wp\/v2\/media?parent=303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}