{"id":922,"date":"2025-08-02T20:06:54","date_gmt":"2025-08-02T22:06:54","guid":{"rendered":"https:\/\/folkamedia.com\/servicios\/"},"modified":"2026-05-27T13:44:47","modified_gmt":"2026-05-27T15:44:47","slug":"servicios","status":"publish","type":"page","link":"https:\/\/folkamedia.com\/es\/servicios\/","title":{"rendered":"Servicios"},"content":{"rendered":"\n<h1 class=\"wp-block-heading has-text-align-center has-2-x-large-font-size\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-style:normal;font-weight:700\"><strong>Qu\u00e9 hacemos<\/strong><\/h1>\n\n<p class=\"has-text-align-center has-large-folka-font-size wp-block-paragraph\" style=\"margin-top:var(--wp--preset--spacing--20)\">Soluciones tecnol\u00f3gicas sencillas que ayudan a que tu negocio crezca.<\/p>\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<style>\n    .parallax-section {\n            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); \/* Smooth transition for scale and translateY *\/\n            transform-origin: center center;\n        }\n<\/style>\n\n<section \n    data-name=\"block-parallax-sections\"\n    id=\"block_09414437798b8062b5b02a46c4d050c1\"\n    class=\" has-text-align-left   py-6 md:py-12\"\n    style=\"\"\n>\n\n    <div class='' data-aos=\"fade-in\">\n\n\n    <!-- Main wrapper for the overlapping parallax sections -->\n\n        <div id=\"parallax-wrapper\" data-aos=\"\" class=\"parallax-wrapper relative mb-8 md:mb-12\" >\n                            <div class=\"parallax-section sticky top-0 md:h-[90vh] shadow-section-dark w-full mb-6 md:mb-6 p-6 md:p-12 flex items-center rounded-3xl justify-center bg-almost-dark-gray shadow-lg\" data-section=\"1\">\n                    <div class=\"section-content w-full h-full md:p-6 mx-auto grid gap-8 items-center md:grid-cols-2\">\n                        <!-- Left Column: Text Content -->\n                        <div class=\"text-left \">\n                            <h2 data-splitting=\"chars\" class=\"folka-initial-hidden text-4xl md:text-6xl font-semibold leading-tight mb-4\">\n                                Partners Estrat\u00e9gicos                            <\/h2>\n                                                            <p data-splitting=\"words\" class=\"folka-initial-hidden text-xl md:text-2xl text-gray-300 mb-8 max-w-md\">No somos solo desarrolladores. Trabajamos codo a codo con vos para tomar las decisiones correctas, resolver retos y crear soluciones digitales que crecen con su negocio. <\/p>\n                                                                                        <a  href=\"https:\/\/folkamedia.com\/es\/servicios\/partners-estrategicos\/\" class=\"text-lg font-semibold text-white hover:text-gray-300 transition-colors flex items-center\">\n                                    Ver m\u00e1s \n                                    <svg class=\"ml-2 w-5 h-5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3\"><\/path>\n                                    <\/svg>\n                                <\/a>\n                                                    <\/div>\n                        <!-- Right Column: Image -->\n                        <div  class=\"flex justify-center md:justify-end h-48 md:h-full\">\n                            <div class=\"relative w-full h-full rounded-xl overflow-hidden bg-gray-700\">\n                                <img decoding=\"async\" class=\"absolute inset-0 w-full h-full object-cover rounded-xl\" src=\"https:\/\/folkamedia.com\/wp-content\/uploads\/2026\/05\/Services-Strategic-Partnership.png\" alt=\"Services Strategic Partnership\">\n                                \n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                            <div class=\"parallax-section sticky top-0 md:h-[90vh] shadow-section-dark w-full mb-6 md:mb-6 p-6 md:p-12 flex items-center rounded-3xl justify-center bg-almost-dark-gray shadow-lg\" data-section=\"2\">\n                    <div class=\"section-content w-full h-full md:p-6 mx-auto grid gap-8 items-center md:grid-cols-2\">\n                        <!-- Left Column: Text Content -->\n                        <div class=\"text-left \">\n                            <h2 data-splitting=\"chars\" class=\"folka-initial-hidden text-4xl md:text-6xl font-semibold leading-tight mb-4\">\n                                Desarrollo a medida                            <\/h2>\n                                                            <p data-splitting=\"words\" class=\"folka-initial-hidden text-xl md:text-2xl text-gray-300 mb-8 max-w-md\">Sitios web corporativos, comercio electr\u00f3nico y aplicaciones personalizadas. Dise\u00f1amos y creamos lo que necesitas con un c\u00f3digo limpio, escalable y un rendimiento s\u00f3lido. <\/p>\n                                                                                        <a  href=\"https:\/\/folkamedia.com\/es\/servicios\/desarrollo-a-medida\/\" class=\"text-lg font-semibold text-white hover:text-gray-300 transition-colors flex items-center\">\n                                    Ver m\u00e1s \n                                    <svg class=\"ml-2 w-5 h-5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3\"><\/path>\n                                    <\/svg>\n                                <\/a>\n                                                    <\/div>\n                        <!-- Right Column: Image -->\n                        <div  class=\"flex justify-center md:justify-end h-48 md:h-full\">\n                            <div class=\"relative w-full h-full rounded-xl overflow-hidden bg-gray-700\">\n                                <img decoding=\"async\" class=\"absolute inset-0 w-full h-full object-cover rounded-xl\" src=\"https:\/\/folkamedia.com\/wp-content\/uploads\/2026\/05\/Services-Custom-Development.png\" alt=\"Services Custom Development\">\n                                \n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                            <div class=\"parallax-section sticky top-0 md:h-[90vh] shadow-section-dark w-full mb-6 md:mb-6 p-6 md:p-12 flex items-center rounded-3xl justify-center bg-almost-dark-gray shadow-lg\" data-section=\"3\">\n                    <div class=\"section-content w-full h-full md:p-6 mx-auto grid gap-8 items-center md:grid-cols-2\">\n                        <!-- Left Column: Text Content -->\n                        <div class=\"text-left \">\n                            <h2 data-splitting=\"chars\" class=\"folka-initial-hidden text-4xl md:text-6xl font-semibold leading-tight mb-4\">\n                                Integraciones inteligentes                            <\/h2>\n                                                            <p data-splitting=\"words\" class=\"folka-initial-hidden text-xl md:text-2xl text-gray-300 mb-8 max-w-md\">Conectamos tu sitio con herramientas y tecnolog\u00edas avanzadas. Desde APIs de terceros hasta funciones con inteligencia artificial, hacemos que tu plataforma trabaje m\u00e1s y mejor para vos. <\/p>\n                                                                                        <a  href=\"https:\/\/folkamedia.com\/es\/servicios\/integraciones-inteligentes\/\" class=\"text-lg font-semibold text-white hover:text-gray-300 transition-colors flex items-center\">\n                                    Ver m\u00e1s \n                                    <svg class=\"ml-2 w-5 h-5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3\"><\/path>\n                                    <\/svg>\n                                <\/a>\n                                                    <\/div>\n                        <!-- Right Column: Image -->\n                        <div  class=\"flex justify-center md:justify-end h-48 md:h-full\">\n                            <div class=\"relative w-full h-full rounded-xl overflow-hidden bg-gray-700\">\n                                <img decoding=\"async\" class=\"absolute inset-0 w-full h-full object-cover rounded-xl\" src=\"https:\/\/folkamedia.com\/wp-content\/uploads\/2026\/05\/AI-Consulting.png\" alt=\"AI Consulting\">\n                                \n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                            <div class=\"parallax-section sticky top-0 md:h-[90vh] shadow-section-dark w-full mb-6 md:mb-6 p-6 md:p-12 flex items-center rounded-3xl justify-center bg-almost-dark-gray shadow-lg\" data-section=\"4\">\n                    <div class=\"section-content w-full h-full md:p-6 mx-auto grid gap-8 items-center md:grid-cols-2\">\n                        <!-- Left Column: Text Content -->\n                        <div class=\"text-left \">\n                            <h2 data-splitting=\"chars\" class=\"folka-initial-hidden text-4xl md:text-6xl font-semibold leading-tight mb-4\">\n                                Automatizaciones                            <\/h2>\n                                                            <p data-splitting=\"words\" class=\"folka-initial-hidden text-xl md:text-2xl text-gray-300 mb-8 max-w-md\">Te ayudamos a ahorrar tiempo y crecer m\u00e1s r\u00e1pido automatizando procesos y tareas repetitivas. Desde marketing hasta operaciones, nuestras soluciones mejoran la eficiencia y liberan a tu equipo para enfocarse en lo importante. <\/p>\n                                                                                        <a  href=\"https:\/\/folkamedia.com\/es\/servicios\/automatizaciones\/\" class=\"text-lg font-semibold text-white hover:text-gray-300 transition-colors flex items-center\">\n                                    Ver m\u00e1s \n                                    <svg class=\"ml-2 w-5 h-5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3\"><\/path>\n                                    <\/svg>\n                                <\/a>\n                                                    <\/div>\n                        <!-- Right Column: Image -->\n                        <div  class=\"flex justify-center md:justify-end h-48 md:h-full\">\n                            <div class=\"relative w-full h-full rounded-xl overflow-hidden bg-gray-700\">\n                                <img decoding=\"async\" class=\"absolute inset-0 w-full h-full object-cover rounded-xl\" src=\"https:\/\/folkamedia.com\/wp-content\/uploads\/2026\/05\/Services-Automation.png\" alt=\"Services Automation\">\n                                \n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                    <\/div>\n    <\/div>\n    <!-- New final spacer for extra scroll space -->\n    <div class=\"h-[40px] md:h-[100px] \"><\/div>\n    <script>\nfunction initStickyOverlappingParallax() {\n  const wrapper = document.querySelector('.parallax-wrapper');\n  const sections = document.querySelectorAll('.parallax-section');\n\n  \/\/ === Offsets base (tus valores) ===\n  const overlapStartOffset = 0.9;  \/\/ empieza a solapar casi al final\n  const scaleStartOffset   = 0.1;  \/\/ empieza a escalar bastante antes\n\n  \/\/ === NUEVO: delay del blur y blur m\u00e1ximo ===\n  const blurDelay   = 0.4;        \/\/ 15% m\u00e1s tarde que el scale (ajust\u00e1 0\u20131)\n  const maxBlurPx   = 5;           \/\/ blur m\u00e1ximo (px)\n  \/\/ Calcula el offset real de blur (limitado a <1)\n  const blurStartOffset = Math.min(0.99, scaleStartOffset + blurDelay);\n\n  function updateParallax() {\n    const scrollTop    = window.pageYOffset;\n    const windowHeight = document.documentElement.clientHeight;\n    if (windowHeight === 0) return;\n\n    const wrapperTop = wrapper.offsetTop;\n    let cumulativeHeight = 0;\n\n    sections.forEach((section, index) => {\n      const isLastSection = (index === sections.length - 1);\n      const sectionHeight = section.offsetHeight;\n\n      const sectionTopAbsolute     = wrapperTop + cumulativeHeight;\n      const nextSectionTopAbsolute = wrapperTop + cumulativeHeight + sectionHeight;\n\n      let currentSectionTransform = `translateY(0px) scale(1)`;\n      let currentSectionZIndex    = 1;\n      let currentSectionOpacity   = 1;\n      let currentSectionBlur      = 0;\n\n      if (!isLastSection) {\n        const sectionAnimationDuration = sectionHeight;\n\n        \/\/ --- Progreso de solapamiento (sube la siguiente secci\u00f3n) ---\n        let overlapAnimationProgress = 0;\n        const overlapScrollStart = sectionTopAbsolute + (sectionAnimationDuration * overlapStartOffset);\n        const overlapScrollEnd   = sectionTopAbsolute + sectionAnimationDuration;\n\n        if (scrollTop >= overlapScrollStart && scrollTop < overlapScrollEnd) {\n          overlapAnimationProgress = (scrollTop - overlapScrollStart) \/ (overlapScrollEnd - overlapScrollStart);\n          overlapAnimationProgress = Math.max(0, Math.min(1, overlapAnimationProgress));\n        } else if (scrollTop >= overlapScrollEnd) {\n          overlapAnimationProgress = 1;\n        }\n\n        \/\/ --- Progreso de escala\/opacity (tu l\u00f3gica original) ---\n        let scaleProgress = 0;\n        const scaleScrollStart = sectionTopAbsolute + (sectionAnimationDuration * scaleStartOffset);\n        const scaleScrollEnd   = sectionTopAbsolute + sectionAnimationDuration;\n\n        if (scrollTop >= scaleScrollStart && scrollTop < scaleScrollEnd) {\n          scaleProgress = (scrollTop - scaleScrollStart) \/ (scaleScrollEnd - scaleScrollStart);\n          scaleProgress = Math.max(0, Math.min(1, scaleProgress));\n        } else if (scrollTop >= scaleScrollEnd) {\n          scaleProgress = 1;\n        }\n\n        \/\/ --- NUEVO: Progreso de blur con delay ---\n        let blurProgress = 0;\n        const blurScrollStart = sectionTopAbsolute + (sectionAnimationDuration * blurStartOffset);\n        const blurScrollEnd   = sectionTopAbsolute + sectionAnimationDuration;\n\n        if (scrollTop >= blurScrollStart && scrollTop < blurScrollEnd) {\n          blurProgress = (scrollTop - blurScrollStart) \/ (blurScrollEnd - blurScrollStart);\n          blurProgress = Math.max(0, Math.min(1, blurProgress));\n        } else if (scrollTop >= blurScrollEnd) {\n          blurProgress = 1;\n        }\n\n        \/\/ (opcional) darle easing al blur para que empiece a\u00fan m\u00e1s suave\n        const easedBlur = Math.pow(blurProgress, 2); \/\/ t^2 = ease-in\n\n        \/\/ === Estados ===\n        if (scrollTop >= nextSectionTopAbsolute) {\n          \/\/ Ya fue empujada por la siguiente\n          currentSectionTransform = `translateY(${-sectionHeight}px) scale(${1 - (1 * 0.1)})`;\n          currentSectionZIndex    = 1;\n          currentSectionOpacity   = 0.3;\n          currentSectionBlur      = 2; \/\/ estado final (pod\u00e9s poner maxBlurPx si prefer\u00eds)\n        } else if (scrollTop >= sectionTopAbsolute && scrollTop < nextSectionTopAbsolute) {\n          \/\/ Secci\u00f3n activa (sticky)\n          currentSectionTransform = `translateY(0px) scale(${1 - (scaleProgress * 0.3)})`;\n          currentSectionZIndex    = 1;\n          currentSectionOpacity   = 1 - (scaleProgress * 0.7);\n          \/\/ NUEVO: blur con delay y easing\n          currentSectionBlur      = easedBlur * maxBlurPx;\n\n          \/\/ Mover la siguiente\n          if (index + 1 < sections.length) {\n            const nextSection = sections[index + 1];\n            const nextSectionTranslateY = (1 - overlapAnimationProgress) * nextSection.offsetHeight;\n            nextSection.style.transform = `translateY(${nextSectionTranslateY}px)`;\n            nextSection.style.zIndex    = 2;\n          }\n        } else {\n          \/\/ A\u00fan no entr\u00f3\n          currentSectionTransform = `translateY(0px) scale(1)`;\n          currentSectionZIndex    = 1;\n          currentSectionOpacity   = 1;\n          currentSectionBlur      = 0;\n        }\n      }\n\n      section.style.transform = currentSectionTransform;\n      section.style.zIndex    = currentSectionZIndex;\n      section.style.opacity   = currentSectionOpacity;\n      section.style.filter    = `blur(${currentSectionBlur}px)`;\n\n      cumulativeHeight += sectionHeight;\n    });\n\n    wrapper.style.height = `${cumulativeHeight}px`;\n  }\n\n  \/\/ Throttle\n  let ticking = false;\n  function requestTick() {\n    if (!ticking) {\n      requestAnimationFrame(updateParallax);\n      ticking = true;\n      setTimeout(() => { ticking = false; }, 16);\n    }\n  }\n\n  window.addEventListener('scroll', requestTick);\n  window.addEventListener('resize', requestTick);\n  updateParallax();\n}\n\ndocument.addEventListener('DOMContentLoaded', initStickyOverlappingParallax);\n<\/script>\n\n\n<\/section>\n\n\n\n<section  \n    data-name=\"block-title-text-steps\"\n    id=\"block_397fd76e54cc872a2ab092fd105d0c51\"\n    class=\" has-text-align-left   py-8 md:py-16\"\n    style=\" \"\n>\n    \n    <div class=\"w-full mx-auto flex flex-wrap\">\n        <!-- Header Section -->\n        <div class=\"mb-8 md:mb-16 text-left md:text-center w-full \">\n            <!-- Top indicator -->\n                        <div class=\"flex items-center gap-2 text-white mb-1 justify-start md:justify-center\">\n                <div data-aos=\"fade-in\"  class=\"w-3 h-3 rounded-full\" style=\"background-color: #ACFFD4;\"><\/div>\n                \n                <span data-splitting=\"words\" class=\"folka-initial-hidden text-xl md:text-2xl pl-2\">\u00bfC\u00f3mo trabajamos?<\/span>\n                \n            <\/div>\n                        \n            <!-- Title and View All Link -->\n            <div class=\"flex w-full items-end flex-wrap justify-start md:justify-center\">\n                <h2 data-splitting=\"chars\" class=\"folka-initial-hidden  w-full text-4xl md:text-6xl font-semibold text-white leading-tight\">Un proceso claro para un lanzamiento r\u00e1pido y con confianza.<\/h2>\n                \n            <\/div>\n        <\/div>\n\n                 \n\n            <div \n            x-data=\"{ activated: [], started:false  }\"\n            x-intersect.once=\"\n                if (!started) {\n                    started = true;\n                    let i = 0;\n\n                    const activateNext = () => {\n                        if (i < 5) {\n                            activated.push(i);\n\n                            \n                            activated.push(i);\n                            \n\n                            i++;\n                            \n                            setTimeout(activateNext, 500); \/\/ delay entre activaciones\n                            \n                            \n                        }\n                    };\n                    activateNext();\n                }\n            \"\n            class=\"flex w-full flex-wrap justify-between py-4 md:py-20\">\n\n            \n            \n                <div data-aos=\"fade-up\" class=\"lg:flex  flex-col hidden\" >\n\n                    <div class=\"relative flex  items-center   order-1 \" >\n                      <!-- Circle (Outer White Border) -->\n                        <div :class=\"activated.includes(0) ? 'border-white ' : 'border-[#ffffff30] '\" class=\"\n                          w-[200px] h-[200px] transition-all  rounded-full \n                          border border-gray relative\n                          flex items-center justify-center \n                          relative z-30 \n                          \">\n                              \n                                  <!-- Inner Green Fill -->\n                                  <div :class=\"activated.includes(0) ? 'bg-primary text-black border-primary ' : 'border-gray bg-almost-dark-gray text-white '\" class=\"\n                                      w-[calc(100%-25px)] transition-all  h-[calc(100%-25px)] rounded-full \n                                      \n                                      flex items-center justify-center \n                                      text-5xl font-bold\n                                  \">\n                                      01                                  <\/div>\n                              \n                          <\/div>\n\n                          <!-- Vertical Line -->\n                          <!-- Positioned relative to the bottom center of the 200px circle -->\n                          <div :class=\"activated.includes(0) ? 'bg-white ' : 'bg-gray'\" class=\"\n                              absolute w-px  z-20 transition-all  bg-gray hidden md:block\n                          \" style=\"\n                              height: 50px; \/* Length of the vertical line *\/\n                              top: 200px;  \/* Starts exactly at the bottom of the 200px circle *\/\n                              left: 50%; \n                              transform: translateX(-50%);\n                          \"><\/div>\n\n                          <!-- Dot -->\n                          <!-- Positioned at the end of the vertical line -->\n                          <div :class=\"activated.includes(0) ? 'bg-primary ' : 'bg-[#ffffff30] '\" class=\"\n                              absolute w-2 h-2 rounded-full z-20 transition-all   hidden md:block\n                          \" style=\"\n                            top:calc(200px + 50px);                              \n                              left: 50%; \n                              transform: translateX(-50%);\n                          \"><\/div>\n\n                                                          <div class=\"text-[#ffffff30] absolute  left-[105%] top-[100%] \">\n                                <svg width=\"90\" height=\"100%\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <line x1=\"0\" y1=\"0\" x2=\"70\" y2=\"70\" stroke=\"currentColor\" stroke-width=\"1\" stroke-dasharray=\"5,5\" \/>\n                                <\/svg>\n                              <\/div>\n                            \n                    <\/div>\n                    <div x-cloak  :class=\"activated.includes(0) ? 'visible' : 'invisible'\" class=\" max-w-[200px] text-center  order-2 mt-[70px]\">\n                        <div class=\"text-white font-semibold text-2xl md:text-3xl leading-tight mb-4\">Discovery &#038; Kick off<\/div>\n                        <p class=\"text-white text-md font-light leading-normal\">Comenzamos por conocer tus objetivos, tus usuarios y las herramientas que ya utilizas. Juntos sentamos unas bases s\u00f3lidas para el proyecto. <\/p>\n                    <\/div>\n                    \n                <\/div>\n\n                <div class=\"mobile flex relative lg:hidden flex-nowrap w-full items-center py-8\">\n                   \n                    <div class=\"w-auto relative steps-line-mobile\">\n                            <div class=\" border-white\n                              p-1 w-24 h-24 rounded-full \n                              border  relative\n                              flex items-center justify-center \n                              relative z-30 \n                              \">\n                              \n                                  <!-- Inner Green Fill -->\n                                  <div class=\" bg-primary text-black border-primary\n                                     w-full h-full transition-all  rounded-full w-full\n                                      \n                                      flex items-center justify-center \n                                      text-3xl font-bold\n                                  \">\n                                      01                                  <\/div>\n                              \n                            <\/div>\n                                                             <svg class=\"absolute top-[80%] left-[50%]\" width=\"1\" height=\"100%\" viewBox=\"0 0 1 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\" stroke=\"white\" stroke-width=\"1\" stroke-dasharray=\"5,5\" \/>\n                                <\/svg>\n                                                <\/div>\n                    <div class=\"w-auto px-4 pl-6\">\n                        <div class=\"text-white font-semibold text-lg mb-1\">Discovery &#038; Kick off<\/div>\n                        <p class=\"text-white text-sm\">Comenzamos por conocer tus objetivos, tus usuarios y las herramientas que ya utilizas. Juntos sentamos unas bases s\u00f3lidas para el proyecto. <\/p>\n                    <\/div>\n                <\/div>\n\n                \n                <div data-aos=\"fade-up\" class=\"lg:flex  flex-col hidden\" >\n\n                    <div class=\"relative flex  items-center top-[80px]  order-2 \" >\n                      <!-- Circle (Outer White Border) -->\n                        <div :class=\"activated.includes(1) ? 'border-white ' : 'border-[#ffffff30] '\" class=\"\n                          w-[200px] h-[200px] transition-all  rounded-full \n                          border border-gray relative\n                          flex items-center justify-center \n                          relative z-30 \n                          \">\n                              \n                                  <!-- Inner Green Fill -->\n                                  <div :class=\"activated.includes(1) ? 'bg-primary text-black border-primary ' : 'border-gray bg-almost-dark-gray text-white '\" class=\"\n                                      w-[calc(100%-25px)] transition-all  h-[calc(100%-25px)] rounded-full \n                                      \n                                      flex items-center justify-center \n                                      text-5xl font-bold\n                                  \">\n                                      02                                  <\/div>\n                              \n                          <\/div>\n\n                          <!-- Vertical Line -->\n                          <!-- Positioned relative to the bottom center of the 200px circle -->\n                          <div :class=\"activated.includes(1) ? 'bg-white ' : 'bg-gray'\" class=\"\n                              absolute w-px  z-20 transition-all  bg-gray hidden md:block\n                          \" style=\"\n                              height: 50px; \/* Length of the vertical line *\/\n                              top: -50px;  \/* Starts exactly at the bottom of the 200px circle *\/\n                              left: 50%; \n                              transform: translateX(-50%);\n                          \"><\/div>\n\n                          <!-- Dot -->\n                          <!-- Positioned at the end of the vertical line -->\n                          <div :class=\"activated.includes(1) ? 'bg-primary ' : 'bg-[#ffffff30] '\" class=\"\n                              absolute w-2 h-2 rounded-full z-20 transition-all   hidden md:block\n                          \" style=\"\n                            top: -50px;                              \n                              left: 50%; \n                              transform: translateX(-50%);\n                          \"><\/div>\n\n                                                          <div class=\"text-[#ffffff30] absolute  left-[105%] top-[-10%] rotate-90 \">\n                                <svg width=\"90\" height=\"100%\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <line x1=\"0\" y1=\"0\" x2=\"70\" y2=\"70\" stroke=\"currentColor\" stroke-width=\"1\" stroke-dasharray=\"5,5\" \/>\n                                <\/svg>\n                              <\/div>\n                            \n                    <\/div>\n                    <div x-cloak  :class=\"activated.includes(1) ? 'visible' : 'invisible'\" class=\" max-w-[200px] text-center  order-1 \">\n                        <div class=\"text-white font-semibold text-2xl md:text-3xl leading-tight mb-4\">Dise\u00f1o y estructura<\/div>\n                        <p class=\"text-white text-md font-light leading-normal\">Dise\u00f1amos estructuras sencillas, f\u00e1ciles de usar y alineadas con tu marca. Siempre pensando en el usuario final. <\/p>\n                    <\/div>\n                    \n                <\/div>\n\n                <div class=\"mobile flex relative lg:hidden flex-nowrap w-full items-center py-8\">\n                   \n                    <div class=\"w-auto relative steps-line-mobile\">\n                            <div class=\" border-white\n                              p-1 w-24 h-24 rounded-full \n                              border  relative\n                              flex items-center justify-center \n                              relative z-30 \n                              \">\n                              \n                                  <!-- Inner Green Fill -->\n                                  <div class=\" bg-primary text-black border-primary\n                                     w-full h-full transition-all  rounded-full w-full\n                                      \n                                      flex items-center justify-center \n                                      text-3xl font-bold\n                                  \">\n                                      02                                  <\/div>\n                              \n                            <\/div>\n                                                             <svg class=\"absolute top-[80%] left-[50%]\" width=\"1\" height=\"100%\" viewBox=\"0 0 1 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\" stroke=\"white\" stroke-width=\"1\" stroke-dasharray=\"5,5\" \/>\n                                <\/svg>\n                                                <\/div>\n                    <div class=\"w-auto px-4 pl-6\">\n                        <div class=\"text-white font-semibold text-lg mb-1\">Dise\u00f1o y estructura<\/div>\n                        <p class=\"text-white text-sm\">Dise\u00f1amos estructuras sencillas, f\u00e1ciles de usar y alineadas con tu marca. Siempre pensando en el usuario final. <\/p>\n                    <\/div>\n                <\/div>\n\n                \n                <div data-aos=\"fade-up\" class=\"lg:flex  flex-col hidden\" >\n\n                    <div class=\"relative flex  items-center   order-1 \" >\n                      <!-- Circle (Outer White Border) -->\n                        <div :class=\"activated.includes(2) ? 'border-white ' : 'border-[#ffffff30] '\" class=\"\n                          w-[200px] h-[200px] transition-all  rounded-full \n                          border border-gray relative\n                          flex items-center justify-center \n                          relative z-30 \n                          \">\n                              \n                                  <!-- Inner Green Fill -->\n                                  <div :class=\"activated.includes(2) ? 'bg-primary text-black border-primary ' : 'border-gray bg-almost-dark-gray text-white '\" class=\"\n                                      w-[calc(100%-25px)] transition-all  h-[calc(100%-25px)] rounded-full \n                                      \n                                      flex items-center justify-center \n                                      text-5xl font-bold\n                                  \">\n                                      03                                  <\/div>\n                              \n                          <\/div>\n\n                          <!-- Vertical Line -->\n                          <!-- Positioned relative to the bottom center of the 200px circle -->\n                          <div :class=\"activated.includes(2) ? 'bg-white ' : 'bg-gray'\" class=\"\n                              absolute w-px  z-20 transition-all  bg-gray hidden md:block\n                          \" style=\"\n                              height: 50px; \/* Length of the vertical line *\/\n                              top: 200px;  \/* Starts exactly at the bottom of the 200px circle *\/\n                              left: 50%; \n                              transform: translateX(-50%);\n                          \"><\/div>\n\n                          <!-- Dot -->\n                          <!-- Positioned at the end of the vertical line -->\n                          <div :class=\"activated.includes(2) ? 'bg-primary ' : 'bg-[#ffffff30] '\" class=\"\n                              absolute w-2 h-2 rounded-full z-20 transition-all   hidden md:block\n                          \" style=\"\n                            top:calc(200px + 50px);                              \n                              left: 50%; \n                              transform: translateX(-50%);\n                          \"><\/div>\n\n                                                          <div class=\"text-[#ffffff30] absolute  left-[105%] top-[100%] \">\n                                <svg width=\"90\" height=\"100%\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <line x1=\"0\" y1=\"0\" x2=\"70\" y2=\"70\" stroke=\"currentColor\" stroke-width=\"1\" stroke-dasharray=\"5,5\" \/>\n                                <\/svg>\n                              <\/div>\n                            \n                    <\/div>\n                    <div x-cloak  :class=\"activated.includes(2) ? 'visible' : 'invisible'\" class=\" max-w-[200px] text-center  order-2 mt-[70px]\">\n                        <div class=\"text-white font-semibold text-2xl md:text-3xl leading-tight mb-4\">Desarrollo<\/div>\n                        <p class=\"text-white text-md font-light leading-normal\">Construimos con precisi\u00f3n y flexibilidad. Nos adaptamos a tus procesos y nos aseguramos de que todo se ajuste a tus necesidades. <\/p>\n                    <\/div>\n                    \n                <\/div>\n\n                <div class=\"mobile flex relative lg:hidden flex-nowrap w-full items-center py-8\">\n                   \n                    <div class=\"w-auto relative steps-line-mobile\">\n                            <div class=\" border-white\n                              p-1 w-24 h-24 rounded-full \n                              border  relative\n                              flex items-center justify-center \n                              relative z-30 \n                              \">\n                              \n                                  <!-- Inner Green Fill -->\n                                  <div class=\" bg-primary text-black border-primary\n                                     w-full h-full transition-all  rounded-full w-full\n                                      \n                                      flex items-center justify-center \n                                      text-3xl font-bold\n                                  \">\n                                      03                                  <\/div>\n                              \n                            <\/div>\n                                                             <svg class=\"absolute top-[80%] left-[50%]\" width=\"1\" height=\"100%\" viewBox=\"0 0 1 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\" stroke=\"white\" stroke-width=\"1\" stroke-dasharray=\"5,5\" \/>\n                                <\/svg>\n                                                <\/div>\n                    <div class=\"w-auto px-4 pl-6\">\n                        <div class=\"text-white font-semibold text-lg mb-1\">Desarrollo<\/div>\n                        <p class=\"text-white text-sm\">Construimos con precisi\u00f3n y flexibilidad. Nos adaptamos a tus procesos y nos aseguramos de que todo se ajuste a tus necesidades. <\/p>\n                    <\/div>\n                <\/div>\n\n                \n                <div data-aos=\"fade-up\" class=\"lg:flex  flex-col hidden\" >\n\n                    <div class=\"relative flex  items-center top-[80px]  order-2 \" >\n                      <!-- Circle (Outer White Border) -->\n                        <div :class=\"activated.includes(3) ? 'border-white ' : 'border-[#ffffff30] '\" class=\"\n                          w-[200px] h-[200px] transition-all  rounded-full \n                          border border-gray relative\n                          flex items-center justify-center \n                          relative z-30 \n                          \">\n                              \n                                  <!-- Inner Green Fill -->\n                                  <div :class=\"activated.includes(3) ? 'bg-primary text-black border-primary ' : 'border-gray bg-almost-dark-gray text-white '\" class=\"\n                                      w-[calc(100%-25px)] transition-all  h-[calc(100%-25px)] rounded-full \n                                      \n                                      flex items-center justify-center \n                                      text-5xl font-bold\n                                  \">\n                                      04                                  <\/div>\n                              \n                          <\/div>\n\n                          <!-- Vertical Line -->\n                          <!-- Positioned relative to the bottom center of the 200px circle -->\n                          <div :class=\"activated.includes(3) ? 'bg-white ' : 'bg-gray'\" class=\"\n                              absolute w-px  z-20 transition-all  bg-gray hidden md:block\n                          \" style=\"\n                              height: 50px; \/* Length of the vertical line *\/\n                              top: -50px;  \/* Starts exactly at the bottom of the 200px circle *\/\n                              left: 50%; \n                              transform: translateX(-50%);\n                          \"><\/div>\n\n                          <!-- Dot -->\n                          <!-- Positioned at the end of the vertical line -->\n                          <div :class=\"activated.includes(3) ? 'bg-primary ' : 'bg-[#ffffff30] '\" class=\"\n                              absolute w-2 h-2 rounded-full z-20 transition-all   hidden md:block\n                          \" style=\"\n                            top: -50px;                              \n                              left: 50%; \n                              transform: translateX(-50%);\n                          \"><\/div>\n\n                                                          <div class=\"text-[#ffffff30] absolute  left-[105%] top-[-10%] rotate-90 \">\n                                <svg width=\"90\" height=\"100%\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <line x1=\"0\" y1=\"0\" x2=\"70\" y2=\"70\" stroke=\"currentColor\" stroke-width=\"1\" stroke-dasharray=\"5,5\" \/>\n                                <\/svg>\n                              <\/div>\n                            \n                    <\/div>\n                    <div x-cloak  :class=\"activated.includes(3) ? 'visible' : 'invisible'\" class=\" max-w-[200px] text-center  order-1 \">\n                        <div class=\"text-white font-semibold text-2xl md:text-3xl leading-tight mb-4\"> Testeo y optimizaci\u00f3n<\/div>\n                        <p class=\"text-white text-md font-light leading-normal\">Probamos con usuarios reales, corregimos lo que hay que corregir y nos aseguramos de que todo funcione correctamente antes del lanzamiento.<\/p>\n                    <\/div>\n                    \n                <\/div>\n\n                <div class=\"mobile flex relative lg:hidden flex-nowrap w-full items-center py-8\">\n                   \n                    <div class=\"w-auto relative steps-line-mobile\">\n                            <div class=\" border-white\n                              p-1 w-24 h-24 rounded-full \n                              border  relative\n                              flex items-center justify-center \n                              relative z-30 \n                              \">\n                              \n                                  <!-- Inner Green Fill -->\n                                  <div class=\" bg-primary text-black border-primary\n                                     w-full h-full transition-all  rounded-full w-full\n                                      \n                                      flex items-center justify-center \n                                      text-3xl font-bold\n                                  \">\n                                      04                                  <\/div>\n                              \n                            <\/div>\n                                                             <svg class=\"absolute top-[80%] left-[50%]\" width=\"1\" height=\"100%\" viewBox=\"0 0 1 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\" stroke=\"white\" stroke-width=\"1\" stroke-dasharray=\"5,5\" \/>\n                                <\/svg>\n                                                <\/div>\n                    <div class=\"w-auto px-4 pl-6\">\n                        <div class=\"text-white font-semibold text-lg mb-1\"> Testeo y optimizaci\u00f3n<\/div>\n                        <p class=\"text-white text-sm\">Probamos con usuarios reales, corregimos lo que hay que corregir y nos aseguramos de que todo funcione correctamente antes del lanzamiento.<\/p>\n                    <\/div>\n                <\/div>\n\n                \n                <div data-aos=\"fade-up\" class=\"lg:flex  flex-col hidden\" >\n\n                    <div class=\"relative flex  items-center   order-1 \" >\n                      <!-- Circle (Outer White Border) -->\n                        <div :class=\"activated.includes(4) ? 'border-white ' : 'border-[#ffffff30] '\" class=\"\n                          w-[200px] h-[200px] transition-all  rounded-full \n                          border border-gray relative\n                          flex items-center justify-center \n                          relative z-30 \n                          \">\n                              \n                                  <!-- Inner Green Fill -->\n                                  <div :class=\"activated.includes(4) ? 'bg-primary text-black border-primary ' : 'border-gray bg-almost-dark-gray text-white '\" class=\"\n                                      w-[calc(100%-25px)] transition-all  h-[calc(100%-25px)] rounded-full \n                                      \n                                      flex items-center justify-center \n                                      text-5xl font-bold\n                                  \">\n                                      05                                  <\/div>\n                              \n                          <\/div>\n\n                          <!-- Vertical Line -->\n                          <!-- Positioned relative to the bottom center of the 200px circle -->\n                          <div :class=\"activated.includes(4) ? 'bg-white ' : 'bg-gray'\" class=\"\n                              absolute w-px  z-20 transition-all  bg-gray hidden md:block\n                          \" style=\"\n                              height: 50px; \/* Length of the vertical line *\/\n                              top: 200px;  \/* Starts exactly at the bottom of the 200px circle *\/\n                              left: 50%; \n                              transform: translateX(-50%);\n                          \"><\/div>\n\n                          <!-- Dot -->\n                          <!-- Positioned at the end of the vertical line -->\n                          <div :class=\"activated.includes(4) ? 'bg-primary ' : 'bg-[#ffffff30] '\" class=\"\n                              absolute w-2 h-2 rounded-full z-20 transition-all   hidden md:block\n                          \" style=\"\n                            top:calc(200px + 50px);                              \n                              left: 50%; \n                              transform: translateX(-50%);\n                          \"><\/div>\n\n                            \n                    <\/div>\n                    <div x-cloak  :class=\"activated.includes(4) ? 'visible' : 'invisible'\" class=\" max-w-[200px] text-center  order-2 mt-[70px]\">\n                        <div class=\"text-white font-semibold text-2xl md:text-3xl leading-tight mb-4\">Lanzamiento y mantenimiento<\/div>\n                        <p class=\"text-white text-md font-light leading-normal\">Lanzamos con confianza. Y seguimos a t\u00fa lado despu\u00e9s para ofrecerte asistencia, actualizaciones y mejoras siempre que lo necesites. <\/p>\n                    <\/div>\n                    \n                <\/div>\n\n                <div class=\"mobile flex relative lg:hidden flex-nowrap w-full items-center py-8\">\n                   \n                    <div class=\"w-auto relative steps-line-mobile\">\n                            <div class=\" border-white\n                              p-1 w-24 h-24 rounded-full \n                              border  relative\n                              flex items-center justify-center \n                              relative z-30 \n                              \">\n                              \n                                  <!-- Inner Green Fill -->\n                                  <div class=\" bg-primary text-black border-primary\n                                     w-full h-full transition-all  rounded-full w-full\n                                      \n                                      flex items-center justify-center \n                                      text-3xl font-bold\n                                  \">\n                                      05                                  <\/div>\n                              \n                            <\/div>\n                                                <\/div>\n                    <div class=\"w-auto px-4 pl-6\">\n                        <div class=\"text-white font-semibold text-lg mb-1\">Lanzamiento y mantenimiento<\/div>\n                        <p class=\"text-white text-sm\">Lanzamos con confianza. Y seguimos a t\u00fa lado despu\u00e9s para ofrecerte asistencia, actualizaciones y mejoras siempre que lo necesites. <\/p>\n                    <\/div>\n                <\/div>\n\n                <\/div>        \n\n\n\n    <\/div>\n\n\n<\/section>\n\n<section \n    data-name=\"block-two-bars-text-rotator\"\n    id=\"block_344673419c1bc12ed06596aa925ea35c\"\n    class=\" has-text-align-left   relative mb-4 overflow-hidden md:overflow-visible md:mb-20 h-96\"\n    style=\"\"\n>\n    <!-- First Bar (Green background, black text) - Above -->\n    <div class=\"absolute md:h-20 bar-1 overflow-hidden bg-primary\">\n        <div data-aos=\"fade-in\"  class=\"flex items-center h-full whitespace-nowrap\">\n            <div class=\"flex items-center space-x-4 md:space-x-8 text-dark-gray text-2xl font-bold\">\n                <span class=\"uppercase text-4xl md:text-6xl font-semibold\">C\u00f3digo<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Repetir<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Estrategia<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Creatividad<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Dise\u00f1o<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Programaci\u00f3n<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">C\u00f3digo<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Repetir<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Estrategia<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Creatividad<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Dise\u00f1o<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Programaci\u00f3n<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">C\u00f3digo<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Repetir<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Estrategia<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Creatividad<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Dise\u00f1o<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Programaci\u00f3n<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">C\u00f3digo<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Repetir<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Estrategia<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Creatividad<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Dise\u00f1o<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Programaci\u00f3n<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">C\u00f3digo<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Repetir<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Estrategia<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Creatividad<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Dise\u00f1o<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Programaci\u00f3n<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">C\u00f3digo<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Repetir<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Estrategia<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Creatividad<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Dise\u00f1o<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Programaci\u00f3n<\/span>            <\/div>\n        <\/div>\n    <\/div>\n    \n    <!-- Second Bar (Dark background, white text) - Below -->\n    <div class=\"absolute bar-2 overflow-hidden bg-dark-gray\">\n        <div data-aos=\"fade-in\"  class=\"flex items-center h-full whitespace-nowrap\">\n            <div class=\"flex items-center space-x-4 md:space-x-8 text-white text-2xl font-bold\">\n                <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Estrategia<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Creatividad<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Repetir<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Sitio web<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Repetir<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Estrategia<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Creatividad<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Repetir<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Sitio web<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Repetir<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Estrategia<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Creatividad<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Repetir<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Sitio web<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Repetir<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Estrategia<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Creatividad<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Repetir<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Sitio web<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Repetir<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Estrategia<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Creatividad<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Repetir<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Sitio web<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Repetir<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Estrategia<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Creatividad<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Repetir<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Sitio web<\/span> <span class=\"text-4xl md:text-6xl\">\u2022<\/span> <span class=\"uppercase text-4xl md:text-6xl font-semibold\">Repetir<\/span>            <\/div>\n        <\/div>\n    <\/div>\n\n<\/section>\n\n<!-- Estilo CSS adicional -->\n<style>\n    \/* Animaci\u00f3n para hacer que las palabras roten horizontalmente *\/\n    @keyframes scroll-left {\n        0% {\n            transform: translateX(-5%);\n            transform-origin: right;\n        }\n        100% {\n            transform: translateX(-25%);\n            transform-origin: left;\n        }\n    }\n\n    \/* Aplicar la animaci\u00f3n al contenedor que tiene las palabras *\/\n    .bar-1 .flex {\n        animation: scroll-left 40s linear infinite;\n    }\n\n    \/* Estilo adicional para que el contenido se oculte correctamente *\/\n    .bar-1, .bar-2 {\n        overflow-x: hidden; \/* Oculta los elementos que salgan del contenedor *\/\n    }\n\n    \/* Asegura que los elementos dentro de la barra est\u00e9n alineados correctamente *\/\n    .bar-1 .flex, .bar-2 .flex {\n        display: flex;\n        align-items: center;\n        white-space: nowrap;\n    }\n<\/style>\n\n\n\n<section \n    data-name=\"block-testimonial-slider-full-width\"\n    id=\"block_c4ab0fdd7deff010ff0ae47072e5e6e5\"\n    class=\" has-text-align-left   w-full py-8 md:py-16\"\n    style=\"\"\n>\n\n<div class=\"w-full mx-auto max-w-screen-2xl py-8 md:py-16\">\n    <!-- Header Section -->\n    <div class=\" mb-8 md:mb-16\">\n        <!-- Top indicator -->\n                <div class=\"flex items-center gap-2 text-white mb-1\">\n            <div data-aos=\"fade-in\" class=\"w-3 h-3 rounded-full\" style=\"background-color: #ACFFD4;\"><\/div>\n            \n            <span data-splitting=\"words\" class=\"folka-initial-hidden text-xl md:text-2xl pl-2\">Historias reales con personas reales<\/span>\n            \n        <\/div>\n                \n        <!-- Title and View All Link -->\n        <div class=\"flex justify-between items-end flex-wrap\">\n            <h2 data-splitting=\"chars\" class=\"folka-initial-hidden  w-full md:w-1\/2 text-4xl md:text-6xl font-semibold text-white leading-tight\">Lo que dicen nuestros clientes<\/h2>\n           \n        <\/div>\n    <\/div>\n    <div class=\"w-full relative\">\n            <!-- Swiper -->\n                        <div class=\"swiper-container-testimonials full overflow-hidden md:overflow-visible \">\n                <div class=\"swiper-wrapper items-center justify-start relative\">\n\n                                    <div data-aos=\"fade-in\" class=\"swiper-slide overflow-hidden\">\n                        <div class=\"testimonial-card max-w-full p-8 pb-20 hover:bg-[#3f3f46] transition-all\">\n                            <div class=\"mb-6\">\n                               <svg width=\"25\" height=\"25\" viewBox=\"0 0 33 34\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <g opacity=\"0.6\">\n                                <path d=\"M22 4.7915C21.2707 4.7915 20.5712 5.08124 20.0555 5.59696C19.5397 6.11269 19.25 6.81216 19.25 7.5415V15.7915C19.25 16.5208 19.5397 17.2203 20.0555 17.736C20.5712 18.2518 21.2707 18.5415 22 18.5415C22.3647 18.5415 22.7144 18.6864 22.9723 18.9442C23.2301 19.2021 23.375 19.5518 23.375 19.9165V21.2915C23.375 22.0208 23.0853 22.7203 22.5695 23.236C22.0538 23.7518 21.3543 24.0415 20.625 24.0415C20.2603 24.0415 19.9106 24.1864 19.6527 24.4442C19.3949 24.7021 19.25 25.0518 19.25 25.4165V28.1665C19.25 28.5312 19.3949 28.8809 19.6527 29.1388C19.9106 29.3966 20.2603 29.5415 20.625 29.5415C22.813 29.5415 24.9115 28.6723 26.4586 27.1251C28.0058 25.578 28.875 23.4795 28.875 21.2915V7.5415C28.875 6.81216 28.5853 6.11269 28.0695 5.59696C27.5538 5.08124 26.8543 4.7915 26.125 4.7915H22Z\" stroke=\"white\" stroke-width=\"2.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                                <path d=\"M6.875 4.7915C6.14565 4.7915 5.44618 5.08124 4.93046 5.59696C4.41473 6.11269 4.125 6.81216 4.125 7.5415V15.7915C4.125 16.5208 4.41473 17.2203 4.93046 17.736C5.44618 18.2518 6.14565 18.5415 6.875 18.5415C7.23967 18.5415 7.58941 18.6864 7.84727 18.9442C8.10513 19.2021 8.25 19.5518 8.25 19.9165V21.2915C8.25 22.0208 7.96027 22.7203 7.44454 23.236C6.92882 23.7518 6.22935 24.0415 5.5 24.0415C5.13533 24.0415 4.78559 24.1864 4.52773 24.4442C4.26987 24.7021 4.125 25.0518 4.125 25.4165V28.1665C4.125 28.5312 4.26987 28.8809 4.52773 29.1388C4.78559 29.3966 5.13533 29.5415 5.5 29.5415C7.68804 29.5415 9.78646 28.6723 11.3336 27.1251C12.8808 25.578 13.75 23.4795 13.75 21.2915V7.5415C13.75 6.81216 13.4603 6.11269 12.9445 5.59696C12.4288 5.08124 11.7293 4.7915 11 4.7915H6.875Z\" stroke=\"white\" stroke-width=\"2.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                                <\/g>\n                                <\/svg>\n\n                            <\/div>\n                            <blockquote class=\"text-md text-white leading-normal mb-8 pb-6\">\n                                <!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} -->\n<p>El equipo de Folka ha demostrado ser un aliado estrat\u00e9gico con el que siempre podemos contar; su profesionalidad, agilidad y compromiso son clave para el \u00e9xito de cualquier proyecto que emprendamos juntos.<\/p>\n<!-- \/wp:paragraph -->                            <\/blockquote>\n                            \n                        <\/div>\n                        <div class=\"flex items-center w-8\/12 gap-4 bg-dark-gray  p-4 rounded-xl absolute left-0 bottom-0 testimonial-rounded full\">\n                            <div class=\"w-12 h-12 rounded-full overflow-hidden flex-shrink-0\">\n                                <img decoding=\"async\" src=\"https:\/\/folkamedia.com\/wp-content\/uploads\/2025\/09\/Lucas.jpeg\" alt=\"Lucas\" class=\"w-full h-full object-cover\">\n                            <\/div>\n                            <div>\n                                <p class=\"text-md leading-tight font-medium mb-0\">Lucas<\/p>\n                                <p class=\"text-xs leading-tight text-[#ffffff80]\">CEO en nk.studio<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                    <div data-aos=\"fade-in\" class=\"swiper-slide overflow-hidden\">\n                        <div class=\"testimonial-card max-w-full p-8 pb-20 hover:bg-[#3f3f46] transition-all\">\n                            <div class=\"mb-6\">\n                               <svg width=\"25\" height=\"25\" viewBox=\"0 0 33 34\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <g opacity=\"0.6\">\n                                <path d=\"M22 4.7915C21.2707 4.7915 20.5712 5.08124 20.0555 5.59696C19.5397 6.11269 19.25 6.81216 19.25 7.5415V15.7915C19.25 16.5208 19.5397 17.2203 20.0555 17.736C20.5712 18.2518 21.2707 18.5415 22 18.5415C22.3647 18.5415 22.7144 18.6864 22.9723 18.9442C23.2301 19.2021 23.375 19.5518 23.375 19.9165V21.2915C23.375 22.0208 23.0853 22.7203 22.5695 23.236C22.0538 23.7518 21.3543 24.0415 20.625 24.0415C20.2603 24.0415 19.9106 24.1864 19.6527 24.4442C19.3949 24.7021 19.25 25.0518 19.25 25.4165V28.1665C19.25 28.5312 19.3949 28.8809 19.6527 29.1388C19.9106 29.3966 20.2603 29.5415 20.625 29.5415C22.813 29.5415 24.9115 28.6723 26.4586 27.1251C28.0058 25.578 28.875 23.4795 28.875 21.2915V7.5415C28.875 6.81216 28.5853 6.11269 28.0695 5.59696C27.5538 5.08124 26.8543 4.7915 26.125 4.7915H22Z\" stroke=\"white\" stroke-width=\"2.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                                <path d=\"M6.875 4.7915C6.14565 4.7915 5.44618 5.08124 4.93046 5.59696C4.41473 6.11269 4.125 6.81216 4.125 7.5415V15.7915C4.125 16.5208 4.41473 17.2203 4.93046 17.736C5.44618 18.2518 6.14565 18.5415 6.875 18.5415C7.23967 18.5415 7.58941 18.6864 7.84727 18.9442C8.10513 19.2021 8.25 19.5518 8.25 19.9165V21.2915C8.25 22.0208 7.96027 22.7203 7.44454 23.236C6.92882 23.7518 6.22935 24.0415 5.5 24.0415C5.13533 24.0415 4.78559 24.1864 4.52773 24.4442C4.26987 24.7021 4.125 25.0518 4.125 25.4165V28.1665C4.125 28.5312 4.26987 28.8809 4.52773 29.1388C4.78559 29.3966 5.13533 29.5415 5.5 29.5415C7.68804 29.5415 9.78646 28.6723 11.3336 27.1251C12.8808 25.578 13.75 23.4795 13.75 21.2915V7.5415C13.75 6.81216 13.4603 6.11269 12.9445 5.59696C12.4288 5.08124 11.7293 4.7915 11 4.7915H6.875Z\" stroke=\"white\" stroke-width=\"2.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                                <\/g>\n                                <\/svg>\n\n                            <\/div>\n                            <blockquote class=\"text-md text-white leading-normal mb-8 pb-6\">\n                                <!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} -->\n<p>Estamos muy contentos con la forma en que el equipo de Folka aborda cada proyecto. Tienen sus procesos establecidos, lo que nos da mucha confianza en su trabajo. Prestan atenci\u00f3n a los detalles y son proactivos para resolver cualquier problema.<\/p>\n<!-- \/wp:paragraph -->                            <\/blockquote>\n                            \n                        <\/div>\n                        <div class=\"flex items-center w-8\/12 gap-4 bg-dark-gray  p-4 rounded-xl absolute left-0 bottom-0 testimonial-rounded full\">\n                            <div class=\"w-12 h-12 rounded-full overflow-hidden flex-shrink-0\">\n                                <img decoding=\"async\" src=\"https:\/\/folkamedia.com\/wp-content\/uploads\/2025\/09\/Juan.jpeg\" alt=\"Juan\" class=\"w-full h-full object-cover\">\n                            <\/div>\n                            <div>\n                                <p class=\"text-md leading-tight font-medium mb-0\">Juan<\/p>\n                                <p class=\"text-xs leading-tight text-[#ffffff80]\">Director ejecutivo en The Good Egg Collective<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                    <div data-aos=\"fade-in\" class=\"swiper-slide overflow-hidden\">\n                        <div class=\"testimonial-card max-w-full p-8 pb-20 hover:bg-[#3f3f46] transition-all\">\n                            <div class=\"mb-6\">\n                               <svg width=\"25\" height=\"25\" viewBox=\"0 0 33 34\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <g opacity=\"0.6\">\n                                <path d=\"M22 4.7915C21.2707 4.7915 20.5712 5.08124 20.0555 5.59696C19.5397 6.11269 19.25 6.81216 19.25 7.5415V15.7915C19.25 16.5208 19.5397 17.2203 20.0555 17.736C20.5712 18.2518 21.2707 18.5415 22 18.5415C22.3647 18.5415 22.7144 18.6864 22.9723 18.9442C23.2301 19.2021 23.375 19.5518 23.375 19.9165V21.2915C23.375 22.0208 23.0853 22.7203 22.5695 23.236C22.0538 23.7518 21.3543 24.0415 20.625 24.0415C20.2603 24.0415 19.9106 24.1864 19.6527 24.4442C19.3949 24.7021 19.25 25.0518 19.25 25.4165V28.1665C19.25 28.5312 19.3949 28.8809 19.6527 29.1388C19.9106 29.3966 20.2603 29.5415 20.625 29.5415C22.813 29.5415 24.9115 28.6723 26.4586 27.1251C28.0058 25.578 28.875 23.4795 28.875 21.2915V7.5415C28.875 6.81216 28.5853 6.11269 28.0695 5.59696C27.5538 5.08124 26.8543 4.7915 26.125 4.7915H22Z\" stroke=\"white\" stroke-width=\"2.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                                <path d=\"M6.875 4.7915C6.14565 4.7915 5.44618 5.08124 4.93046 5.59696C4.41473 6.11269 4.125 6.81216 4.125 7.5415V15.7915C4.125 16.5208 4.41473 17.2203 4.93046 17.736C5.44618 18.2518 6.14565 18.5415 6.875 18.5415C7.23967 18.5415 7.58941 18.6864 7.84727 18.9442C8.10513 19.2021 8.25 19.5518 8.25 19.9165V21.2915C8.25 22.0208 7.96027 22.7203 7.44454 23.236C6.92882 23.7518 6.22935 24.0415 5.5 24.0415C5.13533 24.0415 4.78559 24.1864 4.52773 24.4442C4.26987 24.7021 4.125 25.0518 4.125 25.4165V28.1665C4.125 28.5312 4.26987 28.8809 4.52773 29.1388C4.78559 29.3966 5.13533 29.5415 5.5 29.5415C7.68804 29.5415 9.78646 28.6723 11.3336 27.1251C12.8808 25.578 13.75 23.4795 13.75 21.2915V7.5415C13.75 6.81216 13.4603 6.11269 12.9445 5.59696C12.4288 5.08124 11.7293 4.7915 11 4.7915H6.875Z\" stroke=\"white\" stroke-width=\"2.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                                <\/g>\n                                <\/svg>\n\n                            <\/div>\n                            <blockquote class=\"text-md text-white leading-normal mb-8 pb-6\">\n                                <!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} -->\n<p>El equipo de Folka Media es el mejor socio tecnol\u00f3gico que he tenido en mi vida. La dedicaci\u00f3n de Mart\u00edn, Ximena y el resto de los profesionales es admirable. Solo tengo palabras de agradecimiento por tres a\u00f1os trabajando juntos.  <\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph -->                            <\/blockquote>\n                            \n                        <\/div>\n                        <div class=\"flex items-center w-8\/12 gap-4 bg-dark-gray  p-4 rounded-xl absolute left-0 bottom-0 testimonial-rounded full\">\n                            <div class=\"w-12 h-12 rounded-full overflow-hidden flex-shrink-0\">\n                                <img decoding=\"async\" src=\"https:\/\/folkamedia.com\/wp-content\/uploads\/2025\/09\/Matias-Munton-e1756998887322.png\" alt=\"Mat\u00edas\" class=\"w-full h-full object-cover\">\n                            <\/div>\n                            <div>\n                                <p class=\"text-md leading-tight font-medium mb-0\">Mat\u00edas<\/p>\n                                <p class=\"text-xs leading-tight text-[#ffffff80]\">Director ejecutivo en promociones a\u00e9reas<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                    <div data-aos=\"fade-in\" class=\"swiper-slide overflow-hidden\">\n                        <div class=\"testimonial-card max-w-full p-8 pb-20 hover:bg-[#3f3f46] transition-all\">\n                            <div class=\"mb-6\">\n                               <svg width=\"25\" height=\"25\" viewBox=\"0 0 33 34\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <g opacity=\"0.6\">\n                                <path d=\"M22 4.7915C21.2707 4.7915 20.5712 5.08124 20.0555 5.59696C19.5397 6.11269 19.25 6.81216 19.25 7.5415V15.7915C19.25 16.5208 19.5397 17.2203 20.0555 17.736C20.5712 18.2518 21.2707 18.5415 22 18.5415C22.3647 18.5415 22.7144 18.6864 22.9723 18.9442C23.2301 19.2021 23.375 19.5518 23.375 19.9165V21.2915C23.375 22.0208 23.0853 22.7203 22.5695 23.236C22.0538 23.7518 21.3543 24.0415 20.625 24.0415C20.2603 24.0415 19.9106 24.1864 19.6527 24.4442C19.3949 24.7021 19.25 25.0518 19.25 25.4165V28.1665C19.25 28.5312 19.3949 28.8809 19.6527 29.1388C19.9106 29.3966 20.2603 29.5415 20.625 29.5415C22.813 29.5415 24.9115 28.6723 26.4586 27.1251C28.0058 25.578 28.875 23.4795 28.875 21.2915V7.5415C28.875 6.81216 28.5853 6.11269 28.0695 5.59696C27.5538 5.08124 26.8543 4.7915 26.125 4.7915H22Z\" stroke=\"white\" stroke-width=\"2.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                                <path d=\"M6.875 4.7915C6.14565 4.7915 5.44618 5.08124 4.93046 5.59696C4.41473 6.11269 4.125 6.81216 4.125 7.5415V15.7915C4.125 16.5208 4.41473 17.2203 4.93046 17.736C5.44618 18.2518 6.14565 18.5415 6.875 18.5415C7.23967 18.5415 7.58941 18.6864 7.84727 18.9442C8.10513 19.2021 8.25 19.5518 8.25 19.9165V21.2915C8.25 22.0208 7.96027 22.7203 7.44454 23.236C6.92882 23.7518 6.22935 24.0415 5.5 24.0415C5.13533 24.0415 4.78559 24.1864 4.52773 24.4442C4.26987 24.7021 4.125 25.0518 4.125 25.4165V28.1665C4.125 28.5312 4.26987 28.8809 4.52773 29.1388C4.78559 29.3966 5.13533 29.5415 5.5 29.5415C7.68804 29.5415 9.78646 28.6723 11.3336 27.1251C12.8808 25.578 13.75 23.4795 13.75 21.2915V7.5415C13.75 6.81216 13.4603 6.11269 12.9445 5.59696C12.4288 5.08124 11.7293 4.7915 11 4.7915H6.875Z\" stroke=\"white\" stroke-width=\"2.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                                <\/g>\n                                <\/svg>\n\n                            <\/div>\n                            <blockquote class=\"text-md text-white leading-normal mb-8 pb-6\">\n                                <!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} -->\n<p>Desarrollar mi sitio web con Folka fue como trabajar seriamente con amigos. Durante todo el proceso se combin\u00f3 la profesionalidad con un trato c\u00e1lido y personal. El resultado fue un sitio que refleja mi trabajo y funciona perfectamente seg\u00fan mis necesidades. Mi sitio web es todo lo que esperaba y mucho m\u00e1s, porque sin darme cuenta, he hecho nuevos amigos.   <\/p>\n<!-- \/wp:paragraph -->                            <\/blockquote>\n                            \n                        <\/div>\n                        <div class=\"flex items-center w-8\/12 gap-4 bg-dark-gray  p-4 rounded-xl absolute left-0 bottom-0 testimonial-rounded full\">\n                            <div class=\"w-12 h-12 rounded-full overflow-hidden flex-shrink-0\">\n                                <img decoding=\"async\" src=\"https:\/\/folkamedia.com\/wp-content\/uploads\/2025\/09\/Vero-garcia.jpg\" alt=\"Ver\u00f3nica\" class=\"w-full h-full object-cover\">\n                            <\/div>\n                            <div>\n                                <p class=\"text-md leading-tight font-medium mb-0\">Ver\u00f3nica<\/p>\n                                <p class=\"text-xs leading-tight text-[#ffffff80]\">CEO<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                    <div data-aos=\"fade-in\" class=\"swiper-slide overflow-hidden\">\n                        <div class=\"testimonial-card max-w-full p-8 pb-20 hover:bg-[#3f3f46] transition-all\">\n                            <div class=\"mb-6\">\n                               <svg width=\"25\" height=\"25\" viewBox=\"0 0 33 34\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <g opacity=\"0.6\">\n                                <path d=\"M22 4.7915C21.2707 4.7915 20.5712 5.08124 20.0555 5.59696C19.5397 6.11269 19.25 6.81216 19.25 7.5415V15.7915C19.25 16.5208 19.5397 17.2203 20.0555 17.736C20.5712 18.2518 21.2707 18.5415 22 18.5415C22.3647 18.5415 22.7144 18.6864 22.9723 18.9442C23.2301 19.2021 23.375 19.5518 23.375 19.9165V21.2915C23.375 22.0208 23.0853 22.7203 22.5695 23.236C22.0538 23.7518 21.3543 24.0415 20.625 24.0415C20.2603 24.0415 19.9106 24.1864 19.6527 24.4442C19.3949 24.7021 19.25 25.0518 19.25 25.4165V28.1665C19.25 28.5312 19.3949 28.8809 19.6527 29.1388C19.9106 29.3966 20.2603 29.5415 20.625 29.5415C22.813 29.5415 24.9115 28.6723 26.4586 27.1251C28.0058 25.578 28.875 23.4795 28.875 21.2915V7.5415C28.875 6.81216 28.5853 6.11269 28.0695 5.59696C27.5538 5.08124 26.8543 4.7915 26.125 4.7915H22Z\" stroke=\"white\" stroke-width=\"2.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                                <path d=\"M6.875 4.7915C6.14565 4.7915 5.44618 5.08124 4.93046 5.59696C4.41473 6.11269 4.125 6.81216 4.125 7.5415V15.7915C4.125 16.5208 4.41473 17.2203 4.93046 17.736C5.44618 18.2518 6.14565 18.5415 6.875 18.5415C7.23967 18.5415 7.58941 18.6864 7.84727 18.9442C8.10513 19.2021 8.25 19.5518 8.25 19.9165V21.2915C8.25 22.0208 7.96027 22.7203 7.44454 23.236C6.92882 23.7518 6.22935 24.0415 5.5 24.0415C5.13533 24.0415 4.78559 24.1864 4.52773 24.4442C4.26987 24.7021 4.125 25.0518 4.125 25.4165V28.1665C4.125 28.5312 4.26987 28.8809 4.52773 29.1388C4.78559 29.3966 5.13533 29.5415 5.5 29.5415C7.68804 29.5415 9.78646 28.6723 11.3336 27.1251C12.8808 25.578 13.75 23.4795 13.75 21.2915V7.5415C13.75 6.81216 13.4603 6.11269 12.9445 5.59696C12.4288 5.08124 11.7293 4.7915 11 4.7915H6.875Z\" stroke=\"white\" stroke-width=\"2.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                                <\/g>\n                                <\/svg>\n\n                            <\/div>\n                            <blockquote class=\"text-md text-white leading-normal mb-8 pb-6\">\n                                <!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} -->\n<p>Empezamos a trabajar con Folka desde el inicio del proyecto y el resultado fue excelente. El equipo nos gui\u00f3 a trav\u00e9s de todos los pasos operativos y estrat\u00e9gicos, \u00a1para que el lanzamiento se desarrollara sin problemas! Ahora es nuestro socio tecnol\u00f3gico para seguir creciendo y ofrecer una experiencia de usuario optimizada. \u00a1Gracias, equipo Folka!   <\/p>\n<!-- \/wp:paragraph -->                            <\/blockquote>\n                            \n                        <\/div>\n                        <div class=\"flex items-center w-8\/12 gap-4 bg-dark-gray  p-4 rounded-xl absolute left-0 bottom-0 testimonial-rounded full\">\n                            <div class=\"w-12 h-12 rounded-full overflow-hidden flex-shrink-0\">\n                                <img decoding=\"async\" src=\"https:\/\/folkamedia.com\/wp-content\/uploads\/2025\/09\/Ceci-e1756999038624.jpeg\" alt=\"Cecilia\" class=\"w-full h-full object-cover\">\n                            <\/div>\n                            <div>\n                                <p class=\"text-md leading-tight font-medium mb-0\">Cecilia<\/p>\n                                <p class=\"text-xs leading-tight text-[#ffffff80]\">Marketing Manager at Calvagni<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                    <div data-aos=\"fade-in\" class=\"swiper-slide overflow-hidden\">\n                        <div class=\"testimonial-card max-w-full p-8 pb-20 hover:bg-[#3f3f46] transition-all\">\n                            <div class=\"mb-6\">\n                               <svg width=\"25\" height=\"25\" viewBox=\"0 0 33 34\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <g opacity=\"0.6\">\n                                <path d=\"M22 4.7915C21.2707 4.7915 20.5712 5.08124 20.0555 5.59696C19.5397 6.11269 19.25 6.81216 19.25 7.5415V15.7915C19.25 16.5208 19.5397 17.2203 20.0555 17.736C20.5712 18.2518 21.2707 18.5415 22 18.5415C22.3647 18.5415 22.7144 18.6864 22.9723 18.9442C23.2301 19.2021 23.375 19.5518 23.375 19.9165V21.2915C23.375 22.0208 23.0853 22.7203 22.5695 23.236C22.0538 23.7518 21.3543 24.0415 20.625 24.0415C20.2603 24.0415 19.9106 24.1864 19.6527 24.4442C19.3949 24.7021 19.25 25.0518 19.25 25.4165V28.1665C19.25 28.5312 19.3949 28.8809 19.6527 29.1388C19.9106 29.3966 20.2603 29.5415 20.625 29.5415C22.813 29.5415 24.9115 28.6723 26.4586 27.1251C28.0058 25.578 28.875 23.4795 28.875 21.2915V7.5415C28.875 6.81216 28.5853 6.11269 28.0695 5.59696C27.5538 5.08124 26.8543 4.7915 26.125 4.7915H22Z\" stroke=\"white\" stroke-width=\"2.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                                <path d=\"M6.875 4.7915C6.14565 4.7915 5.44618 5.08124 4.93046 5.59696C4.41473 6.11269 4.125 6.81216 4.125 7.5415V15.7915C4.125 16.5208 4.41473 17.2203 4.93046 17.736C5.44618 18.2518 6.14565 18.5415 6.875 18.5415C7.23967 18.5415 7.58941 18.6864 7.84727 18.9442C8.10513 19.2021 8.25 19.5518 8.25 19.9165V21.2915C8.25 22.0208 7.96027 22.7203 7.44454 23.236C6.92882 23.7518 6.22935 24.0415 5.5 24.0415C5.13533 24.0415 4.78559 24.1864 4.52773 24.4442C4.26987 24.7021 4.125 25.0518 4.125 25.4165V28.1665C4.125 28.5312 4.26987 28.8809 4.52773 29.1388C4.78559 29.3966 5.13533 29.5415 5.5 29.5415C7.68804 29.5415 9.78646 28.6723 11.3336 27.1251C12.8808 25.578 13.75 23.4795 13.75 21.2915V7.5415C13.75 6.81216 13.4603 6.11269 12.9445 5.59696C12.4288 5.08124 11.7293 4.7915 11 4.7915H6.875Z\" stroke=\"white\" stroke-width=\"2.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                                <\/g>\n                                <\/svg>\n\n                            <\/div>\n                            <blockquote class=\"text-md text-white leading-normal mb-8 pb-6\">\n                                <!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} -->\n<p>Despu\u00e9s de visitar varios sitios web y contactar con m\u00faltiples proveedores, finalmente tuvimos la suerte de encontrar al equipo de Folka. Quedamos muy satisfechos no solo con el producto, sino tambi\u00e9n con su escalabilidad. La din\u00e1mica de trabajo que proponen es excelente, muy recomendable si buscas un equipo c\u00e1lido, proactivo y atento en todos los detalles previos y posteriores a la implementaci\u00f3n.  <\/p>\n<!-- \/wp:paragraph -->                            <\/blockquote>\n                            \n                        <\/div>\n                        <div class=\"flex items-center w-8\/12 gap-4 bg-dark-gray  p-4 rounded-xl absolute left-0 bottom-0 testimonial-rounded full\">\n                            <div class=\"w-12 h-12 rounded-full overflow-hidden flex-shrink-0\">\n                                <img decoding=\"async\" src=\"https:\/\/folkamedia.com\/wp-content\/uploads\/2025\/09\/Marco.jpg\" alt=\"Marco\" class=\"w-full h-full object-cover\">\n                            <\/div>\n                            <div>\n                                <p class=\"text-md leading-tight font-medium mb-0\">Marco<\/p>\n                                <p class=\"text-xs leading-tight text-[#ffffff80]\">Marketing manager at Macaio<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                \n            <\/div>\n            \n            \n        <\/div>\n        <div class=\"relative md:hidden  mt-8 flex custom-slider-nav\">            \n            <div class=\"custom-nav swiper-button-prev\"><\/div>\n            <div class=\"custom-nav swiper-button-next\"><\/div>\n        <\/div>\n<\/div>\n\n<\/section>\n\n<style>\n    .testimonial-card {\n        background-color: #1e1e1e;\n        border: 1px solid #1e1e1e;\n        border-radius: 1rem;\n        \n        width: 100%;\n        \n        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n    }\n    .testimonial-card blockquote {\n        color: white;\n    }\n    .testimonial-card h3 {\n        color: white;\n    }\n   \n    .testimonial-card svg {\n        color: #9ca3af;\n    }\n\n    .swiper-container-testimonials.full .swiper-wrapper {\n        transition-timing-function: linear;\n        margin: 0 auto;\n      }\n\n\n<\/style>\n\n\n<!-- Swiper JS -->\n<script>\n\n        \/\/ Busca los botones DENTRO del contenedor del slider (o ajust\u00e1 si est\u00e1n fuera)\n      const nextBtn = document.querySelector('.custom-nav.swiper-button-next');\n      const prevBtn = document.querySelector('.custom-nav.swiper-button-prev');\n      document.addEventListener(\"DOMContentLoaded\", (event) => {\n\n        \/*\n        const selector  = '.swiper-container-testimonials.full';\n        const container = document.querySelector(selector);\n\n          const swiper3 = new window.Swiper(selector, {\n            direction: 'horizontal',\n            spaceBetween: 20,\n            loop: true,\n            allowTouchMove: true,\n            slidesPerGroup: 1,\n            slidesPerView: 1.2,\n            roundLengths: true,           \/\/ (1) evita sub-p\u00edxeles y micro saltos\n            normalizeSlideIndex: true,\n\n            \/\/ MOBILE\/TABLET: pausa entre slides\n            speed: 400,\n            autoplay: {\n              delay: 2400,\n              disableOnInteraction: true,\n              pauseOnMouseEnter: true\n            },\n\n            breakpoints: {\n              640:  { slidesPerView: 1.2 },\n              768:  { slidesPerView: 2.2 },\n              \/\/ DESKTOP: marquee continuo\n              1024: {\n                slidesPerView: 3.3,\n                speed: 8000,\n                autoplay: {\n                  delay: 0,\n                  disableOnInteraction: true,\n                  pauseOnMouseEnter: true\n                }\n              }\n            },\n\n            pagination: false,\n            navigation: {  nextEl: nextBtn,prevEl: prevBtn },\n          });\n\n\n        \n        *\/\n\n\n\n\n\/\/ ==== Slider horizontal: Desktop con marquee continuo \/ Mobile Swiper normal ====\n\/\/ Selector: .swiper-container-testimonials.full\n\nconst SELH = '.swiper-container-testimonials.full';\nconst containerH = document.querySelector(SELH);\n\n\/\/ Direcci\u00f3n del desplazamiento continuo: 1 = izquierda, -1 = derecha (s\u00f3lo desktop)\nconst DIR = 1;\n\n\/\/ Swiper (tu config)\nconst swiperH = new window.Swiper(SELH, {\n  direction: 'horizontal',\n  slidesPerView: 1.2,            \/\/ ajust\u00e1 seg\u00fan tu layout (puede ser 'auto')\n  spaceBetween: 20,\n  loop: false,                    \/\/ \u201cinfinito\u201d lo manejamos en desktop con RAF\n  centeredSlides: false,\n  speed: 6000,                    \/\/ referencial; no se usa en RAF\n  pagination: false,\n  navigation: false,\n  freeMode: { enabled: false, momentum: false },\n  allowTouchMove: true,\n  navigation: {  nextEl: nextBtn,prevEl: prevBtn },\n  breakpoints: {\n    640:  { slidesPerView: 1.2 },\n    768:  { slidesPerView: 2.2 },\n    \/\/ DESKTOP: marquee continuo (lo hace nuestro RAF; no dependemos de autoplay)\n    1024: {\n      slidesPerView: 3.3,\n      speed: 8000,\n      autoplay: {\n        delay: 0,\n        disableOnInteraction: true,\n        pauseOnMouseEnter: true\n      }\n    }\n  },\n});\n\n\/\/ ===== Helpers de modo =====\nconst mqlDesktop = window.matchMedia('(min-width: 1024px)');\nfunction isDesktop() { return mqlDesktop.matches; }\n\n\/\/ ===== L\u00f3gica de duplicaci\u00f3n (s\u00f3lo desktop) =====\nfunction ensureDuplicationFull() {\n  const wrapper = containerH?.querySelector('.swiper-wrapper');\n  if (!wrapper) return { wrapper: null, cycle: 0 };\n\n  \/\/ Evitar duplicar varias veces\n  const alreadyDuped = Array.from(wrapper.children).some(el => el.getAttribute('data-dup') === '1');\n  if (!alreadyDuped) {\n    const originals = Array.from(wrapper.children);\n    originals.forEach(node => {\n      const clone = node.cloneNode(true);\n      clone.setAttribute('data-dup', '1');\n      wrapper.appendChild(clone);\n    });\n  }\n\n  const cycle = Math.round(wrapper.scrollWidth \/ 2); \/\/ ancho de un set\n  return { wrapper, cycle };\n}\n\n\/\/ Remover duplicados y limpiar transform para que Swiper maneje todo (mobile)\nfunction ensureOriginalFull() {\n  const wrapper = containerH?.querySelector('.swiper-wrapper');\n  if (!wrapper) return;\n  \/\/ Quitar clones\n  Array.from(wrapper.children).forEach(el => {\n    if (el.getAttribute('data-dup') === '1') el.remove();\n  });\n  \/\/ Limpiar estilos que podr\u00edan interferir con Swiper\n  wrapper.style.transition = '';\n  wrapper.style.transform  = '';\n}\n\nlet { wrapper: wrapperH, cycle: cycleH } = ensureDuplicationFull();\n\n\/\/ ===== RAF de desktop =====\nlet rafIdH = null;\nlet runningH = false;\nlet lastTsH = 0;\n\n\/\/ Velocidad en px\/s (desktop)\nconst SPEED_PX_SEC_H = 60;\n\/\/ Offset acumulado (0..cycleH)\nlet offsetH = 0;\n\nfunction measureFull() {\n  const res = ensureDuplicationFull();\n  wrapperH = res.wrapper;\n  cycleH   = res.cycle;\n\n  \/\/ Normalizar offset al nuevo ciclo\n  offsetH = cycleH ? (offsetH % cycleH) : 0;\n\n  if (wrapperH) {\n    wrapperH.style.transition = 'none';\n    const x0 = (DIR === 1) ? -offsetH : offsetH;\n    wrapperH.style.transform  = `translate3d(${x0}px, 0, 0)`;\n  }\n}\n\nfunction stepFull(ts) {\n  if (!runningH || !wrapperH || !cycleH || !isDesktop()) return;\n\n  if (!lastTsH) { lastTsH = ts; rafIdH = requestAnimationFrame(stepFull); return; }\n  const dt = (ts - lastTsH) \/ 1000;\n  lastTsH = ts;\n\n  \/\/ Avanzar offset, el signo lo da DIR en el transform\n  offsetH = (offsetH + SPEED_PX_SEC_H * dt) % cycleH;\n\n  const x = (DIR === 1) ? -offsetH : offsetH;\n  wrapperH.style.transition = 'none';\n  wrapperH.style.transform  = `translate3d(${x}px, 0, 0)`;\n\n  rafIdH = requestAnimationFrame(stepFull);\n}\n\nfunction startLoopFull() {\n  if (!isDesktop()) return;        \/\/ no arrancar en mobile\n  if (runningH) return;\n  runningH = true;\n  lastTsH = 0;\n  swiperH.autoplay && swiperH.autoplay.stop?.(); \/\/ por si hubiera autoplay habilitado\n  measureFull();\n  rafIdH = requestAnimationFrame(stepFull);\n}\n\nfunction stopLoopFull() {\n  runningH = false;\n  if (rafIdH) cancelAnimationFrame(rafIdH);\n  rafIdH = null;\n}\n\n\/\/ ===== Hover desktop (pausa\/reanuda) =====\nconst mqlHoverH = window.matchMedia('(hover:hover) and (pointer:fine)');\nfunction onEnterFull(){ if (mqlHoverH.matches && isDesktop()) stopLoopFull(); }\nfunction onLeaveFull(){ if (mqlHoverH.matches && isDesktop()) startLoopFull(); }\n\nif (containerH) {\n  containerH.addEventListener('pointerenter', onEnterFull, { passive: true });\n  containerH.addEventListener('pointerleave', onLeaveFull,  { passive: true });\n}\n\n\/\/ ===== Touch \/ Drag =====\n\/\/ Desktop: pausar al arrastrar y reanudar al soltar.\n\/\/ Mobile: no hacemos nada (Swiper default).\nswiperH.on('touchStart', () => {\n  if (isDesktop()) stopLoopFull();\n});\nswiperH.on('touchEnd', () => {\n  if (isDesktop()) startLoopFull();\n});\n\n\/\/ ===== Resize \/ Breakpoint change =====\nfunction applyMode() {\n  if (isDesktop()) {\n    \/\/ Modo desktop: asegurar duplicaci\u00f3n y arrancar marquee\n    startLoopFull();\n  } else {\n    \/\/ Modo mobile: parar RAF y dejar Swiper default (sin duplicados)\n    stopLoopFull();\n    ensureOriginalFull();\n    swiperH.update(); \/\/ refrescar medidas del Swiper\n  }\n}\n\n\/\/ Swiper tambi\u00e9n emite 'breakpoint' cuando cruza un corte\nswiperH.on('breakpoint', applyMode);\nwindow.addEventListener('resize', applyMode);\nwindow.addEventListener('orientationchange', applyMode);\n\n\/\/ ===== Visibilidad \/ Reduced\n\/\/ ===== Visibilidad \/ Reduced motion =====\ndocument.addEventListener('visibilitychange', () => {\n  if (document.hidden) stopLoopFull();\n  else applyMode();\n});\n\nconst mqlReducedH = window.matchMedia('(prefers-reduced-motion: reduce)');\nfunction applyReducedMotionFull(){\n  if (mqlReducedH.matches) {\n    stopLoopFull();\n  } else {\n    applyMode();\n  }\n}\nmqlReducedH.addEventListener?.('change', applyReducedMotionFull);\n\n\/\/ ===== Arranque =====\napplyReducedMotionFull();\n\n\n});    \n<\/script>\n\n<div class=\"wp-block-columns are-vertically-aligned-top is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<section \n    data-name=\"block-title-text-button\"\n    id=\"block_31b1d4bae73aece010ac4744c6bb99d8\"\n    class=\" has-text-align-left    \"\n    style=\"\"\n>\n\n    <div class=\"py-2 md:py-16 flex items-center justify-center px-0 \">\n        <div class=\"w-full mx-auto space-y-6\">\n            <!-- Top indicator -->\n                        <div class=\"flex items-center justify-start gap-2 text-white\">\n                <div data-aos=\"fade-in\" class=\"w-3 h-3 rounded-full bg-primary\"><\/div>\n                <span data-splitting=\"words\" class=\"folka-initial-hidden text-xl md:text-2xl pl-2\">Todo lo que necesitas saber<\/span>\n            <\/div>\n            \n            <!-- Main heading -->\n            <h2  data-splitting data-target-class=\"folka-animated\" class=\"folka-initial-hidden font-semibold text-left text-white md:leading-none pb-6  text-4xl md:text-6xl lg:text-6xl\">\n               Preguntas frecuentes            <\/h2>\n\n                        <!-- Subheading -->\n            <div data-splitting=\"words\" class=\"folka-initial-hidden text-xl md:text-3xl text-left text-white  font-light pb-4 md:pb-6\">\n                \u00bfDudas? Estamos ac\u00e1 para ayudarte             <\/div>\n            \n            <!-- CTA Button -->\n                                                 <div data-aos=\"fade-in\"  class=\"flex w-full justify-start relative mt-6 md:mt-12  \">\n                        <a href=\"https:\/\/folkamedia.com\/es\/contacto\/\" target=\"\" class=\"folka-button bg-primary text-gray-900 px-8 py-3 rounded-full font-medium text-lg transition-colors relative flex items-center space-x-2  pr-20\">\n                            <span class=\" z-20\">Escribinos<\/span>\n                            <span class=' button-circle flex justify-end px-4 items-center'>\n                                <svg width=\"8\" height=\"8\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path d=\"M9.24227 9.24234L7.74408 9.25559L7.74408 3.3159L1.28731 9.77267L0.226654 8.71201L6.68342 2.25524L0.743725 2.25524L0.756984 0.757054H9.24227V9.24234Z\" fill=\"black\"\/>\n                                <\/svg>\n                            <\/span>\n                        <\/a>\n                    <\/div>\n                        <\/div>\n    <\/div>\n\n<\/section>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n    <section \n        data-name=\"block-accordion-post-type\" \n        id=\"block_fd468dc25b3c27d004c9daa4861cf585\"     \n        class=\" has-text-align-left  \"\n        style=\"\"\n    >\n        <div x-data=\"{ selected: null }\" class=\"space-y-4\">\n                            <div data-aos=\"fade-up\" class=\"border border-almost-dark-gray rounded-3xl bg-almost-dark-gray overflow-hidden shadow p-4\">\n                    <button \n                        @click=\"selected === 0 ? selected = null : selected = 0\" \n                        class=\"w-full flex justify-between items-center p-5 bg-white hover:bg-gray-50 transition\"\n                        style=\"background-color: #1e1e1e; color: #ffffff;\"\n                    >\n                        <span class=\"text-left font-semibold text-white text-xl w-[90%]\">\n                            \u00bfUsan plantillas para los sitios?                        <\/span>\n                        <svg \n                            :class=\"selected === 0 ? 'rotate-180' : ''\" \n                            class=\"w-5 h-5 text-gray-500 transition-transform duration-300 ease-in-out\" \n                            fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"\n                        >\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" \/>\n                        <\/svg>\n                    <\/button>\n                    <div \n                        x-show=\"selected === 0\" \n                        x-collapse\n                        x-cloak\n                        class=\"px-5 text-gray-700 accordion-content\"\n                    >\n                        <div class=\"pb-5\"><p><!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} --><\/p>\n<p>No. Siempre recomendamos un desarrollo a medida. No hay nada mejor que un dise\u00f1o pensado para tu marca y un desarrollo creado espec\u00edficamente para tu proyecto. Con esto logramos sitios m\u00e1s livianos, r\u00e1pidos, escalables en el tiempo y con una experiencia de usuario \u00fanica.   <\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<\/div>\n                    <\/div>\n                <\/div>\n                            <div data-aos=\"fade-up\" class=\"border border-almost-dark-gray rounded-3xl bg-almost-dark-gray overflow-hidden shadow p-4\">\n                    <button \n                        @click=\"selected === 1 ? selected = null : selected = 1\" \n                        class=\"w-full flex justify-between items-center p-5 bg-white hover:bg-gray-50 transition\"\n                        style=\"background-color: #1e1e1e; color: #ffffff;\"\n                    >\n                        <span class=\"text-left font-semibold text-white text-xl w-[90%]\">\n                            Ya tengo un dise\u00f1o, \u00bfpueden programarlo?                        <\/span>\n                        <svg \n                            :class=\"selected === 1 ? 'rotate-180' : ''\" \n                            class=\"w-5 h-5 text-gray-500 transition-transform duration-300 ease-in-out\" \n                            fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"\n                        >\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" \/>\n                        <\/svg>\n                    <\/button>\n                    <div \n                        x-show=\"selected === 1\" \n                        x-collapse\n                        x-cloak\n                        class=\"px-5 text-gray-700 accordion-content\"\n                    >\n                        <div class=\"pb-5\"><p><!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} --><\/p>\n<p>S\u00ed. Podemos desarrollar tu sitio en base al dise\u00f1o que nos env\u00edes. Algunos clientes comienzan desde cero con nosotros y otros ya tienen un dise\u00f1ador. Nos adaptamos y trabajamos en equipo con tu equipo.   <\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<\/div>\n                    <\/div>\n                <\/div>\n                            <div data-aos=\"fade-up\" class=\"border border-almost-dark-gray rounded-3xl bg-almost-dark-gray overflow-hidden shadow p-4\">\n                    <button \n                        @click=\"selected === 2 ? selected = null : selected = 2\" \n                        class=\"w-full flex justify-between items-center p-5 bg-white hover:bg-gray-50 transition\"\n                        style=\"background-color: #1e1e1e; color: #ffffff;\"\n                    >\n                        <span class=\"text-left font-semibold text-white text-xl w-[90%]\">\n                            \u00bfVoy a poder modificar las im\u00e1genes y el contenido de mi sitio?                        <\/span>\n                        <svg \n                            :class=\"selected === 2 ? 'rotate-180' : ''\" \n                            class=\"w-5 h-5 text-gray-500 transition-transform duration-300 ease-in-out\" \n                            fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"\n                        >\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" \/>\n                        <\/svg>\n                    <\/button>\n                    <div \n                        x-show=\"selected === 2\" \n                        x-collapse\n                        x-cloak\n                        class=\"px-5 text-gray-700 accordion-content\"\n                    >\n                        <div class=\"pb-5\"><p><!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} --><\/p>\n<p>S\u00ed, totalmente. Todos nuestros sitios son 100% auto-administrables para que puedas actualizar textos, im\u00e1genes y secciones cuando lo necesites. <\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<\/div>\n                    <\/div>\n                <\/div>\n                            <div data-aos=\"fade-up\" class=\"border border-almost-dark-gray rounded-3xl bg-almost-dark-gray overflow-hidden shadow p-4\">\n                    <button \n                        @click=\"selected === 3 ? selected = null : selected = 3\" \n                        class=\"w-full flex justify-between items-center p-5 bg-white hover:bg-gray-50 transition\"\n                        style=\"background-color: #1e1e1e; color: #ffffff;\"\n                    >\n                        <span class=\"text-left font-semibold text-white text-xl w-[90%]\">\n                            No tengo hosting ni dominio, \u00bfustedes lo ofrecen?                        <\/span>\n                        <svg \n                            :class=\"selected === 3 ? 'rotate-180' : ''\" \n                            class=\"w-5 h-5 text-gray-500 transition-transform duration-300 ease-in-out\" \n                            fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"\n                        >\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" \/>\n                        <\/svg>\n                    <\/button>\n                    <div \n                        x-show=\"selected === 3\" \n                        x-collapse\n                        x-cloak\n                        class=\"px-5 text-gray-700 accordion-content\"\n                    >\n                        <div class=\"pb-5\"><p><!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} --><\/p>\n<p>S\u00ed. Ofrecemos hosting en la nube con certificado de seguridad SSL y cuentas de correo. Adem\u00e1s, gestionamos el registro de dominios .com para que tengas todo resuelto en un solo lugar.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<\/div>\n                    <\/div>\n                <\/div>\n                            <div data-aos=\"fade-up\" class=\"border border-almost-dark-gray rounded-3xl bg-almost-dark-gray overflow-hidden shadow p-4\">\n                    <button \n                        @click=\"selected === 4 ? selected = null : selected = 4\" \n                        class=\"w-full flex justify-between items-center p-5 bg-white hover:bg-gray-50 transition\"\n                        style=\"background-color: #1e1e1e; color: #ffffff;\"\n                    >\n                        <span class=\"text-left font-semibold text-white text-xl w-[90%]\">\n                            \u00bfQu\u00e9 hace diferente a Folka Media de otras agencias de desarrollo?                        <\/span>\n                        <svg \n                            :class=\"selected === 4 ? 'rotate-180' : ''\" \n                            class=\"w-5 h-5 text-gray-500 transition-transform duration-300 ease-in-out\" \n                            fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"\n                        >\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" \/>\n                        <\/svg>\n                    <\/button>\n                    <div \n                        x-show=\"selected === 4\" \n                        x-collapse\n                        x-cloak\n                        class=\"px-5 text-gray-700 accordion-content\"\n                    >\n                        <div class=\"pb-5\"><p><!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} --><\/p>\n<p>En Folka Media no solo desarrollamos tecnolog\u00eda, trabajamos como socios estrat\u00e9gicos. Te ayudamos a tomar mejores decisiones, anticiparnos a desaf\u00edos y construir soluciones digitales que crezcan con tu negocio. <\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<\/div>\n                    <\/div>\n                <\/div>\n                            <div data-aos=\"fade-up\" class=\"border border-almost-dark-gray rounded-3xl bg-almost-dark-gray overflow-hidden shadow p-4\">\n                    <button \n                        @click=\"selected === 5 ? selected = null : selected = 5\" \n                        class=\"w-full flex justify-between items-center p-5 bg-white hover:bg-gray-50 transition\"\n                        style=\"background-color: #1e1e1e; color: #ffffff;\"\n                    >\n                        <span class=\"text-left font-semibold text-white text-xl w-[90%]\">\n                            \u00bfQu\u00e9 tipo de desarrollos realizan?                        <\/span>\n                        <svg \n                            :class=\"selected === 5 ? 'rotate-180' : ''\" \n                            class=\"w-5 h-5 text-gray-500 transition-transform duration-300 ease-in-out\" \n                            fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"\n                        >\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" \/>\n                        <\/svg>\n                    <\/button>\n                    <div \n                        x-show=\"selected === 5\" \n                        x-collapse\n                        x-cloak\n                        class=\"px-5 text-gray-700 accordion-content\"\n                    >\n                        <div class=\"pb-5\"><p><!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} --><\/p>\n<p>Creamos sitios web, tiendas e-commerce y aplicaciones personalizadas con c\u00f3digo limpio, escalable y de alto rendimiento. Nos adaptamos a cada necesidad sin usar soluciones gen\u00e9ricas. <\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<\/div>\n                    <\/div>\n                <\/div>\n                            <div data-aos=\"fade-up\" class=\"border border-almost-dark-gray rounded-3xl bg-almost-dark-gray overflow-hidden shadow p-4\">\n                    <button \n                        @click=\"selected === 6 ? selected = null : selected = 6\" \n                        class=\"w-full flex justify-between items-center p-5 bg-white hover:bg-gray-50 transition\"\n                        style=\"background-color: #1e1e1e; color: #ffffff;\"\n                    >\n                        <span class=\"text-left font-semibold text-white text-xl w-[90%]\">\n                            \u00bfPueden integrar mi plataforma con herramientas externas?                        <\/span>\n                        <svg \n                            :class=\"selected === 6 ? 'rotate-180' : ''\" \n                            class=\"w-5 h-5 text-gray-500 transition-transform duration-300 ease-in-out\" \n                            fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"\n                        >\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" \/>\n                        <\/svg>\n                    <\/button>\n                    <div \n                        x-show=\"selected === 6\" \n                        x-collapse\n                        x-cloak\n                        class=\"px-5 text-gray-700 accordion-content\"\n                    >\n                        <div class=\"pb-5\"><p><!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} --><\/p>\n<p>S\u00ed. Somos expertos en integraciones inteligentes: desde APIs de terceros hasta funciones de Inteligencia Artificial. Nuestro objetivo es que tu plataforma trabaje de manera m\u00e1s eficiente y potente.  <\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<\/div>\n                    <\/div>\n                <\/div>\n                            <div data-aos=\"fade-up\" class=\"border border-almost-dark-gray rounded-3xl bg-almost-dark-gray overflow-hidden shadow p-4\">\n                    <button \n                        @click=\"selected === 7 ? selected = null : selected = 7\" \n                        class=\"w-full flex justify-between items-center p-5 bg-white hover:bg-gray-50 transition\"\n                        style=\"background-color: #1e1e1e; color: #ffffff;\"\n                    >\n                        <span class=\"text-left font-semibold text-white text-xl w-[90%]\">\n                            \u00bfOfrecen servicios de automatizaci\u00f3n?                        <\/span>\n                        <svg \n                            :class=\"selected === 7 ? 'rotate-180' : ''\" \n                            class=\"w-5 h-5 text-gray-500 transition-transform duration-300 ease-in-out\" \n                            fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"\n                        >\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" \/>\n                        <\/svg>\n                    <\/button>\n                    <div \n                        x-show=\"selected === 7\" \n                        x-collapse\n                        x-cloak\n                        class=\"px-5 text-gray-700 accordion-content\"\n                    >\n                        <div class=\"pb-5\"><p><!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} --><\/p>\n<p>S\u00ed. Dise\u00f1amos flujos de automatizaci\u00f3n con AI, Instagram y WhatsApp, adem\u00e1s de procesos de marketing, operaciones y tareas repetitivas. As\u00ed te ayudamos a ahorrar tiempo, mejorar la eficiencia y enfocarte en lo m\u00e1s importante de tu negocio.  <\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<\/div>\n                    <\/div>\n                <\/div>\n                            <div data-aos=\"fade-up\" class=\"border border-almost-dark-gray rounded-3xl bg-almost-dark-gray overflow-hidden shadow p-4\">\n                    <button \n                        @click=\"selected === 8 ? selected = null : selected = 8\" \n                        class=\"w-full flex justify-between items-center p-5 bg-white hover:bg-gray-50 transition\"\n                        style=\"background-color: #1e1e1e; color: #ffffff;\"\n                    >\n                        <span class=\"text-left font-semibold text-white text-xl w-[90%]\">\n                            \u00bfTrabajan con empresas de cualquier tama\u00f1o o industria?                        <\/span>\n                        <svg \n                            :class=\"selected === 8 ? 'rotate-180' : ''\" \n                            class=\"w-5 h-5 text-gray-500 transition-transform duration-300 ease-in-out\" \n                            fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"\n                        >\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" \/>\n                        <\/svg>\n                    <\/button>\n                    <div \n                        x-show=\"selected === 8\" \n                        x-collapse\n                        x-cloak\n                        class=\"px-5 text-gray-700 accordion-content\"\n                    >\n                        <div class=\"pb-5\"><p><!-- wp:paragraph {\"translatedWithWPMLTM\":\"1\"} --><\/p>\n<p>S\u00ed. Hemos trabajado con startups, PYMEs y grandes empresas en distintos rubros como retail, turismo, industria y educaci\u00f3n. Adaptamos las soluciones a la realidad de cada cliente.  <\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<\/div>\n                    <\/div>\n                <\/div>\n                    <\/div>\n    <\/section>\n\n<\/div>\n<\/div>\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Qu\u00e9 hacemos Soluciones tecnol\u00f3gicas sencillas que ayudan a que tu negocio crezca.<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_joinchat":[],"footnotes":""},"class_list":["post-922","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/folkamedia.com\/es\/wp-json\/wp\/v2\/pages\/922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/folkamedia.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/folkamedia.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/folkamedia.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/folkamedia.com\/es\/wp-json\/wp\/v2\/comments?post=922"}],"version-history":[{"count":0,"href":"https:\/\/folkamedia.com\/es\/wp-json\/wp\/v2\/pages\/922\/revisions"}],"wp:attachment":[{"href":"https:\/\/folkamedia.com\/es\/wp-json\/wp\/v2\/media?parent=922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}