diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
index 7d8b2d3..058633e 100644
--- a/src/components/Banner/Banner.js
+++ b/src/components/Banner/Banner.js
@@ -9,7 +9,8 @@ import CustomImage from "../CustomImage/CustomImage"
 
 const Banner = ({ data }) => {
   const { theme } = useTheme()
-  const { title, variant, summary, animation, image, imageDark, button } = data
+  const { title, variant, summary, animation, image, imageDark, arrayButtons, button } = data
+
 
   const defaultOptions = {
     loop: true,
@@ -39,14 +40,27 @@ const Banner = ({ data }) => {
                 dangerouslySetInnerHTML={{ __html: summary }}
               />
             }
-            {button && (
-              <CustomLink
-                content={button?.content}
-                url={button?.url}
-                landing={button?.english_landing_page}
-                className={"button"}
-              />
+            {Array.isArray(arrayButtons) && arrayButtons.length > 0 && (
+              <div className="banner__buttons">
+                {arrayButtons.map((btn, index) => (
+                  <CustomLink
+                    key={index}
+                    content={btn.content}
+                    url={btn.url}
+                    landing={btn.english_landing_page}
+                    className="button"
+                  />
+                ))}
+              </div>
             )}
+            {button && (
+                <CustomLink
+                  content={button.content}
+                  url={button?.url}
+                  landing={button?.landing_page}
+                  className={'button'}
+                />
+              )}
           </div>
         </div>
 
@@ -81,6 +95,15 @@ Banner.propTypes = {
     title: PropTypes.string.isRequired,
     variant: PropTypes.string.isRequired,
     summary: PropTypes.string,
+    arrayButtons: PropTypes.arrayOf(
+    PropTypes.shape({
+      content: PropTypes.string,
+      url: PropTypes.string,
+      english_landing_page: PropTypes.shape({
+        slug: PropTypes.string.isRequired,
+      }),
+    })
+  ),
     button: PropTypes.shape({
       content: PropTypes.string.isRequired,
       url: PropTypes.string,
diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss
index 5313508..4bb3726 100644
--- a/src/components/Banner/Banner.scss
+++ b/src/components/Banner/Banner.scss
@@ -170,6 +170,8 @@
   &.diagonalReverse {
     .banner__wrapper {
       margin: 32px auto;
+      display: flex;
+      flex-direction: column;
     }
 
     .imagen {
@@ -184,13 +186,22 @@
       }
     }
 
+     .banner__buttons{
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      padding-top: 25px;
+      padding-right: 10px;
+    }
+    
     .button {
-      margin-top: 20px;
-      margin-bottom: 20px;
-      display: inline-block;
-      color: #607ee7;
-      text-decoration: underline;
-      padding-left: 5px;
+      color:$primary;
+        
+      @include primaryBtn;
+      display: block;
+      width: max-content;
+      padding: 10px 15px;
+      margin-right: 20px;
     }
 
     .title {
@@ -356,9 +367,7 @@
         }
       }
 
-      .button {
-        padding-left: 5rem;
-      }
+      
 
       .title {
         display: flex;
diff --git a/src/components/BannerList/Banner.scss b/src/components/BannerList/Banner.scss
index bc40eb9..fdbff1c 100644
--- a/src/components/BannerList/Banner.scss
+++ b/src/components/BannerList/Banner.scss
@@ -54,11 +54,16 @@
     a {
       margin-top: 10px;
       @include primaryBtn;
-      align-self: baseline;
+      align-self: flex-start;
 
-      @media screen and (max-width: ($breakpoint-md - 1px)) {
-        display: none;
-      }
+     @media screen and (max-width: ($breakpoint-md - 1px)) {
+      display: inline-block;
+      @include primaryBtn;
+      //margin: 10px auto 0; 
+      text-align: center;
+      align-self:flex-start;
+    }
+      
     }
   }
 }
diff --git a/src/components/Banners/BannerTop.js b/src/components/Banners/BannerTop.js
index a1185f5..92600d9 100644
--- a/src/components/Banners/BannerTop.js
+++ b/src/components/Banners/BannerTop.js
@@ -12,15 +12,26 @@ const BannerTop = ({ banner }) => {
 
   return (
     <div className={`BannerTop ${variant}`}>
-      <BgImage image={imageBanner} className="BannerTop__bgImage">
+      {imageBanner ? (
+        <BgImage
+          image={imageBanner}
+          className="BannerTop__bgImage"
+          loading="eager"
+          fetchpriority="high"
+        >
+          <div className="BannerTop__titleContainer">
+            <h1 className={`BannerTop__title ${variant && "background container"}`}>
+              {title}
+            </h1>
+          </div>
+        </BgImage>
+      ) : (
         <div className="BannerTop__titleContainer">
-          <h1
-            className={`BannerTop__title ${variant && "background container"}`}
-          >
+          <h1 className={`BannerTop__title ${variant && "background container"}`}>
             {title}
           </h1>
         </div>
-      </BgImage>
+      )}
     </div>
   )
 }
diff --git a/src/components/Banners/BannerTop.scss b/src/components/Banners/BannerTop.scss
index 6ff3a95..9429e4a 100644
--- a/src/components/Banners/BannerTop.scss
+++ b/src/components/Banners/BannerTop.scss
@@ -56,4 +56,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/BlogPage/BlogContainer.js b/src/components/BlogPage/BlogContainer.js
index d53629d..624ce2d 100644
--- a/src/components/BlogPage/BlogContainer.js
+++ b/src/components/BlogPage/BlogContainer.js
@@ -7,7 +7,7 @@ import Layout from "../layout"
 import Banner from "../Banner/Banner"
 import "./BlogContainer.scss"
 
-const Blog = () => {
+const Blog = ({location}) => {
   const { allStrapiBlogCategory, allStrapiArticle, allStrapiBlogPage } = useBlog()
   const categorias = allStrapiBlogCategory.nodes
   const articulos = allStrapiArticle.nodes
@@ -44,6 +44,7 @@ const Blog = () => {
         title={seo?.pageTitle}
         description={seo?.pageDescription}
         keywords={seo?.pageKeywords}
+        location={location}
       />
       <Banner data={banner} />
 
diff --git a/src/components/DualSection/OneSection.js b/src/components/DualSection/OneSection.js
index 872b47f..9820d86 100644
--- a/src/components/DualSection/OneSection.js
+++ b/src/components/DualSection/OneSection.js
@@ -19,7 +19,6 @@ const OneSection = ({ data: { dualSectionPart } }) => {
     <div
       className="one_sec-background"
       style={{
-        backgroundRepeat: "repeat",
         backgroundPosition: "center",
         backgroundImage: `url(${
           theme === "dark" && backgroundImageDark?.url
diff --git a/src/components/FaIcon/FaIcon.js b/src/components/FaIcon/FaIcon.js
index 9e1aa4a..454f8e4 100644
--- a/src/components/FaIcon/FaIcon.js
+++ b/src/components/FaIcon/FaIcon.js
@@ -1,15 +1,23 @@
 import React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faEnvelope, faLocationDot } from "@fortawesome/free-solid-svg-icons"
-import { faLinkedin, faTwitter, faInstagram, faYoutube, faSpotify } from "@fortawesome/free-brands-svg-icons"
+import {
+  faLinkedin,
+  faTwitter,
+  faXTwitter, 
+  faInstagram,
+  faYoutube,
+  faSpotify
+  
+} from "@fortawesome/free-brands-svg-icons"
 import PropTypes from "prop-types"
 
-// Mapeo de los íconos que se usan
 const iconMap = {
   "fa-envelope": faEnvelope,
   "fa-location-dot": faLocationDot,
   "fa-linkedin": faLinkedin,
   "fa-twitter": faTwitter,
+  "fa-x-twitter": faXTwitter, 
   "fa-instagram": faInstagram,
   "fa-youtube": faYoutube,
   "fa-spotify": faSpotify,
@@ -31,4 +39,6 @@ FaIcon.propTypes = {
   code: PropTypes.string.isRequired,
 }
 
-export default FaIcon
\ No newline at end of file
+
+export default FaIcon
+
diff --git a/src/components/Seo/Seo.js b/src/components/Seo/Seo.js
index 40a5e52..8a41acf 100644
--- a/src/components/Seo/Seo.js
+++ b/src/components/Seo/Seo.js
@@ -3,9 +3,10 @@ import PropTypes from "prop-types"
 import { Helmet } from "react-helmet"
 import { useGlobalSeo } from "../../hooks"
 
-function Seo({ description, lang, meta, title, keywords }) {
+function Seo({ description, lang, meta, title, keywords, location }) {
   const data = useGlobalSeo()
 
+  const pathname = location?.pathname || "/"
   const {
     author,
     robots,
@@ -77,17 +78,13 @@ function Seo({ description, lang, meta, title, keywords }) {
         },
       ].concat(meta)}
       link={[
-        {
-          rel: "canonical",
-          href: `https://bitlogic.io`
-        },
         {
           rel: "alternate",
-          href: `https://en.bitlogic.io`
+          href: `https://bitlogic.io${pathname}` 
         },
         {
           rel: "alternate",
-          href: `https://www.bitlogic.io`
+          href: `https://www.bitlogic.io${pathname}`
         }
        
       ]}
@@ -99,6 +96,7 @@ Seo.defaultProps = {
   lang: `en`,
   meta: [],
   description: ``,
+  location: null,
 }
 
 Seo.propTypes = {
@@ -106,7 +104,8 @@ Seo.propTypes = {
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string.isRequired,
-  keywords: PropTypes.string
+  keywords: PropTypes.string,
+  location: PropTypes.object, 
 }
 
 export default Seo
diff --git a/src/components/Text/Text.scss b/src/components/Text/Text.scss
index 88301e0..859b588 100644
--- a/src/components/Text/Text.scss
+++ b/src/components/Text/Text.scss
@@ -22,7 +22,7 @@
     flex: 2;
     background-color: $primary-container;
     border-radius: 10px;
-    padding: 32px 16px;
+    padding: 32px 35px;
     @media (min-width: $breakpoint-lg) {
       padding: 24px 32px;
     }
diff --git a/src/components/layout.js b/src/components/layout.js
index 55b4612..27c007e 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -1,10 +1,12 @@
-import React, { lazy, Suspense } from "react"
+import React, { lazy, Suspense, useEffect } from "react"
 import Header from "./header"
 import ThemeProvider from "../context/themeContext"
 import Footer from "./Footer/Footer"
 import "./layout.scss"
 import PropTypes from "prop-types"
 import "./FontAwesomeOne/FontAwesomeOne"
+import { Helmet } from "react-helmet"
+import { useStaticQuery, graphql } from "gatsby"
 
 const BannerRedirect = lazy(() => import("./BannerRedirect/BannerRedirect"))
 
@@ -16,7 +18,7 @@ const Layout = ({ children, options = {}, location }) => {
 
   options = { ...defaultOptions, ...options }
 
-  React.useEffect(() => {
+  useEffect(() => {
     const hash = location?.state?.component
     let el = hash && document.getElementById(hash)
     if (el) {
@@ -27,17 +29,57 @@ const Layout = ({ children, options = {}, location }) => {
   const userLanguage =
     typeof window !== "undefined" ? navigator.language : undefined
 
+  const { strapiEnglishHome } = useStaticQuery(graphql`
+    query GetVideoBackgroundImage {
+      strapiEnglishHome {
+        body {
+          strapi_component
+          backgroundImage {
+            url
+            alternativeText
+            localFile {
+              childImageSharp {
+                gatsbyImageData(
+                  layout: FULL_WIDTH
+                  placeholder: BLURRED
+                  formats: [WEBP, AUTO]
+                )
+              }
+            }
+          }
+        }
+      }
+    }
+  `)
+
+  const videoBlock = strapiEnglishHome?.body?.find(
+    block => block.strapi_component === "home.video-background"
+  )
+
+  const heroUrl = videoBlock?.backgroundImage?.url
+  const fullHeroUrl = heroUrl?.startsWith("http")
+    ? heroUrl
+    : heroUrl
+    ? `https://strapi-s3-bitlogic.s3.sa-east-1.amazonaws.com${heroUrl}`
+    : null
+
   return (
     <ThemeProvider>
+      <Helmet>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Helmet>
+
       {options.hasHeader && <Header />}
+
       {userLanguage?.startsWith("es") && (
-        <Suspense fallback>
+        <Suspense fallback={null}>
           <BannerRedirect />
         </Suspense>
       )}
+
       <main>{children}</main>
+
       {options.hasFooter && <Footer />}
-      {/*© {new Date().getFullYear()}, Built with*/}
     </ThemeProvider>
   )
 }
diff --git a/src/components/videoBackground/VideoBackground.js b/src/components/videoBackground/VideoBackground.js
index e8da60b..8f2a14f 100644
--- a/src/components/videoBackground/VideoBackground.js
+++ b/src/components/videoBackground/VideoBackground.js
@@ -4,6 +4,7 @@ import CustomLink from "../CustomLink/CustomLink"
 import PropTypes from "prop-types"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 
+// ✅ CAMBIO: detectar versión de iOS
 function getIOSVersion() {
   if (typeof window === "undefined" || typeof navigator === "undefined") return null
   const userAgent = navigator.userAgent
@@ -35,7 +36,9 @@ function getVideoContent(
   image,
   posterData
 ) {
-  const posterUrl = posterData?.url
+  const posterUrl = posterData?.url?.startsWith("http")
+  ? getImage(posterData.url)
+  : getImage(`https://strapi-s3-bitlogic.s3.sa-east-1.amazonaws.com${posterData?.url}`)
   const posterSharp = posterData?.localFile && getImage(posterData.localFile)
 
   const url = videoUrl?.replace("watch?v=", "embed/")
@@ -43,43 +46,73 @@ function getVideoContent(
   const codeIndex = code.indexOf("?")
   if (codeIndex !== -1) code = code.substring(0, codeIndex)
 
-  if (!isIOSPriorTo("17.4")) {
-    if (video?.url) {
-      return (
-        <video
-          ref={videoRef}
-          muted
-          loop
-          playsInline
-          tabIndex={0}
-          controls={false}
-          autoPlay={isIntersecting}
-          poster={posterUrl}
-          preload="auto"
-          onClick={pausePlay}
-          onKeyDown={handleKeyDown}
-        >
-          {isIntersecting && <source src={video.url} type={video.mime} />}
-        </video>
-      )
-    }
-    if (videoUrl) {
-      return (
-        <iframe
-          className="video"
-          loading="lazy"
-          type="text/html"
-          srcDoc={`<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;height:100%;object-fit:cover;top:0;bottom:0}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;margin:auto;text-shadow:0 0 0.5em black}</style><a href=${url}?rel=0><img src=https://img.youtube.com/vi/${code}/hqdefault.jpg alt='Video'><span>▶</span></a>`}
-          src={`${url}?rel=0`}
-          frameBorder="0"
-          allowFullScreen
-          title="benefits_video"
-          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-          webkitallowfullscreen
-          mozallowfullscreen
-        />
-      )
-    }
+  const isOldIOS = isIOSPriorTo("17.4") 
+  if (isOldIOS && posterSharp) {
+    return (
+      <GatsbyImage
+        className="video-poster"
+        image={posterSharp}
+        alt={posterData.alternativeText || "Video poster"}
+        loading="eager"
+        style={{ width: "100%", maxWidth: "100vw", height: "auto" }}
+      />
+    )
+  }
+
+  if (video?.url) {
+    return (
+      <video
+        ref={videoRef}
+        muted
+        loop
+        playsInline
+        tabIndex={0}
+        controls={false}
+        autoPlay={isIntersecting}
+        poster={posterUrl}
+        preload="auto"
+        onClick={pausePlay}
+        onKeyDown={handleKeyDown}
+        style={{
+          width: "100%",
+          maxWidth: "100vw",
+          height: "auto",
+          objectFit: "cover",
+          aspectRatio: "16/9",
+          display: "block",
+          borderRadius: "5px",
+        }}
+      >
+        {isIntersecting && <source src={video.url} type={video.mime} />}
+      </video>
+    )
+  }
+
+  if (videoUrl) {
+    return (
+      <iframe
+        className="video"
+        loading="lazy"
+        type="text/html"
+        srcDoc={`<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;height:100%;object-fit:cover;top:0;bottom:0}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;margin:auto;text-shadow:0 0 0.5em black}</style><a href=${url}?rel=0><img src=https://img.youtube.com/vi/${code}/hqdefault.jpg alt='Video'><span>▶</span></a>`}
+        src={`${url}?rel=0`}
+        frameBorder="0"
+        allowFullScreen
+        title="benefits_video"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        webkitallowfullscreen
+        mozallowfullscreen
+        style={{
+          width: "100%",
+          maxWidth: "100vw",
+          height: "auto",
+          objectFit: "cover",
+          aspectRatio: "16/9",
+          display: "block",
+          borderRadius: "5px",
+        }}
+      />
+    )
   }
 
   if (posterSharp) {
@@ -88,11 +121,13 @@ function getVideoContent(
         className="video-poster"
         image={posterSharp}
         alt={posterData.alternativeText || "Video poster"}
+        loading="eager"
+        style={{ width: "100%", maxWidth: "100vw", height: "auto" }}
       />
     )
   }
 
-  return <div><br /></div>
+  return null
 }
 
 const VideoBackground = ({ data }) => {
@@ -111,8 +146,8 @@ const VideoBackground = ({ data }) => {
   const videoRef = useRef(null)
 
   const pausePlay = () => {
-    if (isVideoPause) videoRef.current.play()
-    else videoRef.current.pause()
+    if (isVideoPause) videoRef.current?.play()
+    else videoRef.current?.pause()
     setIsVideoPause(prev => !prev)
   }
 
@@ -125,6 +160,7 @@ const VideoBackground = ({ data }) => {
 
   useEffect(() => {
     const elem = videoRef.current
+    if (!elem) return
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
@@ -134,17 +170,8 @@ const VideoBackground = ({ data }) => {
       },
       { rootMargin: "0px 0px 200px 0px", threshold: 0.1 }
     )
-    if (elem) observer.observe(elem)
-    return () => elem && observer.unobserve(elem)
-  }, [])
-
-  useEffect(() => {
-    const stored =
-      typeof window !== "undefined" && localStorage.getItem("videoPaused")
-    if (stored === "true") {
-      videoRef.current.pause()
-      setIsVideoPause(true)
-    }
+    observer.observe(elem)
+    return () => observer.disconnect()
   }, [])
 
   useEffect(() => {
@@ -195,7 +222,10 @@ const VideoBackground = ({ data }) => {
 
 VideoBackground.propTypes = {
   data: PropTypes.shape({
-    video: PropTypes.shape({ url: PropTypes.string.isRequired, mime: PropTypes.string.isRequired }),
+    video: PropTypes.shape({
+      url: PropTypes.string.isRequired,
+      mime: PropTypes.string.isRequired,
+    }),
     videoUrl: PropTypes.string,
     description: PropTypes.string,
     backgroundImage: PropTypes.shape({ url: PropTypes.string.isRequired }),
@@ -206,12 +236,16 @@ VideoBackground.propTypes = {
     poster: PropTypes.shape({
       url: PropTypes.string.isRequired,
       alternativeText: PropTypes.string,
-      localFile: PropTypes.shape({ childImageSharp: PropTypes.object.isRequired }),
+      localFile: PropTypes.shape({
+        childImageSharp: PropTypes.object.isRequired,
+      }),
     }),
     button: PropTypes.shape({
       content: PropTypes.string.isRequired,
       url: PropTypes.string,
-      landing_page: PropTypes.shape({ slug: PropTypes.string.isRequired }),
+      landing_page: PropTypes.shape({
+        slug: PropTypes.string.isRequired,
+      }),
     }),
   }),
 }
diff --git a/src/components/videoBackground/videoBackground.scss b/src/components/videoBackground/videoBackground.scss
index f7932e1..4af9dca 100644
--- a/src/components/videoBackground/videoBackground.scss
+++ b/src/components/videoBackground/videoBackground.scss
@@ -2,10 +2,10 @@
 
 .videoBackground {
   max-width: 100%;
-  height: fit-content;
 
   &-container {
-    padding-block: 32px;
+    padding-top: 50px;
+    padding-bottom: 50px;
   }
 
   video,
@@ -23,10 +23,9 @@
 
   &-card {
     width: 100%;
-    min-height: 120px;
     backdrop-filter: blur(14px);
+    color: white;
     border-radius: 5px;
-    color: $grey;
     background: #e8e8e8c5;
     box-shadow: 0px 0px 3px #00000044;
     word-wrap: break-all;
@@ -48,13 +47,16 @@
   h2 {
     font-size: 28px;
     width: 100%;
+    margin-bottom: 8px;
     color: $grey;
-    margin-bottom: 16px;
   }
 
   a {
     @include secondaryBtn;
     color: $grey;
+    display: block;
+    width: max-content;
+    padding: 8px 16px;
   }
 }
 
@@ -74,4 +76,4 @@
       padding: 32px;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/hooks/useHomePage.js b/src/hooks/useHomePage.js
index db3a69f..648b59a 100644
--- a/src/hooks/useHomePage.js
+++ b/src/hooks/useHomePage.js
@@ -152,6 +152,14 @@ const useHomePage = () => {
                 slug
               }
             }
+            arrayButtons {
+              content
+              
+              english_landing_page {
+                id
+                slug
+              }
+            }  
             backgroundImageDark {
               url
             }
diff --git a/src/pages/blog.js b/src/pages/blog.js
index 5916ea4..8dddc72 100644
--- a/src/pages/blog.js
+++ b/src/pages/blog.js
@@ -1,8 +1,11 @@
 import React from "react"
 import BlogPage from "../components/BlogPage/BlogContainer"
+import PropTypes from "prop-types"
 
-const Blog = () => {
-  return <BlogPage />
+const Blog = ( {location}) => <BlogPage location={location} />
+
+Blog.propTypes = {
+    location: PropTypes.object.isRequired
 }
 
 export default Blog
diff --git a/src/schema/generalSchema.js b/src/schema/generalSchema.js
index 1aa7c23..8a68b42 100644
--- a/src/schema/generalSchema.js
+++ b/src/schema/generalSchema.js
@@ -96,7 +96,7 @@ const generalSchema = `
 
   type ComponentButton {
     id: Int
-    content: String!
+    content: String
     url: String
     english_landing_page: StrapiEnglishLandingPage
   }
@@ -196,6 +196,7 @@ const generalSchema = `
     summary: String
     image: LocalFile 
     button: ComponentButton
+    arrayButtons: [ComponentButton]
     imageDark: LocalFile 
     animation: JSON
     navTitle: String
diff --git a/src/templates/LandingPage.js b/src/templates/LandingPage.js
index ecc1e9b..944cbc5 100644
--- a/src/templates/LandingPage.js
+++ b/src/templates/LandingPage.js
@@ -20,7 +20,7 @@ const LandingPage = ({ data, location }) => {
 
   return (
     <Layout location={location} options={{ hasHeader: true }}>
-      <Seo title={pageTitle} description={pageDescription} keywords={pageKeywords} />
+      <Seo title={pageTitle} description={pageDescription} keywords={pageKeywords} location={location} />
       {body?.length > 0 && navigation ? (
         <>
           <CustomSection sections={body.slice(0, 1)} />
@@ -234,6 +234,14 @@ export const query = graphql`
               slug
             }
           }
+            arrayButtons {
+              content
+        
+              english_landing_page {
+                id
+                slug
+              }
+            }
           backgroundImageDark {
             url
           }