{"id":12583,"date":"2025-03-12T10:07:04","date_gmt":"2025-03-12T09:07:04","guid":{"rendered":"https:\/\/indooptical.com\/equipment\/"},"modified":"2025-03-12T10:07:04","modified_gmt":"2025-03-12T09:07:04","slug":"equipment","status":"publish","type":"page","link":"https:\/\/indooptical.com\/cl\/equipment\/","title":{"rendered":"Equipment"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row full_width=&#8221;stretch_row_content_no_spaces&#8221;][vc_column]<div class='indo-header-wrapper'>\r\n                    <div class='header-image header-background-6939966' style='background-image: url(https:\/\/indooptical.com\/wp-content\/uploads\/2025\/01\/equipos-1.svg);'><\/div><div class='header-overlay'><\/div><div class='header-content header_content_new'><div class='text-wrapper'><p class='header-title title-main'>Equipment<\/p><p class='header-subtitle'>The latest technology in equipment<br \/>\nfor all your needs<\/p><\/div><\/div><\/div>[\/vc_column][\/vc_row][vc_row][vc_column]<div class=\"spacer\"><\/div><div class='spacer display-none-mobile' style='height: 5vh;'><\/div><div class='spacer display-none-desktop' style='height: 25px;'><\/div>[vc_tta_tabs active_section=&#8221;1&#8243; el_class=&#8221;pestana_indo&#8221;][vc_tta_section title=&#8221;Diagnosis&#8221; tab_id=&#8221;1742229521728-2810c47d-d145&#8243;]<div class=\"spacer\"><\/div><div class='spacer display-none-mobile' style='height: 4vh;'><\/div><div class='spacer display-none-desktop' style='height: 20px;'><\/div>\r\n            <div class=\"category-layout\" id=\"category_list_69fb5bda735a7\">\r\n                <!-- Columna de Subcategor\u00edas -->\r\n                <div class=\"category-sidebar\">\r\n                    <ul class=\"subcategory-list\">\r\n                                            <\/ul>\r\n                <\/div>\r\n\r\n                <!-- Columna de Productos -->\r\n                <div class=\"category-products\">\r\n                    <div id=\"product-list\">\r\n                                            <\/div>\r\n                    <div id=\"product-detail\" style=\"display: none;\">\r\n                        <!-- Aqu\u00ed se cargar\u00e1 el detalle del producto -->\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <script>\r\n                    jQuery(document).ready(function($) {\r\n                        var categoryID = \"category_list_69fb5bda735a7\";\r\n\r\n                        \/\/ Asegurar que las subcategor\u00edas carguen y seleccionar la primera autom\u00e1ticamente\r\n                        function selectFirstSubcategory() {\r\n                            var firstSubcategory = $(\"#\" + categoryID + \" .subcategory-link:first\");\r\n                            \r\n                            if (firstSubcategory.length > 0) {\r\n                                firstSubcategory.addClass(\"subcategory_active\"); \/\/ Agrega la clase activa\r\n                                firstSubcategory.trigger(\"click\"); \/\/ Simula un clic para cargar los productos\r\n                            }\r\n                        }\r\n\r\n                        \/\/ Ejecutar la selecci\u00f3n despu\u00e9s de que las subcategor\u00edas cargan\r\n                        setTimeout(selectFirstSubcategory, 100);\r\n                        \/\/ Evento para cargar productos de una categor\u00eda\r\n                        $(\".vc_tta-tab\").on(\"click\", function() {\r\n                            if (!$(\"#\" + categoryID).hasClass(\"loaded\")) {\r\n                                $(\"#\" + categoryID).addClass(\"loaded\"); \/\/ Marcar como cargado\r\n                                selectFirstSubcategory(); \r\n                            }\r\n                        });\r\n                        $(\"#\" + categoryID).on(\"click\", \".subcategory-link\", function(e) {\r\n                            e.preventDefault();\r\n                            var categorySlug = $(this).data(\"category-slug\");\r\n\r\n                            $(\"#\" + categoryID + \" #product-detail\").hide();\r\n\r\n                            $(\"#\" + categoryID + \" .subcategory-link\").removeClass(\"subcategory_active\");\r\n                            $(this).addClass(\"subcategory_active\");\r\n\r\n                            $.ajax({\r\n                                type: \"POST\",\r\n                                url: \"https:\/\/indooptical.com\/wp-admin\/admin-ajax.php\",\r\n                                data: { action: \"load_products\", category_slug: categorySlug },\r\n                                beforeSend: function() {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(`<svg class=\"loading\"viewBox=\"25 25 50 50\">\r\n                                        <circle r=\"20\" cy=\"50\" cx=\"50\"><\/circle>\r\n                                    <\/svg>`).show();;\r\n                                },\r\n                                success: function(response) {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(response);\r\n                                },\r\n                                error: function() {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(\"<p>Error al cargar los productos.<\/p>\");\r\n                                }\r\n                            });\r\n                        });\r\n\r\n                        \/\/ Evento para mostrar los detalles del producto\r\n                        $(\"#\" + categoryID).on(\"click\", \".product-item\", function(e) {\r\n                            e.preventDefault();\r\n                            var productID = $(this).data(\"product-id\");\r\n\r\n                            $.ajax({\r\n                                type: \"POST\",\r\n                                url: \"https:\/\/indooptical.com\/wp-admin\/admin-ajax.php\",\r\n                                data: {\r\n                                    action: \"load_product_detail\",\r\n                                    product_id: productID\r\n                                },\r\n                                beforeSend: function() {\r\n                                     $(\"#\" + categoryID + \" #product-detail\").html(`<svg class=\"loading\"viewBox=\"25 25 50 50\">\r\n                                        <circle r=\"20\" cy=\"50\" cx=\"50\"><\/circle>\r\n                                    <\/svg>`).show();\r\n                                    $(\"#\" + categoryID + \" #product-list\").hide(); \/\/ Ocultar la lista de productos\r\n                                },\r\n                                success: function(response) {\r\n                                    $(\"#\" + categoryID + \" #product-detail\").html(response);\r\n                                },\r\n                                error: function() {\r\n                                    $(\"#\" + categoryID + \" #product-detail\").html(\"<p>Error al cargar el producto.<\/p>\");\r\n                                }\r\n                            });\r\n                        });\r\n                        \/\/ Bot\u00f3n para volver a la lista de productos\r\n                        $(document).on(\"click\", \"#back-to-products\", function(e) {\r\n                            e.preventDefault();\r\n                            $(\"#\" + categoryID + \" #product-detail\").hide();\r\n                            $(\"#\" + categoryID + \" #product-list\").show();\r\n                        });\r\n\r\n                        $(document).on(\"click\", \".thumbnail\", function() {\r\n                            var newImage = $(this).attr(\"data-large\"); \/\/ Obtener imagen grande\r\n                            $(\"#main-product-image\").attr(\"src\", newImage);\r\n                        });\r\n\r\n\r\n                        function updateGradientVisibility($content) {\r\n                            const scrollTop = $content.scrollTop();\r\n                            const scrollHeight = $content[0].scrollHeight;\r\n                            const clientHeight = $content[0].clientHeight;\r\n\r\n                            \/\/ Si est\u00e1 arriba del todo\r\n                            if (scrollTop <= 0) {\r\n                                $content.addClass(\"at-top\");\r\n                            } else {\r\n                                $content.removeClass(\"at-top\");\r\n                            }\r\n\r\n                            \/\/ Si est\u00e1 abajo del todo\r\n                            if (scrollTop + clientHeight >= scrollHeight - 1) {\r\n                                $content.addClass(\"at-bottom\");\r\n                            } else {\r\n                                $content.removeClass(\"at-bottom\");\r\n                            }\r\n                        }\r\n\r\n                        \/\/ Scroll hacia abajo \r\n                        $(document).on(\"click\", \".arrow-down\", function () {\r\n                            let content = $(this).closest(\".description-container\").find(\".description-content\");\r\n                            content.stop().animate({\r\n                                scrollTop: content.scrollTop() + 50 \r\n                            }, 200, function () {\r\n                                updateGradientVisibility(content);\r\n                            });\r\n                        });\r\n\r\n                        \/\/ Scroll hacia arriba\r\n                        $(document).on(\"click\", \".arrow-up\", function () {\r\n                            let content = $(this).closest(\".description-container\").find(\".description-content\");\r\n                            content.stop().animate({\r\n                                scrollTop: content.scrollTop() - 70 \r\n                            }, 200, function () {\r\n                                updateGradientVisibility(content);\r\n                            });\r\n                        });\r\n                        \r\n                        \r\n\r\n                        \/\/ Ejecutar cuando haya scroll dentro del contenido\r\n                        $(document).on(\"scroll\", \".description-content\", function () {\r\n                            updateGradientVisibility($(this));\r\n                        });\r\n\r\n                        \/\/ Ejecutar tambi\u00e9n justo despu\u00e9s de mostrar el detalle del producto\r\n                        $(document).on(\"click\", \".product-item\", function () {\r\n                            setTimeout(function () {\r\n                                $(\".description-content\").each(function () {\r\n                                    updateGradientVisibility($(this));\r\n                                });\r\n                            }, 300); \/\/ espera a que se cargue el contenido\r\n                        });\r\n                        $(\".description-content\").each(function () {\r\n                            updateGradientVisibility($(this));\r\n                        });\r\n\r\n\r\n\r\n\r\n                    });\r\n\r\n                <\/script>\r\n\r\n            <\/div>\r\n\r\n            <style>\r\n                .category-layout {\r\n                    display: flex;\r\n                    gap: 20px;\r\n                }\r\n                .category-sidebar {\r\n                    width: 25%;\r\n                    padding-right: 15px;\r\n                }\r\n                .subcategory-list {\r\n                    list-style: none;\r\n                    padding: 0;\r\n                    margin: 0px !important;\r\n                }\r\n                .subcategory-list li {\r\n                    margin: 10px 0;\r\n                }\r\n                .subcategory-list a.subcategory-link {\r\n                    font-weight: 400 !important;\r\n                }\r\n                a.subcategory-link {\r\n                    text-align: start;\r\n                }\r\n                ul.subcategory-list{\r\n                    display: flex;\r\n                    flex-direction: column;\r\n\r\n                }\r\n                .subcategory-link {\r\n                    cursor: pointer;\r\n                    text-decoration: none;\r\n                    color:var(--color-secondary-grey);\r\n                    display: block;\r\n                    transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;\r\n                }\r\n                .subcategory-list .subcategory-link:hover, .subcategory-list .subcategory-link:focus{\r\n                    color: var(--color-primary-green) !important;\r\n                    font-size: 19px !important;\r\n                    font-weight: 600 !important;\r\n                    \r\n                }\r\n                .subcategory-list a.subcategory_active {\r\n                    color: var(--color-primary-green) !important;\r\n                    font-weight: 600 !important;\r\n                }\r\n                .category-products {\r\n                    width: 75%;\r\n                }\r\n                .product-grid {\r\n                    display: grid;\r\n                    grid-template-columns: repeat(3, 1fr);\r\n                    gap: 20px;\r\n                }\r\n                .product-item {\r\n                    width: 90%;\r\n                    height: 35vh;\r\n                    text-align: center;\r\n                    border: 1px solid #ddd;\r\n                    padding: 10px;\r\n                }\r\n                .product-item img {\r\n                    max-width: 90%;\r\n                    height: auto;\r\n                }\r\n                .title_product {\r\n                    text-align: start !important;\r\n                    font-weight: 500;\r\n                }\r\n                .product-item img {\r\n                    width: auto !important;\r\n                    object-fit: cover;\r\n                }\r\n                .product-item img {\r\n                    height: 25vh !important;\r\n                    padding: 15px !important;\r\n                }\r\n                .product-item{\r\n                    padding: 15px !important;\r\n                }\r\n                .product-grid{\r\n                    display: grid !important;\r\n                    grid-template-columns: repeat(3, 1fr);\r\n                    gap: 20px;\r\n                }\r\n                .product-item {\r\n                    transition: transform 0.4s;\r\n                }\r\n\r\n                .product-item:hover img {\r\n                    transform: scale(1.1);\r\n                    transition: transform 0.4s;\r\n                }\r\n\r\n                .product-item:hover .title_product {\r\n                    font-weight: 700;\r\n                    transition: transform 0.4s;\r\n                }\r\n                a#back-to-products{\r\n                    color: var(--color-secondary-grey);\r\n                    font-weight: 500;\r\n                    text-decoration: none;\r\n                    font-size: 20px;\r\n                }\r\n                #product-info{\r\n                    gap: 20px;\r\n                }\r\n\r\n\r\n                \/*----------test----------*\/\r\n                @media screen and (max-width: 768px) {\r\n                    .category-layout {\r\n                        flex-direction: column;\r\n                    }\r\n\r\n                    .category-sidebar {\r\n                        width: 100%;\r\n                        padding-right: 0;\r\n                        overflow-x: auto;\r\n                        white-space: nowrap;\r\n                        margin-bottom: 20px;\r\n                    }\r\n\r\n                    .subcategory-list {\r\n                        flex-direction: row;\r\n                        gap: 10px;\r\n                        display: flex;\r\n                    }\r\n\r\n                    .subcategory-list li {\r\n                        margin: 0;\r\n                    }\r\n\r\n                    .subcategory-link {\r\n                        padding: 10px 15px;\r\n                        background-color: #f2f2f2;\r\n                        border-radius: 5px;\r\n                        white-space: nowrap;\r\n                        display: inline-block;\r\n                    }\r\n\r\n                    .subcategory-list .subcategory-link:hover,\r\n                    .subcategory-list .subcategory-link.subcategory_active {\r\n                        background-color: var(--color-primary-green);\r\n                        color: white !important;\r\n                    }\r\n\r\n                    .category-products {\r\n                        width: 100%;\r\n                    }\r\n\r\n                    .product-grid {\r\n                        grid-template-columns: repeat(2, 1fr);\r\n                    }\r\n\r\n                    .product-item img {\r\n                        height: auto !important;\r\n                    }\r\n                }\r\n\r\n                @media screen and (max-width: 480px) {\r\n                    .product-grid {\r\n                        grid-template-columns: 1fr;\r\n                    }\r\n                }\r\n\r\n            <\/style>\r\n\r\n            [\/vc_tta_section][vc_tta_section title=&#8221;Cabinet&#8221; tab_id=&#8221;1741778832146-157f1f7c-75b9&#8243;]<div class=\"ult-spacer spacer-69fb5bda755a6\" data-id=\"69fb5bda755a6\" data-height=\"40\" data-height-mobile=\"40\" data-height-tab=\"40\" data-height-tab-portrait=\"\" data-height-mobile-landscape=\"\" style=\"clear:both;display:block;\"><\/div>\r\n            <div class=\"category-layout\" id=\"category_list_69fb5bda755e5\">\r\n                <!-- Columna de Subcategor\u00edas -->\r\n                <div class=\"category-sidebar\">\r\n                    <ul class=\"subcategory-list\">\r\n                                            <\/ul>\r\n                <\/div>\r\n\r\n                <!-- Columna de Productos -->\r\n                <div class=\"category-products\">\r\n                    <div id=\"product-list\">\r\n                                            <\/div>\r\n                    <div id=\"product-detail\" style=\"display: none;\">\r\n                        <!-- Aqu\u00ed se cargar\u00e1 el detalle del producto -->\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <script>\r\n                    jQuery(document).ready(function($) {\r\n                        var categoryID = \"category_list_69fb5bda755e5\";\r\n\r\n                        \/\/ Asegurar que las subcategor\u00edas carguen y seleccionar la primera autom\u00e1ticamente\r\n                        function selectFirstSubcategory() {\r\n                            var firstSubcategory = $(\"#\" + categoryID + \" .subcategory-link:first\");\r\n                            \r\n                            if (firstSubcategory.length > 0) {\r\n                                firstSubcategory.addClass(\"subcategory_active\"); \/\/ Agrega la clase activa\r\n                                firstSubcategory.trigger(\"click\"); \/\/ Simula un clic para cargar los productos\r\n                            }\r\n                        }\r\n\r\n                        \/\/ Ejecutar la selecci\u00f3n despu\u00e9s de que las subcategor\u00edas cargan\r\n                        setTimeout(selectFirstSubcategory, 100);\r\n                        \/\/ Evento para cargar productos de una categor\u00eda\r\n                        $(\".vc_tta-tab\").on(\"click\", function() {\r\n                            if (!$(\"#\" + categoryID).hasClass(\"loaded\")) {\r\n                                $(\"#\" + categoryID).addClass(\"loaded\"); \/\/ Marcar como cargado\r\n                                selectFirstSubcategory(); \r\n                            }\r\n                        });\r\n                        $(\"#\" + categoryID).on(\"click\", \".subcategory-link\", function(e) {\r\n                            e.preventDefault();\r\n                            var categorySlug = $(this).data(\"category-slug\");\r\n\r\n                            $(\"#\" + categoryID + \" #product-detail\").hide();\r\n\r\n                            $(\"#\" + categoryID + \" .subcategory-link\").removeClass(\"subcategory_active\");\r\n                            $(this).addClass(\"subcategory_active\");\r\n\r\n                            $.ajax({\r\n                                type: \"POST\",\r\n                                url: \"https:\/\/indooptical.com\/wp-admin\/admin-ajax.php\",\r\n                                data: { action: \"load_products\", category_slug: categorySlug },\r\n                                beforeSend: function() {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(`<svg class=\"loading\"viewBox=\"25 25 50 50\">\r\n                                        <circle r=\"20\" cy=\"50\" cx=\"50\"><\/circle>\r\n                                    <\/svg>`).show();;\r\n                                },\r\n                                success: function(response) {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(response);\r\n                                },\r\n                                error: function() {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(\"<p>Error al cargar los productos.<\/p>\");\r\n                                }\r\n                            });\r\n                        });\r\n\r\n                        \/\/ Evento para mostrar los detalles del producto\r\n                        $(\"#\" + categoryID).on(\"click\", \".product-item\", function(e) {\r\n                            e.preventDefault();\r\n                            var productID = $(this).data(\"product-id\");\r\n\r\n                            $.ajax({\r\n                                type: \"POST\",\r\n                                url: \"https:\/\/indooptical.com\/wp-admin\/admin-ajax.php\",\r\n                                data: {\r\n                                    action: \"load_product_detail\",\r\n                                    product_id: productID\r\n                                },\r\n                                beforeSend: function() {\r\n                                     $(\"#\" + categoryID + \" #product-detail\").html(`<svg class=\"loading\"viewBox=\"25 25 50 50\">\r\n                                        <circle r=\"20\" cy=\"50\" cx=\"50\"><\/circle>\r\n                                    <\/svg>`).show();\r\n                                    $(\"#\" + categoryID + \" #product-list\").hide(); \/\/ Ocultar la lista de productos\r\n                                },\r\n                                success: function(response) {\r\n                                    $(\"#\" + categoryID + \" #product-detail\").html(response);\r\n                                },\r\n                                error: function() {\r\n                                    $(\"#\" + categoryID + \" #product-detail\").html(\"<p>Error al cargar el producto.<\/p>\");\r\n                                }\r\n                            });\r\n                        });\r\n                        \/\/ Bot\u00f3n para volver a la lista de productos\r\n                        $(document).on(\"click\", \"#back-to-products\", function(e) {\r\n                            e.preventDefault();\r\n                            $(\"#\" + categoryID + \" #product-detail\").hide();\r\n                            $(\"#\" + categoryID + \" #product-list\").show();\r\n                        });\r\n\r\n                        $(document).on(\"click\", \".thumbnail\", function() {\r\n                            var newImage = $(this).attr(\"data-large\"); \/\/ Obtener imagen grande\r\n                            $(\"#main-product-image\").attr(\"src\", newImage);\r\n                        });\r\n\r\n\r\n                        function updateGradientVisibility($content) {\r\n                            const scrollTop = $content.scrollTop();\r\n                            const scrollHeight = $content[0].scrollHeight;\r\n                            const clientHeight = $content[0].clientHeight;\r\n\r\n                            \/\/ Si est\u00e1 arriba del todo\r\n                            if (scrollTop <= 0) {\r\n                                $content.addClass(\"at-top\");\r\n                            } else {\r\n                                $content.removeClass(\"at-top\");\r\n                            }\r\n\r\n                            \/\/ Si est\u00e1 abajo del todo\r\n                            if (scrollTop + clientHeight >= scrollHeight - 1) {\r\n                                $content.addClass(\"at-bottom\");\r\n                            } else {\r\n                                $content.removeClass(\"at-bottom\");\r\n                            }\r\n                        }\r\n\r\n                        \/\/ Scroll hacia abajo \r\n                        $(document).on(\"click\", \".arrow-down\", function () {\r\n                            let content = $(this).closest(\".description-container\").find(\".description-content\");\r\n                            content.stop().animate({\r\n                                scrollTop: content.scrollTop() + 50 \r\n                            }, 200, function () {\r\n                                updateGradientVisibility(content);\r\n                            });\r\n                        });\r\n\r\n                        \/\/ Scroll hacia arriba\r\n                        $(document).on(\"click\", \".arrow-up\", function () {\r\n                            let content = $(this).closest(\".description-container\").find(\".description-content\");\r\n                            content.stop().animate({\r\n                                scrollTop: content.scrollTop() - 70 \r\n                            }, 200, function () {\r\n                                updateGradientVisibility(content);\r\n                            });\r\n                        });\r\n                        \r\n                        \r\n\r\n                        \/\/ Ejecutar cuando haya scroll dentro del contenido\r\n                        $(document).on(\"scroll\", \".description-content\", function () {\r\n                            updateGradientVisibility($(this));\r\n                        });\r\n\r\n                        \/\/ Ejecutar tambi\u00e9n justo despu\u00e9s de mostrar el detalle del producto\r\n                        $(document).on(\"click\", \".product-item\", function () {\r\n                            setTimeout(function () {\r\n                                $(\".description-content\").each(function () {\r\n                                    updateGradientVisibility($(this));\r\n                                });\r\n                            }, 300); \/\/ espera a que se cargue el contenido\r\n                        });\r\n                        $(\".description-content\").each(function () {\r\n                            updateGradientVisibility($(this));\r\n                        });\r\n\r\n\r\n\r\n\r\n                    });\r\n\r\n                <\/script>\r\n\r\n            <\/div>\r\n\r\n            <style>\r\n                .category-layout {\r\n                    display: flex;\r\n                    gap: 20px;\r\n                }\r\n                .category-sidebar {\r\n                    width: 25%;\r\n                    padding-right: 15px;\r\n                }\r\n                .subcategory-list {\r\n                    list-style: none;\r\n                    padding: 0;\r\n                    margin: 0px !important;\r\n                }\r\n                .subcategory-list li {\r\n                    margin: 10px 0;\r\n                }\r\n                .subcategory-list a.subcategory-link {\r\n                    font-weight: 400 !important;\r\n                }\r\n                a.subcategory-link {\r\n                    text-align: start;\r\n                }\r\n                ul.subcategory-list{\r\n                    display: flex;\r\n                    flex-direction: column;\r\n\r\n                }\r\n                .subcategory-link {\r\n                    cursor: pointer;\r\n                    text-decoration: none;\r\n                    color:var(--color-secondary-grey);\r\n                    display: block;\r\n                    transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;\r\n                }\r\n                .subcategory-list .subcategory-link:hover, .subcategory-list .subcategory-link:focus{\r\n                    color: var(--color-primary-green) !important;\r\n                    font-size: 19px !important;\r\n                    font-weight: 600 !important;\r\n                    \r\n                }\r\n                .subcategory-list a.subcategory_active {\r\n                    color: var(--color-primary-green) !important;\r\n                    font-weight: 600 !important;\r\n                }\r\n                .category-products {\r\n                    width: 75%;\r\n                }\r\n                .product-grid {\r\n                    display: grid;\r\n                    grid-template-columns: repeat(3, 1fr);\r\n                    gap: 20px;\r\n                }\r\n                .product-item {\r\n                    width: 90%;\r\n                    height: 35vh;\r\n                    text-align: center;\r\n                    border: 1px solid #ddd;\r\n                    padding: 10px;\r\n                }\r\n                .product-item img {\r\n                    max-width: 90%;\r\n                    height: auto;\r\n                }\r\n                .title_product {\r\n                    text-align: start !important;\r\n                    font-weight: 500;\r\n                }\r\n                .product-item img {\r\n                    width: auto !important;\r\n                    object-fit: cover;\r\n                }\r\n                .product-item img {\r\n                    height: 25vh !important;\r\n                    padding: 15px !important;\r\n                }\r\n                .product-item{\r\n                    padding: 15px !important;\r\n                }\r\n                .product-grid{\r\n                    display: grid !important;\r\n                    grid-template-columns: repeat(3, 1fr);\r\n                    gap: 20px;\r\n                }\r\n                .product-item {\r\n                    transition: transform 0.4s;\r\n                }\r\n\r\n                .product-item:hover img {\r\n                    transform: scale(1.1);\r\n                    transition: transform 0.4s;\r\n                }\r\n\r\n                .product-item:hover .title_product {\r\n                    font-weight: 700;\r\n                    transition: transform 0.4s;\r\n                }\r\n                a#back-to-products{\r\n                    color: var(--color-secondary-grey);\r\n                    font-weight: 500;\r\n                    text-decoration: none;\r\n                    font-size: 20px;\r\n                }\r\n                #product-info{\r\n                    gap: 20px;\r\n                }\r\n\r\n\r\n                \/*----------test----------*\/\r\n                @media screen and (max-width: 768px) {\r\n                    .category-layout {\r\n                        flex-direction: column;\r\n                    }\r\n\r\n                    .category-sidebar {\r\n                        width: 100%;\r\n                        padding-right: 0;\r\n                        overflow-x: auto;\r\n                        white-space: nowrap;\r\n                        margin-bottom: 20px;\r\n                    }\r\n\r\n                    .subcategory-list {\r\n                        flex-direction: row;\r\n                        gap: 10px;\r\n                        display: flex;\r\n                    }\r\n\r\n                    .subcategory-list li {\r\n                        margin: 0;\r\n                    }\r\n\r\n                    .subcategory-link {\r\n                        padding: 10px 15px;\r\n                        background-color: #f2f2f2;\r\n                        border-radius: 5px;\r\n                        white-space: nowrap;\r\n                        display: inline-block;\r\n                    }\r\n\r\n                    .subcategory-list .subcategory-link:hover,\r\n                    .subcategory-list .subcategory-link.subcategory_active {\r\n                        background-color: var(--color-primary-green);\r\n                        color: white !important;\r\n                    }\r\n\r\n                    .category-products {\r\n                        width: 100%;\r\n                    }\r\n\r\n                    .product-grid {\r\n                        grid-template-columns: repeat(2, 1fr);\r\n                    }\r\n\r\n                    .product-item img {\r\n                        height: auto !important;\r\n                    }\r\n                }\r\n\r\n                @media screen and (max-width: 480px) {\r\n                    .product-grid {\r\n                        grid-template-columns: 1fr;\r\n                    }\r\n                }\r\n\r\n            <\/style>\r\n\r\n            [\/vc_tta_section][vc_tta_section title=&#8221;Workshop&#8221; tab_id=&#8221;1742289921798-bc93fd67-9e8f&#8221;]<div class=\"ult-spacer spacer-69fb5bda76579\" data-id=\"69fb5bda76579\" data-height=\"40\" data-height-mobile=\"40\" data-height-tab=\"40\" data-height-tab-portrait=\"\" data-height-mobile-landscape=\"\" style=\"clear:both;display:block;\"><\/div>\r\n            <div class=\"category-layout\" id=\"category_list_69fb5bda765b4\">\r\n                <!-- Columna de Subcategor\u00edas -->\r\n                <div class=\"category-sidebar\">\r\n                    <ul class=\"subcategory-list\">\r\n                                            <\/ul>\r\n                <\/div>\r\n\r\n                <!-- Columna de Productos -->\r\n                <div class=\"category-products\">\r\n                    <div id=\"product-list\">\r\n                                            <\/div>\r\n                    <div id=\"product-detail\" style=\"display: none;\">\r\n                        <!-- Aqu\u00ed se cargar\u00e1 el detalle del producto -->\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <script>\r\n                    jQuery(document).ready(function($) {\r\n                        var categoryID = \"category_list_69fb5bda765b4\";\r\n\r\n                        \/\/ Asegurar que las subcategor\u00edas carguen y seleccionar la primera autom\u00e1ticamente\r\n                        function selectFirstSubcategory() {\r\n                            var firstSubcategory = $(\"#\" + categoryID + \" .subcategory-link:first\");\r\n                            \r\n                            if (firstSubcategory.length > 0) {\r\n                                firstSubcategory.addClass(\"subcategory_active\"); \/\/ Agrega la clase activa\r\n                                firstSubcategory.trigger(\"click\"); \/\/ Simula un clic para cargar los productos\r\n                            }\r\n                        }\r\n\r\n                        \/\/ Ejecutar la selecci\u00f3n despu\u00e9s de que las subcategor\u00edas cargan\r\n                        setTimeout(selectFirstSubcategory, 100);\r\n                        \/\/ Evento para cargar productos de una categor\u00eda\r\n                        $(\".vc_tta-tab\").on(\"click\", function() {\r\n                            if (!$(\"#\" + categoryID).hasClass(\"loaded\")) {\r\n                                $(\"#\" + categoryID).addClass(\"loaded\"); \/\/ Marcar como cargado\r\n                                selectFirstSubcategory(); \r\n                            }\r\n                        });\r\n                        $(\"#\" + categoryID).on(\"click\", \".subcategory-link\", function(e) {\r\n                            e.preventDefault();\r\n                            var categorySlug = $(this).data(\"category-slug\");\r\n\r\n                            $(\"#\" + categoryID + \" #product-detail\").hide();\r\n\r\n                            $(\"#\" + categoryID + \" .subcategory-link\").removeClass(\"subcategory_active\");\r\n                            $(this).addClass(\"subcategory_active\");\r\n\r\n                            $.ajax({\r\n                                type: \"POST\",\r\n                                url: \"https:\/\/indooptical.com\/wp-admin\/admin-ajax.php\",\r\n                                data: { action: \"load_products\", category_slug: categorySlug },\r\n                                beforeSend: function() {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(`<svg class=\"loading\"viewBox=\"25 25 50 50\">\r\n                                        <circle r=\"20\" cy=\"50\" cx=\"50\"><\/circle>\r\n                                    <\/svg>`).show();;\r\n                                },\r\n                                success: function(response) {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(response);\r\n                                },\r\n                                error: function() {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(\"<p>Error al cargar los productos.<\/p>\");\r\n                                }\r\n                            });\r\n                        });\r\n\r\n                        \/\/ Evento para mostrar los detalles del producto\r\n                        $(\"#\" + categoryID).on(\"click\", \".product-item\", function(e) {\r\n                            e.preventDefault();\r\n                            var productID = $(this).data(\"product-id\");\r\n\r\n                            $.ajax({\r\n                                type: \"POST\",\r\n                                url: \"https:\/\/indooptical.com\/wp-admin\/admin-ajax.php\",\r\n                                data: {\r\n                                    action: \"load_product_detail\",\r\n                                    product_id: productID\r\n                                },\r\n                                beforeSend: function() {\r\n                                     $(\"#\" + categoryID + \" #product-detail\").html(`<svg class=\"loading\"viewBox=\"25 25 50 50\">\r\n                                        <circle r=\"20\" cy=\"50\" cx=\"50\"><\/circle>\r\n                                    <\/svg>`).show();\r\n                                    $(\"#\" + categoryID + \" #product-list\").hide(); \/\/ Ocultar la lista de productos\r\n                                },\r\n                                success: function(response) {\r\n                                    $(\"#\" + categoryID + \" #product-detail\").html(response);\r\n                                },\r\n                                error: function() {\r\n                                    $(\"#\" + categoryID + \" #product-detail\").html(\"<p>Error al cargar el producto.<\/p>\");\r\n                                }\r\n                            });\r\n                        });\r\n                        \/\/ Bot\u00f3n para volver a la lista de productos\r\n                        $(document).on(\"click\", \"#back-to-products\", function(e) {\r\n                            e.preventDefault();\r\n                            $(\"#\" + categoryID + \" #product-detail\").hide();\r\n                            $(\"#\" + categoryID + \" #product-list\").show();\r\n                        });\r\n\r\n                        $(document).on(\"click\", \".thumbnail\", function() {\r\n                            var newImage = $(this).attr(\"data-large\"); \/\/ Obtener imagen grande\r\n                            $(\"#main-product-image\").attr(\"src\", newImage);\r\n                        });\r\n\r\n\r\n                        function updateGradientVisibility($content) {\r\n                            const scrollTop = $content.scrollTop();\r\n                            const scrollHeight = $content[0].scrollHeight;\r\n                            const clientHeight = $content[0].clientHeight;\r\n\r\n                            \/\/ Si est\u00e1 arriba del todo\r\n                            if (scrollTop <= 0) {\r\n                                $content.addClass(\"at-top\");\r\n                            } else {\r\n                                $content.removeClass(\"at-top\");\r\n                            }\r\n\r\n                            \/\/ Si est\u00e1 abajo del todo\r\n                            if (scrollTop + clientHeight >= scrollHeight - 1) {\r\n                                $content.addClass(\"at-bottom\");\r\n                            } else {\r\n                                $content.removeClass(\"at-bottom\");\r\n                            }\r\n                        }\r\n\r\n                        \/\/ Scroll hacia abajo \r\n                        $(document).on(\"click\", \".arrow-down\", function () {\r\n                            let content = $(this).closest(\".description-container\").find(\".description-content\");\r\n                            content.stop().animate({\r\n                                scrollTop: content.scrollTop() + 50 \r\n                            }, 200, function () {\r\n                                updateGradientVisibility(content);\r\n                            });\r\n                        });\r\n\r\n                        \/\/ Scroll hacia arriba\r\n                        $(document).on(\"click\", \".arrow-up\", function () {\r\n                            let content = $(this).closest(\".description-container\").find(\".description-content\");\r\n                            content.stop().animate({\r\n                                scrollTop: content.scrollTop() - 70 \r\n                            }, 200, function () {\r\n                                updateGradientVisibility(content);\r\n                            });\r\n                        });\r\n                        \r\n                        \r\n\r\n                        \/\/ Ejecutar cuando haya scroll dentro del contenido\r\n                        $(document).on(\"scroll\", \".description-content\", function () {\r\n                            updateGradientVisibility($(this));\r\n                        });\r\n\r\n                        \/\/ Ejecutar tambi\u00e9n justo despu\u00e9s de mostrar el detalle del producto\r\n                        $(document).on(\"click\", \".product-item\", function () {\r\n                            setTimeout(function () {\r\n                                $(\".description-content\").each(function () {\r\n                                    updateGradientVisibility($(this));\r\n                                });\r\n                            }, 300); \/\/ espera a que se cargue el contenido\r\n                        });\r\n                        $(\".description-content\").each(function () {\r\n                            updateGradientVisibility($(this));\r\n                        });\r\n\r\n\r\n\r\n\r\n                    });\r\n\r\n                <\/script>\r\n\r\n            <\/div>\r\n\r\n            <style>\r\n                .category-layout {\r\n                    display: flex;\r\n                    gap: 20px;\r\n                }\r\n                .category-sidebar {\r\n                    width: 25%;\r\n                    padding-right: 15px;\r\n                }\r\n                .subcategory-list {\r\n                    list-style: none;\r\n                    padding: 0;\r\n                    margin: 0px !important;\r\n                }\r\n                .subcategory-list li {\r\n                    margin: 10px 0;\r\n                }\r\n                .subcategory-list a.subcategory-link {\r\n                    font-weight: 400 !important;\r\n                }\r\n                a.subcategory-link {\r\n                    text-align: start;\r\n                }\r\n                ul.subcategory-list{\r\n                    display: flex;\r\n                    flex-direction: column;\r\n\r\n                }\r\n                .subcategory-link {\r\n                    cursor: pointer;\r\n                    text-decoration: none;\r\n                    color:var(--color-secondary-grey);\r\n                    display: block;\r\n                    transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;\r\n                }\r\n                .subcategory-list .subcategory-link:hover, .subcategory-list .subcategory-link:focus{\r\n                    color: var(--color-primary-green) !important;\r\n                    font-size: 19px !important;\r\n                    font-weight: 600 !important;\r\n                    \r\n                }\r\n                .subcategory-list a.subcategory_active {\r\n                    color: var(--color-primary-green) !important;\r\n                    font-weight: 600 !important;\r\n                }\r\n                .category-products {\r\n                    width: 75%;\r\n                }\r\n                .product-grid {\r\n                    display: grid;\r\n                    grid-template-columns: repeat(3, 1fr);\r\n                    gap: 20px;\r\n                }\r\n                .product-item {\r\n                    width: 90%;\r\n                    height: 35vh;\r\n                    text-align: center;\r\n                    border: 1px solid #ddd;\r\n                    padding: 10px;\r\n                }\r\n                .product-item img {\r\n                    max-width: 90%;\r\n                    height: auto;\r\n                }\r\n                .title_product {\r\n                    text-align: start !important;\r\n                    font-weight: 500;\r\n                }\r\n                .product-item img {\r\n                    width: auto !important;\r\n                    object-fit: cover;\r\n                }\r\n                .product-item img {\r\n                    height: 25vh !important;\r\n                    padding: 15px !important;\r\n                }\r\n                .product-item{\r\n                    padding: 15px !important;\r\n                }\r\n                .product-grid{\r\n                    display: grid !important;\r\n                    grid-template-columns: repeat(3, 1fr);\r\n                    gap: 20px;\r\n                }\r\n                .product-item {\r\n                    transition: transform 0.4s;\r\n                }\r\n\r\n                .product-item:hover img {\r\n                    transform: scale(1.1);\r\n                    transition: transform 0.4s;\r\n                }\r\n\r\n                .product-item:hover .title_product {\r\n                    font-weight: 700;\r\n                    transition: transform 0.4s;\r\n                }\r\n                a#back-to-products{\r\n                    color: var(--color-secondary-grey);\r\n                    font-weight: 500;\r\n                    text-decoration: none;\r\n                    font-size: 20px;\r\n                }\r\n                #product-info{\r\n                    gap: 20px;\r\n                }\r\n\r\n\r\n                \/*----------test----------*\/\r\n                @media screen and (max-width: 768px) {\r\n                    .category-layout {\r\n                        flex-direction: column;\r\n                    }\r\n\r\n                    .category-sidebar {\r\n                        width: 100%;\r\n                        padding-right: 0;\r\n                        overflow-x: auto;\r\n                        white-space: nowrap;\r\n                        margin-bottom: 20px;\r\n                    }\r\n\r\n                    .subcategory-list {\r\n                        flex-direction: row;\r\n                        gap: 10px;\r\n                        display: flex;\r\n                    }\r\n\r\n                    .subcategory-list li {\r\n                        margin: 0;\r\n                    }\r\n\r\n                    .subcategory-link {\r\n                        padding: 10px 15px;\r\n                        background-color: #f2f2f2;\r\n                        border-radius: 5px;\r\n                        white-space: nowrap;\r\n                        display: inline-block;\r\n                    }\r\n\r\n                    .subcategory-list .subcategory-link:hover,\r\n                    .subcategory-list .subcategory-link.subcategory_active {\r\n                        background-color: var(--color-primary-green);\r\n                        color: white !important;\r\n                    }\r\n\r\n                    .category-products {\r\n                        width: 100%;\r\n                    }\r\n\r\n                    .product-grid {\r\n                        grid-template-columns: repeat(2, 1fr);\r\n                    }\r\n\r\n                    .product-item img {\r\n                        height: auto !important;\r\n                    }\r\n                }\r\n\r\n                @media screen and (max-width: 480px) {\r\n                    .product-grid {\r\n                        grid-template-columns: 1fr;\r\n                    }\r\n                }\r\n\r\n            <\/style>\r\n\r\n            [\/vc_tta_section][vc_tta_section title=&#8221;Ophthalmology treatments&#8221; tab_id=&#8221;1742396374487-17f53663-9a20&#8243;]<div class=\"ult-spacer spacer-69fb5bda76ed6\" data-id=\"69fb5bda76ed6\" data-height=\"40\" data-height-mobile=\"40\" data-height-tab=\"40\" data-height-tab-portrait=\"\" data-height-mobile-landscape=\"\" style=\"clear:both;display:block;\"><\/div>\r\n            <div class=\"category-layout\" id=\"category_list_69fb5bda76f11\">\r\n                <!-- Columna de Subcategor\u00edas -->\r\n                <div class=\"category-sidebar\">\r\n                    <ul class=\"subcategory-list\">\r\n                                            <\/ul>\r\n                <\/div>\r\n\r\n                <!-- Columna de Productos -->\r\n                <div class=\"category-products\">\r\n                    <div id=\"product-list\">\r\n                                            <\/div>\r\n                    <div id=\"product-detail\" style=\"display: none;\">\r\n                        <!-- Aqu\u00ed se cargar\u00e1 el detalle del producto -->\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <script>\r\n                    jQuery(document).ready(function($) {\r\n                        var categoryID = \"category_list_69fb5bda76f11\";\r\n\r\n                        \/\/ Asegurar que las subcategor\u00edas carguen y seleccionar la primera autom\u00e1ticamente\r\n                        function selectFirstSubcategory() {\r\n                            var firstSubcategory = $(\"#\" + categoryID + \" .subcategory-link:first\");\r\n                            \r\n                            if (firstSubcategory.length > 0) {\r\n                                firstSubcategory.addClass(\"subcategory_active\"); \/\/ Agrega la clase activa\r\n                                firstSubcategory.trigger(\"click\"); \/\/ Simula un clic para cargar los productos\r\n                            }\r\n                        }\r\n\r\n                        \/\/ Ejecutar la selecci\u00f3n despu\u00e9s de que las subcategor\u00edas cargan\r\n                        setTimeout(selectFirstSubcategory, 100);\r\n                        \/\/ Evento para cargar productos de una categor\u00eda\r\n                        $(\".vc_tta-tab\").on(\"click\", function() {\r\n                            if (!$(\"#\" + categoryID).hasClass(\"loaded\")) {\r\n                                $(\"#\" + categoryID).addClass(\"loaded\"); \/\/ Marcar como cargado\r\n                                selectFirstSubcategory(); \r\n                            }\r\n                        });\r\n                        $(\"#\" + categoryID).on(\"click\", \".subcategory-link\", function(e) {\r\n                            e.preventDefault();\r\n                            var categorySlug = $(this).data(\"category-slug\");\r\n\r\n                            $(\"#\" + categoryID + \" #product-detail\").hide();\r\n\r\n                            $(\"#\" + categoryID + \" .subcategory-link\").removeClass(\"subcategory_active\");\r\n                            $(this).addClass(\"subcategory_active\");\r\n\r\n                            $.ajax({\r\n                                type: \"POST\",\r\n                                url: \"https:\/\/indooptical.com\/wp-admin\/admin-ajax.php\",\r\n                                data: { action: \"load_products\", category_slug: categorySlug },\r\n                                beforeSend: function() {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(`<svg class=\"loading\"viewBox=\"25 25 50 50\">\r\n                                        <circle r=\"20\" cy=\"50\" cx=\"50\"><\/circle>\r\n                                    <\/svg>`).show();;\r\n                                },\r\n                                success: function(response) {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(response);\r\n                                },\r\n                                error: function() {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(\"<p>Error al cargar los productos.<\/p>\");\r\n                                }\r\n                            });\r\n                        });\r\n\r\n                        \/\/ Evento para mostrar los detalles del producto\r\n                        $(\"#\" + categoryID).on(\"click\", \".product-item\", function(e) {\r\n                            e.preventDefault();\r\n                            var productID = $(this).data(\"product-id\");\r\n\r\n                            $.ajax({\r\n                                type: \"POST\",\r\n                                url: \"https:\/\/indooptical.com\/wp-admin\/admin-ajax.php\",\r\n                                data: {\r\n                                    action: \"load_product_detail\",\r\n                                    product_id: productID\r\n                                },\r\n                                beforeSend: function() {\r\n                                     $(\"#\" + categoryID + \" #product-detail\").html(`<svg class=\"loading\"viewBox=\"25 25 50 50\">\r\n                                        <circle r=\"20\" cy=\"50\" cx=\"50\"><\/circle>\r\n                                    <\/svg>`).show();\r\n                                    $(\"#\" + categoryID + \" #product-list\").hide(); \/\/ Ocultar la lista de productos\r\n                                },\r\n                                success: function(response) {\r\n                                    $(\"#\" + categoryID + \" #product-detail\").html(response);\r\n                                },\r\n                                error: function() {\r\n                                    $(\"#\" + categoryID + \" #product-detail\").html(\"<p>Error al cargar el producto.<\/p>\");\r\n                                }\r\n                            });\r\n                        });\r\n                        \/\/ Bot\u00f3n para volver a la lista de productos\r\n                        $(document).on(\"click\", \"#back-to-products\", function(e) {\r\n                            e.preventDefault();\r\n                            $(\"#\" + categoryID + \" #product-detail\").hide();\r\n                            $(\"#\" + categoryID + \" #product-list\").show();\r\n                        });\r\n\r\n                        $(document).on(\"click\", \".thumbnail\", function() {\r\n                            var newImage = $(this).attr(\"data-large\"); \/\/ Obtener imagen grande\r\n                            $(\"#main-product-image\").attr(\"src\", newImage);\r\n                        });\r\n\r\n\r\n                        function updateGradientVisibility($content) {\r\n                            const scrollTop = $content.scrollTop();\r\n                            const scrollHeight = $content[0].scrollHeight;\r\n                            const clientHeight = $content[0].clientHeight;\r\n\r\n                            \/\/ Si est\u00e1 arriba del todo\r\n                            if (scrollTop <= 0) {\r\n                                $content.addClass(\"at-top\");\r\n                            } else {\r\n                                $content.removeClass(\"at-top\");\r\n                            }\r\n\r\n                            \/\/ Si est\u00e1 abajo del todo\r\n                            if (scrollTop + clientHeight >= scrollHeight - 1) {\r\n                                $content.addClass(\"at-bottom\");\r\n                            } else {\r\n                                $content.removeClass(\"at-bottom\");\r\n                            }\r\n                        }\r\n\r\n                        \/\/ Scroll hacia abajo \r\n                        $(document).on(\"click\", \".arrow-down\", function () {\r\n                            let content = $(this).closest(\".description-container\").find(\".description-content\");\r\n                            content.stop().animate({\r\n                                scrollTop: content.scrollTop() + 50 \r\n                            }, 200, function () {\r\n                                updateGradientVisibility(content);\r\n                            });\r\n                        });\r\n\r\n                        \/\/ Scroll hacia arriba\r\n                        $(document).on(\"click\", \".arrow-up\", function () {\r\n                            let content = $(this).closest(\".description-container\").find(\".description-content\");\r\n                            content.stop().animate({\r\n                                scrollTop: content.scrollTop() - 70 \r\n                            }, 200, function () {\r\n                                updateGradientVisibility(content);\r\n                            });\r\n                        });\r\n                        \r\n                        \r\n\r\n                        \/\/ Ejecutar cuando haya scroll dentro del contenido\r\n                        $(document).on(\"scroll\", \".description-content\", function () {\r\n                            updateGradientVisibility($(this));\r\n                        });\r\n\r\n                        \/\/ Ejecutar tambi\u00e9n justo despu\u00e9s de mostrar el detalle del producto\r\n                        $(document).on(\"click\", \".product-item\", function () {\r\n                            setTimeout(function () {\r\n                                $(\".description-content\").each(function () {\r\n                                    updateGradientVisibility($(this));\r\n                                });\r\n                            }, 300); \/\/ espera a que se cargue el contenido\r\n                        });\r\n                        $(\".description-content\").each(function () {\r\n                            updateGradientVisibility($(this));\r\n                        });\r\n\r\n\r\n\r\n\r\n                    });\r\n\r\n                <\/script>\r\n\r\n            <\/div>\r\n\r\n            <style>\r\n                .category-layout {\r\n                    display: flex;\r\n                    gap: 20px;\r\n                }\r\n                .category-sidebar {\r\n                    width: 25%;\r\n                    padding-right: 15px;\r\n                }\r\n                .subcategory-list {\r\n                    list-style: none;\r\n                    padding: 0;\r\n                    margin: 0px !important;\r\n                }\r\n                .subcategory-list li {\r\n                    margin: 10px 0;\r\n                }\r\n                .subcategory-list a.subcategory-link {\r\n                    font-weight: 400 !important;\r\n                }\r\n                a.subcategory-link {\r\n                    text-align: start;\r\n                }\r\n                ul.subcategory-list{\r\n                    display: flex;\r\n                    flex-direction: column;\r\n\r\n                }\r\n                .subcategory-link {\r\n                    cursor: pointer;\r\n                    text-decoration: none;\r\n                    color:var(--color-secondary-grey);\r\n                    display: block;\r\n                    transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;\r\n                }\r\n                .subcategory-list .subcategory-link:hover, .subcategory-list .subcategory-link:focus{\r\n                    color: var(--color-primary-green) !important;\r\n                    font-size: 19px !important;\r\n                    font-weight: 600 !important;\r\n                    \r\n                }\r\n                .subcategory-list a.subcategory_active {\r\n                    color: var(--color-primary-green) !important;\r\n                    font-weight: 600 !important;\r\n                }\r\n                .category-products {\r\n                    width: 75%;\r\n                }\r\n                .product-grid {\r\n                    display: grid;\r\n                    grid-template-columns: repeat(3, 1fr);\r\n                    gap: 20px;\r\n                }\r\n                .product-item {\r\n                    width: 90%;\r\n                    height: 35vh;\r\n                    text-align: center;\r\n                    border: 1px solid #ddd;\r\n                    padding: 10px;\r\n                }\r\n                .product-item img {\r\n                    max-width: 90%;\r\n                    height: auto;\r\n                }\r\n                .title_product {\r\n                    text-align: start !important;\r\n                    font-weight: 500;\r\n                }\r\n                .product-item img {\r\n                    width: auto !important;\r\n                    object-fit: cover;\r\n                }\r\n                .product-item img {\r\n                    height: 25vh !important;\r\n                    padding: 15px !important;\r\n                }\r\n                .product-item{\r\n                    padding: 15px !important;\r\n                }\r\n                .product-grid{\r\n                    display: grid !important;\r\n                    grid-template-columns: repeat(3, 1fr);\r\n                    gap: 20px;\r\n                }\r\n                .product-item {\r\n                    transition: transform 0.4s;\r\n                }\r\n\r\n                .product-item:hover img {\r\n                    transform: scale(1.1);\r\n                    transition: transform 0.4s;\r\n                }\r\n\r\n                .product-item:hover .title_product {\r\n                    font-weight: 700;\r\n                    transition: transform 0.4s;\r\n                }\r\n                a#back-to-products{\r\n                    color: var(--color-secondary-grey);\r\n                    font-weight: 500;\r\n                    text-decoration: none;\r\n                    font-size: 20px;\r\n                }\r\n                #product-info{\r\n                    gap: 20px;\r\n                }\r\n\r\n\r\n                \/*----------test----------*\/\r\n                @media screen and (max-width: 768px) {\r\n                    .category-layout {\r\n                        flex-direction: column;\r\n                    }\r\n\r\n                    .category-sidebar {\r\n                        width: 100%;\r\n                        padding-right: 0;\r\n                        overflow-x: auto;\r\n                        white-space: nowrap;\r\n                        margin-bottom: 20px;\r\n                    }\r\n\r\n                    .subcategory-list {\r\n                        flex-direction: row;\r\n                        gap: 10px;\r\n                        display: flex;\r\n                    }\r\n\r\n                    .subcategory-list li {\r\n                        margin: 0;\r\n                    }\r\n\r\n                    .subcategory-link {\r\n                        padding: 10px 15px;\r\n                        background-color: #f2f2f2;\r\n                        border-radius: 5px;\r\n                        white-space: nowrap;\r\n                        display: inline-block;\r\n                    }\r\n\r\n                    .subcategory-list .subcategory-link:hover,\r\n                    .subcategory-list .subcategory-link.subcategory_active {\r\n                        background-color: var(--color-primary-green);\r\n                        color: white !important;\r\n                    }\r\n\r\n                    .category-products {\r\n                        width: 100%;\r\n                    }\r\n\r\n                    .product-grid {\r\n                        grid-template-columns: repeat(2, 1fr);\r\n                    }\r\n\r\n                    .product-item img {\r\n                        height: auto !important;\r\n                    }\r\n                }\r\n\r\n                @media screen and (max-width: 480px) {\r\n                    .product-grid {\r\n                        grid-template-columns: 1fr;\r\n                    }\r\n                }\r\n\r\n            <\/style>\r\n\r\n            [\/vc_tta_section][vc_tta_section title=&#8221;Exploration lenses&#8221; tab_id=&#8221;1742229547973-bd7edc35-d97c&#8221;]<div class=\"ult-spacer spacer-69fb5bda77bb7\" data-id=\"69fb5bda77bb7\" data-height=\"40\" data-height-mobile=\"40\" data-height-tab=\"40\" data-height-tab-portrait=\"\" data-height-mobile-landscape=\"\" style=\"clear:both;display:block;\"><\/div>\r\n            <div class=\"category-layout\" id=\"category_list_69fb5bda77bf5\">\r\n                <!-- Columna de Subcategor\u00edas -->\r\n                <div class=\"category-sidebar\">\r\n                    <ul class=\"subcategory-list\">\r\n                                            <\/ul>\r\n                <\/div>\r\n\r\n                <!-- Columna de Productos -->\r\n                <div class=\"category-products\">\r\n                    <div id=\"product-list\">\r\n                                            <\/div>\r\n                    <div id=\"product-detail\" style=\"display: none;\">\r\n                        <!-- Aqu\u00ed se cargar\u00e1 el detalle del producto -->\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <script>\r\n                    jQuery(document).ready(function($) {\r\n                        var categoryID = \"category_list_69fb5bda77bf5\";\r\n\r\n                        \/\/ Asegurar que las subcategor\u00edas carguen y seleccionar la primera autom\u00e1ticamente\r\n                        function selectFirstSubcategory() {\r\n                            var firstSubcategory = $(\"#\" + categoryID + \" .subcategory-link:first\");\r\n                            \r\n                            if (firstSubcategory.length > 0) {\r\n                                firstSubcategory.addClass(\"subcategory_active\"); \/\/ Agrega la clase activa\r\n                                firstSubcategory.trigger(\"click\"); \/\/ Simula un clic para cargar los productos\r\n                            }\r\n                        }\r\n\r\n                        \/\/ Ejecutar la selecci\u00f3n despu\u00e9s de que las subcategor\u00edas cargan\r\n                        setTimeout(selectFirstSubcategory, 100);\r\n                        \/\/ Evento para cargar productos de una categor\u00eda\r\n                        $(\".vc_tta-tab\").on(\"click\", function() {\r\n                            if (!$(\"#\" + categoryID).hasClass(\"loaded\")) {\r\n                                $(\"#\" + categoryID).addClass(\"loaded\"); \/\/ Marcar como cargado\r\n                                selectFirstSubcategory(); \r\n                            }\r\n                        });\r\n                        $(\"#\" + categoryID).on(\"click\", \".subcategory-link\", function(e) {\r\n                            e.preventDefault();\r\n                            var categorySlug = $(this).data(\"category-slug\");\r\n\r\n                            $(\"#\" + categoryID + \" #product-detail\").hide();\r\n\r\n                            $(\"#\" + categoryID + \" .subcategory-link\").removeClass(\"subcategory_active\");\r\n                            $(this).addClass(\"subcategory_active\");\r\n\r\n                            $.ajax({\r\n                                type: \"POST\",\r\n                                url: \"https:\/\/indooptical.com\/wp-admin\/admin-ajax.php\",\r\n                                data: { action: \"load_products\", category_slug: categorySlug },\r\n                                beforeSend: function() {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(`<svg class=\"loading\"viewBox=\"25 25 50 50\">\r\n                                        <circle r=\"20\" cy=\"50\" cx=\"50\"><\/circle>\r\n                                    <\/svg>`).show();;\r\n                                },\r\n                                success: function(response) {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(response);\r\n                                },\r\n                                error: function() {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(\"<p>Error al cargar los productos.<\/p>\");\r\n                                }\r\n                            });\r\n                        });\r\n\r\n                        \/\/ Evento para mostrar los detalles del producto\r\n                        $(\"#\" + categoryID).on(\"click\", \".product-item\", function(e) {\r\n                            e.preventDefault();\r\n                            var productID = $(this).data(\"product-id\");\r\n\r\n                            $.ajax({\r\n                                type: \"POST\",\r\n                                url: \"https:\/\/indooptical.com\/wp-admin\/admin-ajax.php\",\r\n                                data: {\r\n                                    action: \"load_product_detail\",\r\n                                    product_id: productID\r\n                                },\r\n                                beforeSend: function() {\r\n                                     $(\"#\" + categoryID + \" #product-detail\").html(`<svg class=\"loading\"viewBox=\"25 25 50 50\">\r\n                                        <circle r=\"20\" cy=\"50\" cx=\"50\"><\/circle>\r\n                                    <\/svg>`).show();\r\n                                    $(\"#\" + categoryID + \" #product-list\").hide(); \/\/ Ocultar la lista de productos\r\n                                },\r\n                                success: function(response) {\r\n                                    $(\"#\" + categoryID + \" #product-detail\").html(response);\r\n                                },\r\n                                error: function() {\r\n                                    $(\"#\" + categoryID + \" #product-detail\").html(\"<p>Error al cargar el producto.<\/p>\");\r\n                                }\r\n                            });\r\n                        });\r\n                        \/\/ Bot\u00f3n para volver a la lista de productos\r\n                        $(document).on(\"click\", \"#back-to-products\", function(e) {\r\n                            e.preventDefault();\r\n                            $(\"#\" + categoryID + \" #product-detail\").hide();\r\n                            $(\"#\" + categoryID + \" #product-list\").show();\r\n                        });\r\n\r\n                        $(document).on(\"click\", \".thumbnail\", function() {\r\n                            var newImage = $(this).attr(\"data-large\"); \/\/ Obtener imagen grande\r\n                            $(\"#main-product-image\").attr(\"src\", newImage);\r\n                        });\r\n\r\n\r\n                        function updateGradientVisibility($content) {\r\n                            const scrollTop = $content.scrollTop();\r\n                            const scrollHeight = $content[0].scrollHeight;\r\n                            const clientHeight = $content[0].clientHeight;\r\n\r\n                            \/\/ Si est\u00e1 arriba del todo\r\n                            if (scrollTop <= 0) {\r\n                                $content.addClass(\"at-top\");\r\n                            } else {\r\n                                $content.removeClass(\"at-top\");\r\n                            }\r\n\r\n                            \/\/ Si est\u00e1 abajo del todo\r\n                            if (scrollTop + clientHeight >= scrollHeight - 1) {\r\n                                $content.addClass(\"at-bottom\");\r\n                            } else {\r\n                                $content.removeClass(\"at-bottom\");\r\n                            }\r\n                        }\r\n\r\n                        \/\/ Scroll hacia abajo \r\n                        $(document).on(\"click\", \".arrow-down\", function () {\r\n                            let content = $(this).closest(\".description-container\").find(\".description-content\");\r\n                            content.stop().animate({\r\n                                scrollTop: content.scrollTop() + 50 \r\n                            }, 200, function () {\r\n                                updateGradientVisibility(content);\r\n                            });\r\n                        });\r\n\r\n                        \/\/ Scroll hacia arriba\r\n                        $(document).on(\"click\", \".arrow-up\", function () {\r\n                            let content = $(this).closest(\".description-container\").find(\".description-content\");\r\n                            content.stop().animate({\r\n                                scrollTop: content.scrollTop() - 70 \r\n                            }, 200, function () {\r\n                                updateGradientVisibility(content);\r\n                            });\r\n                        });\r\n                        \r\n                        \r\n\r\n                        \/\/ Ejecutar cuando haya scroll dentro del contenido\r\n                        $(document).on(\"scroll\", \".description-content\", function () {\r\n                            updateGradientVisibility($(this));\r\n                        });\r\n\r\n                        \/\/ Ejecutar tambi\u00e9n justo despu\u00e9s de mostrar el detalle del producto\r\n                        $(document).on(\"click\", \".product-item\", function () {\r\n                            setTimeout(function () {\r\n                                $(\".description-content\").each(function () {\r\n                                    updateGradientVisibility($(this));\r\n                                });\r\n                            }, 300); \/\/ espera a que se cargue el contenido\r\n                        });\r\n                        $(\".description-content\").each(function () {\r\n                            updateGradientVisibility($(this));\r\n                        });\r\n\r\n\r\n\r\n\r\n                    });\r\n\r\n                <\/script>\r\n\r\n            <\/div>\r\n\r\n            <style>\r\n                .category-layout {\r\n                    display: flex;\r\n                    gap: 20px;\r\n                }\r\n                .category-sidebar {\r\n                    width: 25%;\r\n                    padding-right: 15px;\r\n                }\r\n                .subcategory-list {\r\n                    list-style: none;\r\n                    padding: 0;\r\n                    margin: 0px !important;\r\n                }\r\n                .subcategory-list li {\r\n                    margin: 10px 0;\r\n                }\r\n                .subcategory-list a.subcategory-link {\r\n                    font-weight: 400 !important;\r\n                }\r\n                a.subcategory-link {\r\n                    text-align: start;\r\n                }\r\n                ul.subcategory-list{\r\n                    display: flex;\r\n                    flex-direction: column;\r\n\r\n                }\r\n                .subcategory-link {\r\n                    cursor: pointer;\r\n                    text-decoration: none;\r\n                    color:var(--color-secondary-grey);\r\n                    display: block;\r\n                    transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;\r\n                }\r\n                .subcategory-list .subcategory-link:hover, .subcategory-list .subcategory-link:focus{\r\n                    color: var(--color-primary-green) !important;\r\n                    font-size: 19px !important;\r\n                    font-weight: 600 !important;\r\n                    \r\n                }\r\n                .subcategory-list a.subcategory_active {\r\n                    color: var(--color-primary-green) !important;\r\n                    font-weight: 600 !important;\r\n                }\r\n                .category-products {\r\n                    width: 75%;\r\n                }\r\n                .product-grid {\r\n                    display: grid;\r\n                    grid-template-columns: repeat(3, 1fr);\r\n                    gap: 20px;\r\n                }\r\n                .product-item {\r\n                    width: 90%;\r\n                    height: 35vh;\r\n                    text-align: center;\r\n                    border: 1px solid #ddd;\r\n                    padding: 10px;\r\n                }\r\n                .product-item img {\r\n                    max-width: 90%;\r\n                    height: auto;\r\n                }\r\n                .title_product {\r\n                    text-align: start !important;\r\n                    font-weight: 500;\r\n                }\r\n                .product-item img {\r\n                    width: auto !important;\r\n                    object-fit: cover;\r\n                }\r\n                .product-item img {\r\n                    height: 25vh !important;\r\n                    padding: 15px !important;\r\n                }\r\n                .product-item{\r\n                    padding: 15px !important;\r\n                }\r\n                .product-grid{\r\n                    display: grid !important;\r\n                    grid-template-columns: repeat(3, 1fr);\r\n                    gap: 20px;\r\n                }\r\n                .product-item {\r\n                    transition: transform 0.4s;\r\n                }\r\n\r\n                .product-item:hover img {\r\n                    transform: scale(1.1);\r\n                    transition: transform 0.4s;\r\n                }\r\n\r\n                .product-item:hover .title_product {\r\n                    font-weight: 700;\r\n                    transition: transform 0.4s;\r\n                }\r\n                a#back-to-products{\r\n                    color: var(--color-secondary-grey);\r\n                    font-weight: 500;\r\n                    text-decoration: none;\r\n                    font-size: 20px;\r\n                }\r\n                #product-info{\r\n                    gap: 20px;\r\n                }\r\n\r\n\r\n                \/*----------test----------*\/\r\n                @media screen and (max-width: 768px) {\r\n                    .category-layout {\r\n                        flex-direction: column;\r\n                    }\r\n\r\n                    .category-sidebar {\r\n                        width: 100%;\r\n                        padding-right: 0;\r\n                        overflow-x: auto;\r\n                        white-space: nowrap;\r\n                        margin-bottom: 20px;\r\n                    }\r\n\r\n                    .subcategory-list {\r\n                        flex-direction: row;\r\n                        gap: 10px;\r\n                        display: flex;\r\n                    }\r\n\r\n                    .subcategory-list li {\r\n                        margin: 0;\r\n                    }\r\n\r\n                    .subcategory-link {\r\n                        padding: 10px 15px;\r\n                        background-color: #f2f2f2;\r\n                        border-radius: 5px;\r\n                        white-space: nowrap;\r\n                        display: inline-block;\r\n                    }\r\n\r\n                    .subcategory-list .subcategory-link:hover,\r\n                    .subcategory-list .subcategory-link.subcategory_active {\r\n                        background-color: var(--color-primary-green);\r\n                        color: white !important;\r\n                    }\r\n\r\n                    .category-products {\r\n                        width: 100%;\r\n                    }\r\n\r\n                    .product-grid {\r\n                        grid-template-columns: repeat(2, 1fr);\r\n                    }\r\n\r\n                    .product-item img {\r\n                        height: auto !important;\r\n                    }\r\n                }\r\n\r\n                @media screen and (max-width: 480px) {\r\n                    .product-grid {\r\n                        grid-template-columns: 1fr;\r\n                    }\r\n                }\r\n\r\n            <\/style>\r\n\r\n            [\/vc_tta_section][vc_tta_section title=&#8221;Hand instruments&#8221; tab_id=&#8221;1742289886409-b649d589-0314&#8243;]<div class=\"ult-spacer spacer-69fb5bda786ec\" data-id=\"69fb5bda786ec\" data-height=\"40\" data-height-mobile=\"40\" data-height-tab=\"40\" data-height-tab-portrait=\"\" data-height-mobile-landscape=\"\" style=\"clear:both;display:block;\"><\/div>\r\n            <div class=\"category-layout\" id=\"category_list_69fb5bda78732\">\r\n                <!-- Columna de Subcategor\u00edas -->\r\n                <div class=\"category-sidebar\">\r\n                    <ul class=\"subcategory-list\">\r\n                                            <\/ul>\r\n                <\/div>\r\n\r\n                <!-- Columna de Productos -->\r\n                <div class=\"category-products\">\r\n                    <div id=\"product-list\">\r\n                                            <\/div>\r\n                    <div id=\"product-detail\" style=\"display: none;\">\r\n                        <!-- Aqu\u00ed se cargar\u00e1 el detalle del producto -->\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <script>\r\n                    jQuery(document).ready(function($) {\r\n                        var categoryID = \"category_list_69fb5bda78732\";\r\n\r\n                        \/\/ Asegurar que las subcategor\u00edas carguen y seleccionar la primera autom\u00e1ticamente\r\n                        function selectFirstSubcategory() {\r\n                            var firstSubcategory = $(\"#\" + categoryID + \" .subcategory-link:first\");\r\n                            \r\n                            if (firstSubcategory.length > 0) {\r\n                                firstSubcategory.addClass(\"subcategory_active\"); \/\/ Agrega la clase activa\r\n                                firstSubcategory.trigger(\"click\"); \/\/ Simula un clic para cargar los productos\r\n                            }\r\n                        }\r\n\r\n                        \/\/ Ejecutar la selecci\u00f3n despu\u00e9s de que las subcategor\u00edas cargan\r\n                        setTimeout(selectFirstSubcategory, 100);\r\n                        \/\/ Evento para cargar productos de una categor\u00eda\r\n                        $(\".vc_tta-tab\").on(\"click\", function() {\r\n                            if (!$(\"#\" + categoryID).hasClass(\"loaded\")) {\r\n                                $(\"#\" + categoryID).addClass(\"loaded\"); \/\/ Marcar como cargado\r\n                                selectFirstSubcategory(); \r\n                            }\r\n                        });\r\n                        $(\"#\" + categoryID).on(\"click\", \".subcategory-link\", function(e) {\r\n                            e.preventDefault();\r\n                            var categorySlug = $(this).data(\"category-slug\");\r\n\r\n                            $(\"#\" + categoryID + \" #product-detail\").hide();\r\n\r\n                            $(\"#\" + categoryID + \" .subcategory-link\").removeClass(\"subcategory_active\");\r\n                            $(this).addClass(\"subcategory_active\");\r\n\r\n                            $.ajax({\r\n                                type: \"POST\",\r\n                                url: \"https:\/\/indooptical.com\/wp-admin\/admin-ajax.php\",\r\n                                data: { action: \"load_products\", category_slug: categorySlug },\r\n                                beforeSend: function() {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(`<svg class=\"loading\"viewBox=\"25 25 50 50\">\r\n                                        <circle r=\"20\" cy=\"50\" cx=\"50\"><\/circle>\r\n                                    <\/svg>`).show();;\r\n                                },\r\n                                success: function(response) {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(response);\r\n                                },\r\n                                error: function() {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(\"<p>Error al cargar los productos.<\/p>\");\r\n                                }\r\n                            });\r\n                        });\r\n\r\n                        \/\/ Evento para mostrar los detalles del producto\r\n                        $(\"#\" + categoryID).on(\"click\", \".product-item\", function(e) {\r\n                            e.preventDefault();\r\n                            var productID = $(this).data(\"product-id\");\r\n\r\n                            $.ajax({\r\n                                type: \"POST\",\r\n                                url: \"https:\/\/indooptical.com\/wp-admin\/admin-ajax.php\",\r\n                                data: {\r\n                                    action: \"load_product_detail\",\r\n                                    product_id: productID\r\n                                },\r\n                                beforeSend: function() {\r\n                                     $(\"#\" + categoryID + \" #product-detail\").html(`<svg class=\"loading\"viewBox=\"25 25 50 50\">\r\n                                        <circle r=\"20\" cy=\"50\" cx=\"50\"><\/circle>\r\n                                    <\/svg>`).show();\r\n                                    $(\"#\" + categoryID + \" #product-list\").hide(); \/\/ Ocultar la lista de productos\r\n                                },\r\n                                success: function(response) {\r\n                                    $(\"#\" + categoryID + \" #product-detail\").html(response);\r\n                                },\r\n                                error: function() {\r\n                                    $(\"#\" + categoryID + \" #product-detail\").html(\"<p>Error al cargar el producto.<\/p>\");\r\n                                }\r\n                            });\r\n                        });\r\n                        \/\/ Bot\u00f3n para volver a la lista de productos\r\n                        $(document).on(\"click\", \"#back-to-products\", function(e) {\r\n                            e.preventDefault();\r\n                            $(\"#\" + categoryID + \" #product-detail\").hide();\r\n                            $(\"#\" + categoryID + \" #product-list\").show();\r\n                        });\r\n\r\n                        $(document).on(\"click\", \".thumbnail\", function() {\r\n                            var newImage = $(this).attr(\"data-large\"); \/\/ Obtener imagen grande\r\n                            $(\"#main-product-image\").attr(\"src\", newImage);\r\n                        });\r\n\r\n\r\n                        function updateGradientVisibility($content) {\r\n                            const scrollTop = $content.scrollTop();\r\n                            const scrollHeight = $content[0].scrollHeight;\r\n                            const clientHeight = $content[0].clientHeight;\r\n\r\n                            \/\/ Si est\u00e1 arriba del todo\r\n                            if (scrollTop <= 0) {\r\n                                $content.addClass(\"at-top\");\r\n                            } else {\r\n                                $content.removeClass(\"at-top\");\r\n                            }\r\n\r\n                            \/\/ Si est\u00e1 abajo del todo\r\n                            if (scrollTop + clientHeight >= scrollHeight - 1) {\r\n                                $content.addClass(\"at-bottom\");\r\n                            } else {\r\n                                $content.removeClass(\"at-bottom\");\r\n                            }\r\n                        }\r\n\r\n                        \/\/ Scroll hacia abajo \r\n                        $(document).on(\"click\", \".arrow-down\", function () {\r\n                            let content = $(this).closest(\".description-container\").find(\".description-content\");\r\n                            content.stop().animate({\r\n                                scrollTop: content.scrollTop() + 50 \r\n                            }, 200, function () {\r\n                                updateGradientVisibility(content);\r\n                            });\r\n                        });\r\n\r\n                        \/\/ Scroll hacia arriba\r\n                        $(document).on(\"click\", \".arrow-up\", function () {\r\n                            let content = $(this).closest(\".description-container\").find(\".description-content\");\r\n                            content.stop().animate({\r\n                                scrollTop: content.scrollTop() - 70 \r\n                            }, 200, function () {\r\n                                updateGradientVisibility(content);\r\n                            });\r\n                        });\r\n                        \r\n                        \r\n\r\n                        \/\/ Ejecutar cuando haya scroll dentro del contenido\r\n                        $(document).on(\"scroll\", \".description-content\", function () {\r\n                            updateGradientVisibility($(this));\r\n                        });\r\n\r\n                        \/\/ Ejecutar tambi\u00e9n justo despu\u00e9s de mostrar el detalle del producto\r\n                        $(document).on(\"click\", \".product-item\", function () {\r\n                            setTimeout(function () {\r\n                                $(\".description-content\").each(function () {\r\n                                    updateGradientVisibility($(this));\r\n                                });\r\n                            }, 300); \/\/ espera a que se cargue el contenido\r\n                        });\r\n                        $(\".description-content\").each(function () {\r\n                            updateGradientVisibility($(this));\r\n                        });\r\n\r\n\r\n\r\n\r\n                    });\r\n\r\n                <\/script>\r\n\r\n            <\/div>\r\n\r\n            <style>\r\n                .category-layout {\r\n                    display: flex;\r\n                    gap: 20px;\r\n                }\r\n                .category-sidebar {\r\n                    width: 25%;\r\n                    padding-right: 15px;\r\n                }\r\n                .subcategory-list {\r\n                    list-style: none;\r\n                    padding: 0;\r\n                    margin: 0px !important;\r\n                }\r\n                .subcategory-list li {\r\n                    margin: 10px 0;\r\n                }\r\n                .subcategory-list a.subcategory-link {\r\n                    font-weight: 400 !important;\r\n                }\r\n                a.subcategory-link {\r\n                    text-align: start;\r\n                }\r\n                ul.subcategory-list{\r\n                    display: flex;\r\n                    flex-direction: column;\r\n\r\n                }\r\n                .subcategory-link {\r\n                    cursor: pointer;\r\n                    text-decoration: none;\r\n                    color:var(--color-secondary-grey);\r\n                    display: block;\r\n                    transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;\r\n                }\r\n                .subcategory-list .subcategory-link:hover, .subcategory-list .subcategory-link:focus{\r\n                    color: var(--color-primary-green) !important;\r\n                    font-size: 19px !important;\r\n                    font-weight: 600 !important;\r\n                    \r\n                }\r\n                .subcategory-list a.subcategory_active {\r\n                    color: var(--color-primary-green) !important;\r\n                    font-weight: 600 !important;\r\n                }\r\n                .category-products {\r\n                    width: 75%;\r\n                }\r\n                .product-grid {\r\n                    display: grid;\r\n                    grid-template-columns: repeat(3, 1fr);\r\n                    gap: 20px;\r\n                }\r\n                .product-item {\r\n                    width: 90%;\r\n                    height: 35vh;\r\n                    text-align: center;\r\n                    border: 1px solid #ddd;\r\n                    padding: 10px;\r\n                }\r\n                .product-item img {\r\n                    max-width: 90%;\r\n                    height: auto;\r\n                }\r\n                .title_product {\r\n                    text-align: start !important;\r\n                    font-weight: 500;\r\n                }\r\n                .product-item img {\r\n                    width: auto !important;\r\n                    object-fit: cover;\r\n                }\r\n                .product-item img {\r\n                    height: 25vh !important;\r\n                    padding: 15px !important;\r\n                }\r\n                .product-item{\r\n                    padding: 15px !important;\r\n                }\r\n                .product-grid{\r\n                    display: grid !important;\r\n                    grid-template-columns: repeat(3, 1fr);\r\n                    gap: 20px;\r\n                }\r\n                .product-item {\r\n                    transition: transform 0.4s;\r\n                }\r\n\r\n                .product-item:hover img {\r\n                    transform: scale(1.1);\r\n                    transition: transform 0.4s;\r\n                }\r\n\r\n                .product-item:hover .title_product {\r\n                    font-weight: 700;\r\n                    transition: transform 0.4s;\r\n                }\r\n                a#back-to-products{\r\n                    color: var(--color-secondary-grey);\r\n                    font-weight: 500;\r\n                    text-decoration: none;\r\n                    font-size: 20px;\r\n                }\r\n                #product-info{\r\n                    gap: 20px;\r\n                }\r\n\r\n\r\n                \/*----------test----------*\/\r\n                @media screen and (max-width: 768px) {\r\n                    .category-layout {\r\n                        flex-direction: column;\r\n                    }\r\n\r\n                    .category-sidebar {\r\n                        width: 100%;\r\n                        padding-right: 0;\r\n                        overflow-x: auto;\r\n                        white-space: nowrap;\r\n                        margin-bottom: 20px;\r\n                    }\r\n\r\n                    .subcategory-list {\r\n                        flex-direction: row;\r\n                        gap: 10px;\r\n                        display: flex;\r\n                    }\r\n\r\n                    .subcategory-list li {\r\n                        margin: 0;\r\n                    }\r\n\r\n                    .subcategory-link {\r\n                        padding: 10px 15px;\r\n                        background-color: #f2f2f2;\r\n                        border-radius: 5px;\r\n                        white-space: nowrap;\r\n                        display: inline-block;\r\n                    }\r\n\r\n                    .subcategory-list .subcategory-link:hover,\r\n                    .subcategory-list .subcategory-link.subcategory_active {\r\n                        background-color: var(--color-primary-green);\r\n                        color: white !important;\r\n                    }\r\n\r\n                    .category-products {\r\n                        width: 100%;\r\n                    }\r\n\r\n                    .product-grid {\r\n                        grid-template-columns: repeat(2, 1fr);\r\n                    }\r\n\r\n                    .product-item img {\r\n                        height: auto !important;\r\n                    }\r\n                }\r\n\r\n                @media screen and (max-width: 480px) {\r\n                    .product-grid {\r\n                        grid-template-columns: 1fr;\r\n                    }\r\n                }\r\n\r\n            <\/style>\r\n\r\n            [\/vc_tta_section][vc_tta_section title=&#8221;Accessories&#8221; tab_id=&#8221;1742289905674-667bb3fb-9214&#8243;]<div class=\"ult-spacer spacer-69fb5bda7919f\" data-id=\"69fb5bda7919f\" data-height=\"40\" data-height-mobile=\"40\" data-height-tab=\"40\" data-height-tab-portrait=\"\" data-height-mobile-landscape=\"\" style=\"clear:both;display:block;\"><\/div>\r\n            <div class=\"category-layout\" id=\"category_list_69fb5bda791dc\">\r\n                <!-- Columna de Subcategor\u00edas -->\r\n                <div class=\"category-sidebar\">\r\n                    <ul class=\"subcategory-list\">\r\n                                            <\/ul>\r\n                <\/div>\r\n\r\n                <!-- Columna de Productos -->\r\n                <div class=\"category-products\">\r\n                    <div id=\"product-list\">\r\n                                            <\/div>\r\n                    <div id=\"product-detail\" style=\"display: none;\">\r\n                        <!-- Aqu\u00ed se cargar\u00e1 el detalle del producto -->\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <script>\r\n                    jQuery(document).ready(function($) {\r\n                        var categoryID = \"category_list_69fb5bda791dc\";\r\n\r\n                        \/\/ Asegurar que las subcategor\u00edas carguen y seleccionar la primera autom\u00e1ticamente\r\n                        function selectFirstSubcategory() {\r\n                            var firstSubcategory = $(\"#\" + categoryID + \" .subcategory-link:first\");\r\n                            \r\n                            if (firstSubcategory.length > 0) {\r\n                                firstSubcategory.addClass(\"subcategory_active\"); \/\/ Agrega la clase activa\r\n                                firstSubcategory.trigger(\"click\"); \/\/ Simula un clic para cargar los productos\r\n                            }\r\n                        }\r\n\r\n                        \/\/ Ejecutar la selecci\u00f3n despu\u00e9s de que las subcategor\u00edas cargan\r\n                        setTimeout(selectFirstSubcategory, 100);\r\n                        \/\/ Evento para cargar productos de una categor\u00eda\r\n                        $(\".vc_tta-tab\").on(\"click\", function() {\r\n                            if (!$(\"#\" + categoryID).hasClass(\"loaded\")) {\r\n                                $(\"#\" + categoryID).addClass(\"loaded\"); \/\/ Marcar como cargado\r\n                                selectFirstSubcategory(); \r\n                            }\r\n                        });\r\n                        $(\"#\" + categoryID).on(\"click\", \".subcategory-link\", function(e) {\r\n                            e.preventDefault();\r\n                            var categorySlug = $(this).data(\"category-slug\");\r\n\r\n                            $(\"#\" + categoryID + \" #product-detail\").hide();\r\n\r\n                            $(\"#\" + categoryID + \" .subcategory-link\").removeClass(\"subcategory_active\");\r\n                            $(this).addClass(\"subcategory_active\");\r\n\r\n                            $.ajax({\r\n                                type: \"POST\",\r\n                                url: \"https:\/\/indooptical.com\/wp-admin\/admin-ajax.php\",\r\n                                data: { action: \"load_products\", category_slug: categorySlug },\r\n                                beforeSend: function() {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(`<svg class=\"loading\"viewBox=\"25 25 50 50\">\r\n                                        <circle r=\"20\" cy=\"50\" cx=\"50\"><\/circle>\r\n                                    <\/svg>`).show();;\r\n                                },\r\n                                success: function(response) {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(response);\r\n                                },\r\n                                error: function() {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(\"<p>Error al cargar los productos.<\/p>\");\r\n                                }\r\n                            });\r\n                        });\r\n\r\n                        \/\/ Evento para mostrar los detalles del producto\r\n                        $(\"#\" + categoryID).on(\"click\", \".product-item\", function(e) {\r\n                            e.preventDefault();\r\n                            var productID = $(this).data(\"product-id\");\r\n\r\n                            $.ajax({\r\n                                type: \"POST\",\r\n                                url: \"https:\/\/indooptical.com\/wp-admin\/admin-ajax.php\",\r\n                                data: {\r\n                                    action: \"load_product_detail\",\r\n                                    product_id: productID\r\n                                },\r\n                                beforeSend: function() {\r\n                                     $(\"#\" + categoryID + \" #product-detail\").html(`<svg class=\"loading\"viewBox=\"25 25 50 50\">\r\n                                        <circle r=\"20\" cy=\"50\" cx=\"50\"><\/circle>\r\n                                    <\/svg>`).show();\r\n                                    $(\"#\" + categoryID + \" #product-list\").hide(); \/\/ Ocultar la lista de productos\r\n                                },\r\n                                success: function(response) {\r\n                                    $(\"#\" + categoryID + \" #product-detail\").html(response);\r\n                                },\r\n                                error: function() {\r\n                                    $(\"#\" + categoryID + \" #product-detail\").html(\"<p>Error al cargar el producto.<\/p>\");\r\n                                }\r\n                            });\r\n                        });\r\n                        \/\/ Bot\u00f3n para volver a la lista de productos\r\n                        $(document).on(\"click\", \"#back-to-products\", function(e) {\r\n                            e.preventDefault();\r\n                            $(\"#\" + categoryID + \" #product-detail\").hide();\r\n                            $(\"#\" + categoryID + \" #product-list\").show();\r\n                        });\r\n\r\n                        $(document).on(\"click\", \".thumbnail\", function() {\r\n                            var newImage = $(this).attr(\"data-large\"); \/\/ Obtener imagen grande\r\n                            $(\"#main-product-image\").attr(\"src\", newImage);\r\n                        });\r\n\r\n\r\n                        function updateGradientVisibility($content) {\r\n                            const scrollTop = $content.scrollTop();\r\n                            const scrollHeight = $content[0].scrollHeight;\r\n                            const clientHeight = $content[0].clientHeight;\r\n\r\n                            \/\/ Si est\u00e1 arriba del todo\r\n                            if (scrollTop <= 0) {\r\n                                $content.addClass(\"at-top\");\r\n                            } else {\r\n                                $content.removeClass(\"at-top\");\r\n                            }\r\n\r\n                            \/\/ Si est\u00e1 abajo del todo\r\n                            if (scrollTop + clientHeight >= scrollHeight - 1) {\r\n                                $content.addClass(\"at-bottom\");\r\n                            } else {\r\n                                $content.removeClass(\"at-bottom\");\r\n                            }\r\n                        }\r\n\r\n                        \/\/ Scroll hacia abajo \r\n                        $(document).on(\"click\", \".arrow-down\", function () {\r\n                            let content = $(this).closest(\".description-container\").find(\".description-content\");\r\n                            content.stop().animate({\r\n                                scrollTop: content.scrollTop() + 50 \r\n                            }, 200, function () {\r\n                                updateGradientVisibility(content);\r\n                            });\r\n                        });\r\n\r\n                        \/\/ Scroll hacia arriba\r\n                        $(document).on(\"click\", \".arrow-up\", function () {\r\n                            let content = $(this).closest(\".description-container\").find(\".description-content\");\r\n                            content.stop().animate({\r\n                                scrollTop: content.scrollTop() - 70 \r\n                            }, 200, function () {\r\n                                updateGradientVisibility(content);\r\n                            });\r\n                        });\r\n                        \r\n                        \r\n\r\n                        \/\/ Ejecutar cuando haya scroll dentro del contenido\r\n                        $(document).on(\"scroll\", \".description-content\", function () {\r\n                            updateGradientVisibility($(this));\r\n                        });\r\n\r\n                        \/\/ Ejecutar tambi\u00e9n justo despu\u00e9s de mostrar el detalle del producto\r\n                        $(document).on(\"click\", \".product-item\", function () {\r\n                            setTimeout(function () {\r\n                                $(\".description-content\").each(function () {\r\n                                    updateGradientVisibility($(this));\r\n                                });\r\n                            }, 300); \/\/ espera a que se cargue el contenido\r\n                        });\r\n                        $(\".description-content\").each(function () {\r\n                            updateGradientVisibility($(this));\r\n                        });\r\n\r\n\r\n\r\n\r\n                    });\r\n\r\n                <\/script>\r\n\r\n            <\/div>\r\n\r\n            <style>\r\n                .category-layout {\r\n                    display: flex;\r\n                    gap: 20px;\r\n                }\r\n                .category-sidebar {\r\n                    width: 25%;\r\n                    padding-right: 15px;\r\n                }\r\n                .subcategory-list {\r\n                    list-style: none;\r\n                    padding: 0;\r\n                    margin: 0px !important;\r\n                }\r\n                .subcategory-list li {\r\n                    margin: 10px 0;\r\n                }\r\n                .subcategory-list a.subcategory-link {\r\n                    font-weight: 400 !important;\r\n                }\r\n                a.subcategory-link {\r\n                    text-align: start;\r\n                }\r\n                ul.subcategory-list{\r\n                    display: flex;\r\n                    flex-direction: column;\r\n\r\n                }\r\n                .subcategory-link {\r\n                    cursor: pointer;\r\n                    text-decoration: none;\r\n                    color:var(--color-secondary-grey);\r\n                    display: block;\r\n                    transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;\r\n                }\r\n                .subcategory-list .subcategory-link:hover, .subcategory-list .subcategory-link:focus{\r\n                    color: var(--color-primary-green) !important;\r\n                    font-size: 19px !important;\r\n                    font-weight: 600 !important;\r\n                    \r\n                }\r\n                .subcategory-list a.subcategory_active {\r\n                    color: var(--color-primary-green) !important;\r\n                    font-weight: 600 !important;\r\n                }\r\n                .category-products {\r\n                    width: 75%;\r\n                }\r\n                .product-grid {\r\n                    display: grid;\r\n                    grid-template-columns: repeat(3, 1fr);\r\n                    gap: 20px;\r\n                }\r\n                .product-item {\r\n                    width: 90%;\r\n                    height: 35vh;\r\n                    text-align: center;\r\n                    border: 1px solid #ddd;\r\n                    padding: 10px;\r\n                }\r\n                .product-item img {\r\n                    max-width: 90%;\r\n                    height: auto;\r\n                }\r\n                .title_product {\r\n                    text-align: start !important;\r\n                    font-weight: 500;\r\n                }\r\n                .product-item img {\r\n                    width: auto !important;\r\n                    object-fit: cover;\r\n                }\r\n                .product-item img {\r\n                    height: 25vh !important;\r\n                    padding: 15px !important;\r\n                }\r\n                .product-item{\r\n                    padding: 15px !important;\r\n                }\r\n                .product-grid{\r\n                    display: grid !important;\r\n                    grid-template-columns: repeat(3, 1fr);\r\n                    gap: 20px;\r\n                }\r\n                .product-item {\r\n                    transition: transform 0.4s;\r\n                }\r\n\r\n                .product-item:hover img {\r\n                    transform: scale(1.1);\r\n                    transition: transform 0.4s;\r\n                }\r\n\r\n                .product-item:hover .title_product {\r\n                    font-weight: 700;\r\n                    transition: transform 0.4s;\r\n                }\r\n                a#back-to-products{\r\n                    color: var(--color-secondary-grey);\r\n                    font-weight: 500;\r\n                    text-decoration: none;\r\n                    font-size: 20px;\r\n                }\r\n                #product-info{\r\n                    gap: 20px;\r\n                }\r\n\r\n\r\n                \/*----------test----------*\/\r\n                @media screen and (max-width: 768px) {\r\n                    .category-layout {\r\n                        flex-direction: column;\r\n                    }\r\n\r\n                    .category-sidebar {\r\n                        width: 100%;\r\n                        padding-right: 0;\r\n                        overflow-x: auto;\r\n                        white-space: nowrap;\r\n                        margin-bottom: 20px;\r\n                    }\r\n\r\n                    .subcategory-list {\r\n                        flex-direction: row;\r\n                        gap: 10px;\r\n                        display: flex;\r\n                    }\r\n\r\n                    .subcategory-list li {\r\n                        margin: 0;\r\n                    }\r\n\r\n                    .subcategory-link {\r\n                        padding: 10px 15px;\r\n                        background-color: #f2f2f2;\r\n                        border-radius: 5px;\r\n                        white-space: nowrap;\r\n                        display: inline-block;\r\n                    }\r\n\r\n                    .subcategory-list .subcategory-link:hover,\r\n                    .subcategory-list .subcategory-link.subcategory_active {\r\n                        background-color: var(--color-primary-green);\r\n                        color: white !important;\r\n                    }\r\n\r\n                    .category-products {\r\n                        width: 100%;\r\n                    }\r\n\r\n                    .product-grid {\r\n                        grid-template-columns: repeat(2, 1fr);\r\n                    }\r\n\r\n                    .product-item img {\r\n                        height: auto !important;\r\n                    }\r\n                }\r\n\r\n                @media screen and (max-width: 480px) {\r\n                    .product-grid {\r\n                        grid-template-columns: 1fr;\r\n                    }\r\n                }\r\n\r\n            <\/style>\r\n\r\n            [\/vc_tta_section][vc_tta_section title=&#8221;Visual aids&#8221; tab_id=&#8221;1742396406827-c50eff6a-edd8&#8243;]<div class=\"ult-spacer spacer-69fb5bda79618\" data-id=\"69fb5bda79618\" data-height=\"40\" data-height-mobile=\"40\" data-height-tab=\"40\" data-height-tab-portrait=\"\" data-height-mobile-landscape=\"\" style=\"clear:both;display:block;\"><\/div>\r\n            <div class=\"category-layout\" id=\"category_list_69fb5bda79653\">\r\n                <!-- Columna de Subcategor\u00edas -->\r\n                <div class=\"category-sidebar\">\r\n                    <ul class=\"subcategory-list\">\r\n                                            <\/ul>\r\n                <\/div>\r\n\r\n                <!-- Columna de Productos -->\r\n                <div class=\"category-products\">\r\n                    <div id=\"product-list\">\r\n                                            <\/div>\r\n                    <div id=\"product-detail\" style=\"display: none;\">\r\n                        <!-- Aqu\u00ed se cargar\u00e1 el detalle del producto -->\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <script>\r\n                    jQuery(document).ready(function($) {\r\n                        var categoryID = \"category_list_69fb5bda79653\";\r\n\r\n                        \/\/ Asegurar que las subcategor\u00edas carguen y seleccionar la primera autom\u00e1ticamente\r\n                        function selectFirstSubcategory() {\r\n                            var firstSubcategory = $(\"#\" + categoryID + \" .subcategory-link:first\");\r\n                            \r\n                            if (firstSubcategory.length > 0) {\r\n                                firstSubcategory.addClass(\"subcategory_active\"); \/\/ Agrega la clase activa\r\n                                firstSubcategory.trigger(\"click\"); \/\/ Simula un clic para cargar los productos\r\n                            }\r\n                        }\r\n\r\n                        \/\/ Ejecutar la selecci\u00f3n despu\u00e9s de que las subcategor\u00edas cargan\r\n                        setTimeout(selectFirstSubcategory, 100);\r\n                        \/\/ Evento para cargar productos de una categor\u00eda\r\n                        $(\".vc_tta-tab\").on(\"click\", function() {\r\n                            if (!$(\"#\" + categoryID).hasClass(\"loaded\")) {\r\n                                $(\"#\" + categoryID).addClass(\"loaded\"); \/\/ Marcar como cargado\r\n                                selectFirstSubcategory(); \r\n                            }\r\n                        });\r\n                        $(\"#\" + categoryID).on(\"click\", \".subcategory-link\", function(e) {\r\n                            e.preventDefault();\r\n                            var categorySlug = $(this).data(\"category-slug\");\r\n\r\n                            $(\"#\" + categoryID + \" #product-detail\").hide();\r\n\r\n                            $(\"#\" + categoryID + \" .subcategory-link\").removeClass(\"subcategory_active\");\r\n                            $(this).addClass(\"subcategory_active\");\r\n\r\n                            $.ajax({\r\n                                type: \"POST\",\r\n                                url: \"https:\/\/indooptical.com\/wp-admin\/admin-ajax.php\",\r\n                                data: { action: \"load_products\", category_slug: categorySlug },\r\n                                beforeSend: function() {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(`<svg class=\"loading\"viewBox=\"25 25 50 50\">\r\n                                        <circle r=\"20\" cy=\"50\" cx=\"50\"><\/circle>\r\n                                    <\/svg>`).show();;\r\n                                },\r\n                                success: function(response) {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(response);\r\n                                },\r\n                                error: function() {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(\"<p>Error al cargar los productos.<\/p>\");\r\n                                }\r\n                            });\r\n                        });\r\n\r\n                        \/\/ Evento para mostrar los detalles del producto\r\n                        $(\"#\" + categoryID).on(\"click\", \".product-item\", function(e) {\r\n                            e.preventDefault();\r\n                            var productID = $(this).data(\"product-id\");\r\n\r\n                            $.ajax({\r\n                                type: \"POST\",\r\n                                url: \"https:\/\/indooptical.com\/wp-admin\/admin-ajax.php\",\r\n                                data: {\r\n                                    action: \"load_product_detail\",\r\n                                    product_id: productID\r\n                                },\r\n                                beforeSend: function() {\r\n                                     $(\"#\" + categoryID + \" #product-detail\").html(`<svg class=\"loading\"viewBox=\"25 25 50 50\">\r\n                                        <circle r=\"20\" cy=\"50\" cx=\"50\"><\/circle>\r\n                                    <\/svg>`).show();\r\n                                    $(\"#\" + categoryID + \" #product-list\").hide(); \/\/ Ocultar la lista de productos\r\n                                },\r\n                                success: function(response) {\r\n                                    $(\"#\" + categoryID + \" #product-detail\").html(response);\r\n                                },\r\n                                error: function() {\r\n                                    $(\"#\" + categoryID + \" #product-detail\").html(\"<p>Error al cargar el producto.<\/p>\");\r\n                                }\r\n                            });\r\n                        });\r\n                        \/\/ Bot\u00f3n para volver a la lista de productos\r\n                        $(document).on(\"click\", \"#back-to-products\", function(e) {\r\n                            e.preventDefault();\r\n                            $(\"#\" + categoryID + \" #product-detail\").hide();\r\n                            $(\"#\" + categoryID + \" #product-list\").show();\r\n                        });\r\n\r\n                        $(document).on(\"click\", \".thumbnail\", function() {\r\n                            var newImage = $(this).attr(\"data-large\"); \/\/ Obtener imagen grande\r\n                            $(\"#main-product-image\").attr(\"src\", newImage);\r\n                        });\r\n\r\n\r\n                        function updateGradientVisibility($content) {\r\n                            const scrollTop = $content.scrollTop();\r\n                            const scrollHeight = $content[0].scrollHeight;\r\n                            const clientHeight = $content[0].clientHeight;\r\n\r\n                            \/\/ Si est\u00e1 arriba del todo\r\n                            if (scrollTop <= 0) {\r\n                                $content.addClass(\"at-top\");\r\n                            } else {\r\n                                $content.removeClass(\"at-top\");\r\n                            }\r\n\r\n                            \/\/ Si est\u00e1 abajo del todo\r\n                            if (scrollTop + clientHeight >= scrollHeight - 1) {\r\n                                $content.addClass(\"at-bottom\");\r\n                            } else {\r\n                                $content.removeClass(\"at-bottom\");\r\n                            }\r\n                        }\r\n\r\n                        \/\/ Scroll hacia abajo \r\n                        $(document).on(\"click\", \".arrow-down\", function () {\r\n                            let content = $(this).closest(\".description-container\").find(\".description-content\");\r\n                            content.stop().animate({\r\n                                scrollTop: content.scrollTop() + 50 \r\n                            }, 200, function () {\r\n                                updateGradientVisibility(content);\r\n                            });\r\n                        });\r\n\r\n                        \/\/ Scroll hacia arriba\r\n                        $(document).on(\"click\", \".arrow-up\", function () {\r\n                            let content = $(this).closest(\".description-container\").find(\".description-content\");\r\n                            content.stop().animate({\r\n                                scrollTop: content.scrollTop() - 70 \r\n                            }, 200, function () {\r\n                                updateGradientVisibility(content);\r\n                            });\r\n                        });\r\n                        \r\n                        \r\n\r\n                        \/\/ Ejecutar cuando haya scroll dentro del contenido\r\n                        $(document).on(\"scroll\", \".description-content\", function () {\r\n                            updateGradientVisibility($(this));\r\n                        });\r\n\r\n                        \/\/ Ejecutar tambi\u00e9n justo despu\u00e9s de mostrar el detalle del producto\r\n                        $(document).on(\"click\", \".product-item\", function () {\r\n                            setTimeout(function () {\r\n                                $(\".description-content\").each(function () {\r\n                                    updateGradientVisibility($(this));\r\n                                });\r\n                            }, 300); \/\/ espera a que se cargue el contenido\r\n                        });\r\n                        $(\".description-content\").each(function () {\r\n                            updateGradientVisibility($(this));\r\n                        });\r\n\r\n\r\n\r\n\r\n                    });\r\n\r\n                <\/script>\r\n\r\n            <\/div>\r\n\r\n            <style>\r\n                .category-layout {\r\n                    display: flex;\r\n                    gap: 20px;\r\n                }\r\n                .category-sidebar {\r\n                    width: 25%;\r\n                    padding-right: 15px;\r\n                }\r\n                .subcategory-list {\r\n                    list-style: none;\r\n                    padding: 0;\r\n                    margin: 0px !important;\r\n                }\r\n                .subcategory-list li {\r\n                    margin: 10px 0;\r\n                }\r\n                .subcategory-list a.subcategory-link {\r\n                    font-weight: 400 !important;\r\n                }\r\n                a.subcategory-link {\r\n                    text-align: start;\r\n                }\r\n                ul.subcategory-list{\r\n                    display: flex;\r\n                    flex-direction: column;\r\n\r\n                }\r\n                .subcategory-link {\r\n                    cursor: pointer;\r\n                    text-decoration: none;\r\n                    color:var(--color-secondary-grey);\r\n                    display: block;\r\n                    transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;\r\n                }\r\n                .subcategory-list .subcategory-link:hover, .subcategory-list .subcategory-link:focus{\r\n                    color: var(--color-primary-green) !important;\r\n                    font-size: 19px !important;\r\n                    font-weight: 600 !important;\r\n                    \r\n                }\r\n                .subcategory-list a.subcategory_active {\r\n                    color: var(--color-primary-green) !important;\r\n                    font-weight: 600 !important;\r\n                }\r\n                .category-products {\r\n                    width: 75%;\r\n                }\r\n                .product-grid {\r\n                    display: grid;\r\n                    grid-template-columns: repeat(3, 1fr);\r\n                    gap: 20px;\r\n                }\r\n                .product-item {\r\n                    width: 90%;\r\n                    height: 35vh;\r\n                    text-align: center;\r\n                    border: 1px solid #ddd;\r\n                    padding: 10px;\r\n                }\r\n                .product-item img {\r\n                    max-width: 90%;\r\n                    height: auto;\r\n                }\r\n                .title_product {\r\n                    text-align: start !important;\r\n                    font-weight: 500;\r\n                }\r\n                .product-item img {\r\n                    width: auto !important;\r\n                    object-fit: cover;\r\n                }\r\n                .product-item img {\r\n                    height: 25vh !important;\r\n                    padding: 15px !important;\r\n                }\r\n                .product-item{\r\n                    padding: 15px !important;\r\n                }\r\n                .product-grid{\r\n                    display: grid !important;\r\n                    grid-template-columns: repeat(3, 1fr);\r\n                    gap: 20px;\r\n                }\r\n                .product-item {\r\n                    transition: transform 0.4s;\r\n                }\r\n\r\n                .product-item:hover img {\r\n                    transform: scale(1.1);\r\n                    transition: transform 0.4s;\r\n                }\r\n\r\n                .product-item:hover .title_product {\r\n                    font-weight: 700;\r\n                    transition: transform 0.4s;\r\n                }\r\n                a#back-to-products{\r\n                    color: var(--color-secondary-grey);\r\n                    font-weight: 500;\r\n                    text-decoration: none;\r\n                    font-size: 20px;\r\n                }\r\n                #product-info{\r\n                    gap: 20px;\r\n                }\r\n\r\n\r\n                \/*----------test----------*\/\r\n                @media screen and (max-width: 768px) {\r\n                    .category-layout {\r\n                        flex-direction: column;\r\n                    }\r\n\r\n                    .category-sidebar {\r\n                        width: 100%;\r\n                        padding-right: 0;\r\n                        overflow-x: auto;\r\n                        white-space: nowrap;\r\n                        margin-bottom: 20px;\r\n                    }\r\n\r\n                    .subcategory-list {\r\n                        flex-direction: row;\r\n                        gap: 10px;\r\n                        display: flex;\r\n                    }\r\n\r\n                    .subcategory-list li {\r\n                        margin: 0;\r\n                    }\r\n\r\n                    .subcategory-link {\r\n                        padding: 10px 15px;\r\n                        background-color: #f2f2f2;\r\n                        border-radius: 5px;\r\n                        white-space: nowrap;\r\n                        display: inline-block;\r\n                    }\r\n\r\n                    .subcategory-list .subcategory-link:hover,\r\n                    .subcategory-list .subcategory-link.subcategory_active {\r\n                        background-color: var(--color-primary-green);\r\n                        color: white !important;\r\n                    }\r\n\r\n                    .category-products {\r\n                        width: 100%;\r\n                    }\r\n\r\n                    .product-grid {\r\n                        grid-template-columns: repeat(2, 1fr);\r\n                    }\r\n\r\n                    .product-item img {\r\n                        height: auto !important;\r\n                    }\r\n                }\r\n\r\n                @media screen and (max-width: 480px) {\r\n                    .product-grid {\r\n                        grid-template-columns: 1fr;\r\n                    }\r\n                }\r\n\r\n            <\/style>\r\n\r\n            [\/vc_tta_section][vc_tta_section title=&#8221;Promotions and news&#8221; tab_id=&#8221;1742289930448-784d1d55-a55b&#8221;]<div class=\"ult-spacer spacer-69fb5bda79a5c\" data-id=\"69fb5bda79a5c\" data-height=\"40\" data-height-mobile=\"40\" data-height-tab=\"40\" data-height-tab-portrait=\"\" data-height-mobile-landscape=\"\" style=\"clear:both;display:block;\"><\/div>\r\n            <div class=\"category-layout\" id=\"category_list_69fb5bda79a9b\">\r\n                <!-- Columna de Subcategor\u00edas -->\r\n                <div class=\"category-sidebar\">\r\n                    <ul class=\"subcategory-list\">\r\n                                            <\/ul>\r\n                <\/div>\r\n\r\n                <!-- Columna de Productos -->\r\n                <div class=\"category-products\">\r\n                    <div id=\"product-list\">\r\n                                            <\/div>\r\n                    <div id=\"product-detail\" style=\"display: none;\">\r\n                        <!-- Aqu\u00ed se cargar\u00e1 el detalle del producto -->\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <script>\r\n                    jQuery(document).ready(function($) {\r\n                        var categoryID = \"category_list_69fb5bda79a9b\";\r\n\r\n                        \/\/ Asegurar que las subcategor\u00edas carguen y seleccionar la primera autom\u00e1ticamente\r\n                        function selectFirstSubcategory() {\r\n                            var firstSubcategory = $(\"#\" + categoryID + \" .subcategory-link:first\");\r\n                            \r\n                            if (firstSubcategory.length > 0) {\r\n                                firstSubcategory.addClass(\"subcategory_active\"); \/\/ Agrega la clase activa\r\n                                firstSubcategory.trigger(\"click\"); \/\/ Simula un clic para cargar los productos\r\n                            }\r\n                        }\r\n\r\n                        \/\/ Ejecutar la selecci\u00f3n despu\u00e9s de que las subcategor\u00edas cargan\r\n                        setTimeout(selectFirstSubcategory, 100);\r\n                        \/\/ Evento para cargar productos de una categor\u00eda\r\n                        $(\".vc_tta-tab\").on(\"click\", function() {\r\n                            if (!$(\"#\" + categoryID).hasClass(\"loaded\")) {\r\n                                $(\"#\" + categoryID).addClass(\"loaded\"); \/\/ Marcar como cargado\r\n                                selectFirstSubcategory(); \r\n                            }\r\n                        });\r\n                        $(\"#\" + categoryID).on(\"click\", \".subcategory-link\", function(e) {\r\n                            e.preventDefault();\r\n                            var categorySlug = $(this).data(\"category-slug\");\r\n\r\n                            $(\"#\" + categoryID + \" #product-detail\").hide();\r\n\r\n                            $(\"#\" + categoryID + \" .subcategory-link\").removeClass(\"subcategory_active\");\r\n                            $(this).addClass(\"subcategory_active\");\r\n\r\n                            $.ajax({\r\n                                type: \"POST\",\r\n                                url: \"https:\/\/indooptical.com\/wp-admin\/admin-ajax.php\",\r\n                                data: { action: \"load_products\", category_slug: categorySlug },\r\n                                beforeSend: function() {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(`<svg class=\"loading\"viewBox=\"25 25 50 50\">\r\n                                        <circle r=\"20\" cy=\"50\" cx=\"50\"><\/circle>\r\n                                    <\/svg>`).show();;\r\n                                },\r\n                                success: function(response) {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(response);\r\n                                },\r\n                                error: function() {\r\n                                    $(\"#\" + categoryID + \" #product-list\").html(\"<p>Error al cargar los productos.<\/p>\");\r\n                                }\r\n                            });\r\n                        });\r\n\r\n                        \/\/ Evento para mostrar los detalles del producto\r\n                        $(\"#\" + categoryID).on(\"click\", \".product-item\", function(e) {\r\n                            e.preventDefault();\r\n                            var productID = $(this).data(\"product-id\");\r\n\r\n                            $.ajax({\r\n                                type: \"POST\",\r\n                                url: \"https:\/\/indooptical.com\/wp-admin\/admin-ajax.php\",\r\n                                data: {\r\n                                    action: \"load_product_detail\",\r\n                                    product_id: productID\r\n                                },\r\n                                beforeSend: function() {\r\n                                     $(\"#\" + categoryID + \" #product-detail\").html(`<svg class=\"loading\"viewBox=\"25 25 50 50\">\r\n                                        <circle r=\"20\" cy=\"50\" cx=\"50\"><\/circle>\r\n                                    <\/svg>`).show();\r\n                                    $(\"#\" + categoryID + \" #product-list\").hide(); \/\/ Ocultar la lista de productos\r\n                                },\r\n                                success: function(response) {\r\n                                    $(\"#\" + categoryID + \" #product-detail\").html(response);\r\n                                },\r\n                                error: function() {\r\n                                    $(\"#\" + categoryID + \" #product-detail\").html(\"<p>Error al cargar el producto.<\/p>\");\r\n                                }\r\n                            });\r\n                        });\r\n                        \/\/ Bot\u00f3n para volver a la lista de productos\r\n                        $(document).on(\"click\", \"#back-to-products\", function(e) {\r\n                            e.preventDefault();\r\n                            $(\"#\" + categoryID + \" #product-detail\").hide();\r\n                            $(\"#\" + categoryID + \" #product-list\").show();\r\n                        });\r\n\r\n                        $(document).on(\"click\", \".thumbnail\", function() {\r\n                            var newImage = $(this).attr(\"data-large\"); \/\/ Obtener imagen grande\r\n                            $(\"#main-product-image\").attr(\"src\", newImage);\r\n                        });\r\n\r\n\r\n                        function updateGradientVisibility($content) {\r\n                            const scrollTop = $content.scrollTop();\r\n                            const scrollHeight = $content[0].scrollHeight;\r\n                            const clientHeight = $content[0].clientHeight;\r\n\r\n                            \/\/ Si est\u00e1 arriba del todo\r\n                            if (scrollTop <= 0) {\r\n                                $content.addClass(\"at-top\");\r\n                            } else {\r\n                                $content.removeClass(\"at-top\");\r\n                            }\r\n\r\n                            \/\/ Si est\u00e1 abajo del todo\r\n                            if (scrollTop + clientHeight >= scrollHeight - 1) {\r\n                                $content.addClass(\"at-bottom\");\r\n                            } else {\r\n                                $content.removeClass(\"at-bottom\");\r\n                            }\r\n                        }\r\n\r\n                        \/\/ Scroll hacia abajo \r\n                        $(document).on(\"click\", \".arrow-down\", function () {\r\n                            let content = $(this).closest(\".description-container\").find(\".description-content\");\r\n                            content.stop().animate({\r\n                                scrollTop: content.scrollTop() + 50 \r\n                            }, 200, function () {\r\n                                updateGradientVisibility(content);\r\n                            });\r\n                        });\r\n\r\n                        \/\/ Scroll hacia arriba\r\n                        $(document).on(\"click\", \".arrow-up\", function () {\r\n                            let content = $(this).closest(\".description-container\").find(\".description-content\");\r\n                            content.stop().animate({\r\n                                scrollTop: content.scrollTop() - 70 \r\n                            }, 200, function () {\r\n                                updateGradientVisibility(content);\r\n                            });\r\n                        });\r\n                        \r\n                        \r\n\r\n                        \/\/ Ejecutar cuando haya scroll dentro del contenido\r\n                        $(document).on(\"scroll\", \".description-content\", function () {\r\n                            updateGradientVisibility($(this));\r\n                        });\r\n\r\n                        \/\/ Ejecutar tambi\u00e9n justo despu\u00e9s de mostrar el detalle del producto\r\n                        $(document).on(\"click\", \".product-item\", function () {\r\n                            setTimeout(function () {\r\n                                $(\".description-content\").each(function () {\r\n                                    updateGradientVisibility($(this));\r\n                                });\r\n                            }, 300); \/\/ espera a que se cargue el contenido\r\n                        });\r\n                        $(\".description-content\").each(function () {\r\n                            updateGradientVisibility($(this));\r\n                        });\r\n\r\n\r\n\r\n\r\n                    });\r\n\r\n                <\/script>\r\n\r\n            <\/div>\r\n\r\n            <style>\r\n                .category-layout {\r\n                    display: flex;\r\n                    gap: 20px;\r\n                }\r\n                .category-sidebar {\r\n                    width: 25%;\r\n                    padding-right: 15px;\r\n                }\r\n                .subcategory-list {\r\n                    list-style: none;\r\n                    padding: 0;\r\n                    margin: 0px !important;\r\n                }\r\n                .subcategory-list li {\r\n                    margin: 10px 0;\r\n                }\r\n                .subcategory-list a.subcategory-link {\r\n                    font-weight: 400 !important;\r\n                }\r\n                a.subcategory-link {\r\n                    text-align: start;\r\n                }\r\n                ul.subcategory-list{\r\n                    display: flex;\r\n                    flex-direction: column;\r\n\r\n                }\r\n                .subcategory-link {\r\n                    cursor: pointer;\r\n                    text-decoration: none;\r\n                    color:var(--color-secondary-grey);\r\n                    display: block;\r\n                    transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;\r\n                }\r\n                .subcategory-list .subcategory-link:hover, .subcategory-list .subcategory-link:focus{\r\n                    color: var(--color-primary-green) !important;\r\n                    font-size: 19px !important;\r\n                    font-weight: 600 !important;\r\n                    \r\n                }\r\n                .subcategory-list a.subcategory_active {\r\n                    color: var(--color-primary-green) !important;\r\n                    font-weight: 600 !important;\r\n                }\r\n                .category-products {\r\n                    width: 75%;\r\n                }\r\n                .product-grid {\r\n                    display: grid;\r\n                    grid-template-columns: repeat(3, 1fr);\r\n                    gap: 20px;\r\n                }\r\n                .product-item {\r\n                    width: 90%;\r\n                    height: 35vh;\r\n                    text-align: center;\r\n                    border: 1px solid #ddd;\r\n                    padding: 10px;\r\n                }\r\n                .product-item img {\r\n                    max-width: 90%;\r\n                    height: auto;\r\n                }\r\n                .title_product {\r\n                    text-align: start !important;\r\n                    font-weight: 500;\r\n                }\r\n                .product-item img {\r\n                    width: auto !important;\r\n                    object-fit: cover;\r\n                }\r\n                .product-item img {\r\n                    height: 25vh !important;\r\n                    padding: 15px !important;\r\n                }\r\n                .product-item{\r\n                    padding: 15px !important;\r\n                }\r\n                .product-grid{\r\n                    display: grid !important;\r\n                    grid-template-columns: repeat(3, 1fr);\r\n                    gap: 20px;\r\n                }\r\n                .product-item {\r\n                    transition: transform 0.4s;\r\n                }\r\n\r\n                .product-item:hover img {\r\n                    transform: scale(1.1);\r\n                    transition: transform 0.4s;\r\n                }\r\n\r\n                .product-item:hover .title_product {\r\n                    font-weight: 700;\r\n                    transition: transform 0.4s;\r\n                }\r\n                a#back-to-products{\r\n                    color: var(--color-secondary-grey);\r\n                    font-weight: 500;\r\n                    text-decoration: none;\r\n                    font-size: 20px;\r\n                }\r\n                #product-info{\r\n                    gap: 20px;\r\n                }\r\n\r\n\r\n                \/*----------test----------*\/\r\n                @media screen and (max-width: 768px) {\r\n                    .category-layout {\r\n                        flex-direction: column;\r\n                    }\r\n\r\n                    .category-sidebar {\r\n                        width: 100%;\r\n                        padding-right: 0;\r\n                        overflow-x: auto;\r\n                        white-space: nowrap;\r\n                        margin-bottom: 20px;\r\n                    }\r\n\r\n                    .subcategory-list {\r\n                        flex-direction: row;\r\n                        gap: 10px;\r\n                        display: flex;\r\n                    }\r\n\r\n                    .subcategory-list li {\r\n                        margin: 0;\r\n                    }\r\n\r\n                    .subcategory-link {\r\n                        padding: 10px 15px;\r\n                        background-color: #f2f2f2;\r\n                        border-radius: 5px;\r\n                        white-space: nowrap;\r\n                        display: inline-block;\r\n                    }\r\n\r\n                    .subcategory-list .subcategory-link:hover,\r\n                    .subcategory-list .subcategory-link.subcategory_active {\r\n                        background-color: var(--color-primary-green);\r\n                        color: white !important;\r\n                    }\r\n\r\n                    .category-products {\r\n                        width: 100%;\r\n                    }\r\n\r\n                    .product-grid {\r\n                        grid-template-columns: repeat(2, 1fr);\r\n                    }\r\n\r\n                    .product-item img {\r\n                        height: auto !important;\r\n                    }\r\n                }\r\n\r\n                @media screen and (max-width: 480px) {\r\n                    .product-grid {\r\n                        grid-template-columns: 1fr;\r\n                    }\r\n                }\r\n\r\n            <\/style>\r\n\r\n            [\/vc_tta_section][\/vc_tta_tabs]<div class=\"spacer\"><\/div><div class='spacer display-none-mobile' style='height: 5vh;'><\/div><div class='spacer display-none-desktop' style='height: 25px;'><\/div>[\/vc_column][\/vc_row][vc_row][vc_column]<div class=\"spacer\"><\/div><div class='spacer display-none-mobile' style='height: 15vh;'><\/div><div class='spacer display-none-desktop' style='height: 75px;'><\/div>[\/vc_column][\/vc_row][vc_section full_width=&#8221;stretch_row&#8221; css_animation=&#8221;fadeIn&#8221; el_class=&#8221;end_footer&#8221;][vc_row][vc_column][vc_wp_text]<\/p>\n<p class=\"title-h1\" style=\"text-align: center;\"><span data-sheets-root=\"1\">The most innovative technology, in your hands<\/span><\/p>\n<p>[\/vc_wp_text][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; equal_height=&#8221;yes&#8221; el_class=&#8221;footer_end&#8221;][vc_column width=&#8221;1\/12&#8243;][\/vc_column][vc_column width=&#8221;5\/6&#8243;]<div id=\"ult-carousel-29341471569fb5bda7a27b\" class=\"ult-carousel-wrapper  slider_home ult_horizontal\" data-gutter=\"15\" data-rtl=\"false\" ><div class=\"ult-carousel-234011610569fb5bda7a19f \" >[vc_row_inner][vc_column_inner width=&#8221;4\/12&#8243;][vc_single_image image=&#8221;4576&#8243; img_size=&#8221;330&#215;330&#8243; el_class=&#8221;newsletter_img&#8221;][\/vc_column_inner][vc_column_inner el_class=&#8221;newsletter_slider&#8221; width=&#8221;8\/12&#8243;][vc_wp_text]<span data-sheets-root=\"1\">Quality, precision, and durability. Excellent post-sales service.<\/span>[\/vc_wp_text]<div class=\"ult-item-wrap\" data-animation=\"animated no-animation\"><div class=\"spacer\"><\/div><div class='spacer display-none-mobile' style='height: 2vh;'><\/div><div class='spacer display-none-desktop' style='height: 10px;'><\/div><\/div>[vc_wp_text]<\/p>\n<p class=\"slider_name\" style=\"text-align: left;\"><span data-sheets-root=\"1\">Juan Vicente &#8211; Sirvent \u00d3ptica Vistalia (Spain)<\/span><\/p>\n<p>[\/vc_wp_text][vc_separator color=&#8221;custom&#8221; align=&#8221;align_left&#8221; el_width=&#8221;30&#8243; el_class=&#8221;separador_line&#8221;][\/vc_column_inner][\/vc_row_inner]<\/div><\/div>\t\t\t<script type=\"text\/javascript\">\n\t\t\t\tjQuery(document).ready(function ($) {\n\t\t\t\t\tif( typeof jQuery('.ult-carousel-234011610569fb5bda7a19f').slick == \"function\"){\n\t\t\t\t\t\t$('.ult-carousel-234011610569fb5bda7a19f').slick({dots: true,autoplay: true,autoplaySpeed: \"5000\",speed: \"300\",infinite: true,arrows: false,slidesToScroll:1,slidesToShow:1,swipe: true,draggable: true,touchMove: true,pauseOnHover: true,pauseOnFocus: false,responsive: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t  breakpoint: 1026,\n\t\t\t\t\t\t\t  settings: {\n\t\t\t\t\t\t\t\tslidesToShow: 1,\n\t\t\t\t\t\t\t\tslidesToScroll: 1,  \n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t  breakpoint: 1025,\n\t\t\t\t\t\t\t  settings: {\n\t\t\t\t\t\t\t\tslidesToShow: 1,\n\t\t\t\t\t\t\t\tslidesToScroll: 1\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t  breakpoint: 760,\n\t\t\t\t\t\t\t  settings: {\n\t\t\t\t\t\t\t\tslidesToShow: 1,\n\t\t\t\t\t\t\t\tslidesToScroll: 1\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t],pauseOnDotsHover: true,customPaging: function(slider, i) {\n                   return '<i type=\"button\" style= \"color:#00833e;\" class=\"ultsl-record\" data-role=\"none\"><\/i>';\n                },});\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t<\/script>\n\t\t\t[\/vc_column][vc_column width=&#8221;1\/12&#8243;][\/vc_column][\/vc_row][vc_row][vc_column]<div class=\"spacer\"><\/div><div class='spacer display-none-mobile' style='height: 4vh;'><\/div><div class='spacer display-none-desktop' style='height: 20px;'><\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_wp_text el_class=&#8221;title-newsletter&#8221;]<\/p>\n<p class=\"title-h2 text-light\" style=\"text-align: center;\">Subscribe to our newsletter<\/p>\n<p>[\/vc_wp_text][vc_wp_text]<\/p>\n<p class=\"tetx-normal text-light\" style=\"text-align: center;\">and be the first to know about our latest news.<\/p>\n<p>[\/vc_wp_text][\/vc_column][\/vc_row][vc_row el_class=&#8221;newsletter&#8221;][vc_column]\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f12975-o1\" lang=\"es-CL\" dir=\"ltr\" data-wpcf7-id=\"12975\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/cl\/wp-json\/wp\/v2\/pages\/12583#wpcf7-f12975-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"12975\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f12975-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<div class=\"custom-form-suscripcion\">\n\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Escribe tu correo electr\u00f3nico\" value=\"\" type=\"text\" name=\"email\" \/><\/span><br \/>\n<input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Subscribirme\" \/>\n\t<\/p>\n<\/div><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n[\/vc_column][\/vc_row][vc_row][vc_column]<div class=\"spacer\"><\/div><div class='spacer display-none-mobile' style='height: 4vh;'><\/div><div class='spacer display-none-desktop' style='height: 20px;'><\/div>[\/vc_column][\/vc_row][\/vc_section]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row_content_no_spaces&#8221;][vc_column][\/vc_column][\/vc_row][vc_row][vc_column][vc_tta_tabs active_section=&#8221;1&#8243; el_class=&#8221;pestana_indo&#8221;][vc_tta_section title=&#8221;Diagnosis&#8221; tab_id=&#8221;1742229521728-2810c47d-d145&#8243;][\/vc_tta_section][vc_tta_section title=&#8221;Cabinet&#8221; tab_id=&#8221;1741778832146-157f1f7c-75b9&#8243;][\/vc_tta_section][vc_tta_section title=&#8221;Workshop&#8221; tab_id=&#8221;1742289921798-bc93fd67-9e8f&#8221;][\/vc_tta_section][vc_tta_section title=&#8221;Ophthalmology treatments&#8221; tab_id=&#8221;1742396374487-17f53663-9a20&#8243;][\/vc_tta_section][vc_tta_section title=&#8221;Exploration lenses&#8221; tab_id=&#8221;1742229547973-bd7edc35-d97c&#8221;][\/vc_tta_section][vc_tta_section title=&#8221;Hand instruments&#8221; tab_id=&#8221;1742289886409-b649d589-0314&#8243;][\/vc_tta_section][vc_tta_section title=&#8221;Accessories&#8221; tab_id=&#8221;1742289905674-667bb3fb-9214&#8243;][\/vc_tta_section][vc_tta_section title=&#8221;Visual aids&#8221; tab_id=&#8221;1742396406827-c50eff6a-edd8&#8243;][\/vc_tta_section][vc_tta_section title=&#8221;Promotions and news&#8221; tab_id=&#8221;1742289930448-784d1d55-a55b&#8221;][\/vc_tta_section][\/vc_tta_tabs][\/vc_column][\/vc_row][vc_row][vc_column][\/vc_column][\/vc_row][vc_section full_width=&#8221;stretch_row&#8221; css_animation=&#8221;fadeIn&#8221; el_class=&#8221;end_footer&#8221;][vc_row][vc_column][vc_wp_text] The most innovative technology, in your hands [\/vc_wp_text][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; equal_height=&#8221;yes&#8221; el_class=&#8221;footer_end&#8221;][vc_column width=&#8221;1\/12&#8243;][\/vc_column][vc_column width=&#8221;5\/6&#8243;][\/vc_column][vc_column width=&#8221;1\/12&#8243;][\/vc_column][\/vc_row][vc_row][vc_column][\/vc_column][\/vc_row][vc_row][vc_column][vc_wp_text el_class=&#8221;title-newsletter&#8221;] Subscribe to our newsletter [\/vc_wp_text][vc_wp_text] and be the first [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-12583","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Equipment - Indo<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/indooptical.com\/cl\/equipment\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Equipment - Indo\" \/>\n<meta property=\"og:description\" content=\"[vc_row full_width=&#8221;stretch_row_content_no_spaces&#8221;][vc_column][\/vc_column][\/vc_row][vc_row][vc_column][vc_tta_tabs active_section=&#8221;1&#8243; el_class=&#8221;pestana_indo&#8221;][vc_tta_section title=&#8221;Diagnosis&#8221; tab_id=&#8221;1742229521728-2810c47d-d145&#8243;][\/vc_tta_section][vc_tta_section title=&#8221;Cabinet&#8221; tab_id=&#8221;1741778832146-157f1f7c-75b9&#8243;][\/vc_tta_section][vc_tta_section title=&#8221;Workshop&#8221; tab_id=&#8221;1742289921798-bc93fd67-9e8f&#8221;][\/vc_tta_section][vc_tta_section title=&#8221;Ophthalmology treatments&#8221; tab_id=&#8221;1742396374487-17f53663-9a20&#8243;][\/vc_tta_section][vc_tta_section title=&#8221;Exploration lenses&#8221; tab_id=&#8221;1742229547973-bd7edc35-d97c&#8221;][\/vc_tta_section][vc_tta_section title=&#8221;Hand instruments&#8221; tab_id=&#8221;1742289886409-b649d589-0314&#8243;][\/vc_tta_section][vc_tta_section title=&#8221;Accessories&#8221; tab_id=&#8221;1742289905674-667bb3fb-9214&#8243;][\/vc_tta_section][vc_tta_section title=&#8221;Visual aids&#8221; tab_id=&#8221;1742396406827-c50eff6a-edd8&#8243;][\/vc_tta_section][vc_tta_section title=&#8221;Promotions and news&#8221; tab_id=&#8221;1742289930448-784d1d55-a55b&#8221;][\/vc_tta_section][\/vc_tta_tabs][\/vc_column][\/vc_row][vc_row][vc_column][\/vc_column][\/vc_row][vc_section full_width=&#8221;stretch_row&#8221; css_animation=&#8221;fadeIn&#8221; el_class=&#8221;end_footer&#8221;][vc_row][vc_column][vc_wp_text] The most innovative technology, in your hands [\/vc_wp_text][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; equal_height=&#8221;yes&#8221; el_class=&#8221;footer_end&#8221;][vc_column width=&#8221;1\/12&#8243;][\/vc_column][vc_column width=&#8221;5\/6&#8243;][\/vc_column][vc_column width=&#8221;1\/12&#8243;][\/vc_column][\/vc_row][vc_row][vc_column][\/vc_column][\/vc_row][vc_row][vc_column][vc_wp_text el_class=&#8221;title-newsletter&#8221;] Subscribe to our newsletter [\/vc_wp_text][vc_wp_text] and be the first [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/indooptical.com\/cl\/equipment\/\" \/>\n<meta property=\"og:site_name\" content=\"Indo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/indooptical.com\\\/cl\\\/equipment\\\/\",\"url\":\"https:\\\/\\\/indooptical.com\\\/cl\\\/equipment\\\/\",\"name\":\"Equipment - Indo\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/indooptical.com\\\/es\\\/#website\"},\"datePublished\":\"2025-03-12T09:07:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/indooptical.com\\\/cl\\\/equipment\\\/#breadcrumb\"},\"inLanguage\":\"es-CL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/indooptical.com\\\/cl\\\/equipment\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/indooptical.com\\\/cl\\\/equipment\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/indooptical.com\\\/cl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Equipment\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/indooptical.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/indooptical.com\\\/es\\\/\",\"name\":\"Indo\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/indooptical.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-CL\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Equipment - Indo","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/indooptical.com\/cl\/equipment\/","og_locale":"es_ES","og_type":"article","og_title":"Equipment - Indo","og_description":"[vc_row full_width=&#8221;stretch_row_content_no_spaces&#8221;][vc_column][\/vc_column][\/vc_row][vc_row][vc_column][vc_tta_tabs active_section=&#8221;1&#8243; el_class=&#8221;pestana_indo&#8221;][vc_tta_section title=&#8221;Diagnosis&#8221; tab_id=&#8221;1742229521728-2810c47d-d145&#8243;][\/vc_tta_section][vc_tta_section title=&#8221;Cabinet&#8221; tab_id=&#8221;1741778832146-157f1f7c-75b9&#8243;][\/vc_tta_section][vc_tta_section title=&#8221;Workshop&#8221; tab_id=&#8221;1742289921798-bc93fd67-9e8f&#8221;][\/vc_tta_section][vc_tta_section title=&#8221;Ophthalmology treatments&#8221; tab_id=&#8221;1742396374487-17f53663-9a20&#8243;][\/vc_tta_section][vc_tta_section title=&#8221;Exploration lenses&#8221; tab_id=&#8221;1742229547973-bd7edc35-d97c&#8221;][\/vc_tta_section][vc_tta_section title=&#8221;Hand instruments&#8221; tab_id=&#8221;1742289886409-b649d589-0314&#8243;][\/vc_tta_section][vc_tta_section title=&#8221;Accessories&#8221; tab_id=&#8221;1742289905674-667bb3fb-9214&#8243;][\/vc_tta_section][vc_tta_section title=&#8221;Visual aids&#8221; tab_id=&#8221;1742396406827-c50eff6a-edd8&#8243;][\/vc_tta_section][vc_tta_section title=&#8221;Promotions and news&#8221; tab_id=&#8221;1742289930448-784d1d55-a55b&#8221;][\/vc_tta_section][\/vc_tta_tabs][\/vc_column][\/vc_row][vc_row][vc_column][\/vc_column][\/vc_row][vc_section full_width=&#8221;stretch_row&#8221; css_animation=&#8221;fadeIn&#8221; el_class=&#8221;end_footer&#8221;][vc_row][vc_column][vc_wp_text] The most innovative technology, in your hands [\/vc_wp_text][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; equal_height=&#8221;yes&#8221; el_class=&#8221;footer_end&#8221;][vc_column width=&#8221;1\/12&#8243;][\/vc_column][vc_column width=&#8221;5\/6&#8243;][\/vc_column][vc_column width=&#8221;1\/12&#8243;][\/vc_column][\/vc_row][vc_row][vc_column][\/vc_column][\/vc_row][vc_row][vc_column][vc_wp_text el_class=&#8221;title-newsletter&#8221;] Subscribe to our newsletter [\/vc_wp_text][vc_wp_text] and be the first [&hellip;]","og_url":"https:\/\/indooptical.com\/cl\/equipment\/","og_site_name":"Indo","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/indooptical.com\/cl\/equipment\/","url":"https:\/\/indooptical.com\/cl\/equipment\/","name":"Equipment - Indo","isPartOf":{"@id":"https:\/\/indooptical.com\/es\/#website"},"datePublished":"2025-03-12T09:07:04+00:00","breadcrumb":{"@id":"https:\/\/indooptical.com\/cl\/equipment\/#breadcrumb"},"inLanguage":"es-CL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/indooptical.com\/cl\/equipment\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/indooptical.com\/cl\/equipment\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/indooptical.com\/cl\/"},{"@type":"ListItem","position":2,"name":"Equipment"}]},{"@type":"WebSite","@id":"https:\/\/indooptical.com\/es\/#website","url":"https:\/\/indooptical.com\/es\/","name":"Indo","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/indooptical.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-CL"}]}},"_links":{"self":[{"href":"https:\/\/indooptical.com\/cl\/wp-json\/wp\/v2\/pages\/12583","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/indooptical.com\/cl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/indooptical.com\/cl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/indooptical.com\/cl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/indooptical.com\/cl\/wp-json\/wp\/v2\/comments?post=12583"}],"version-history":[{"count":0,"href":"https:\/\/indooptical.com\/cl\/wp-json\/wp\/v2\/pages\/12583\/revisions"}],"wp:attachment":[{"href":"https:\/\/indooptical.com\/cl\/wp-json\/wp\/v2\/media?parent=12583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}