oraculo-ui 0.1.1 → 0.1.3

package/dist/index.js

@@ -32,16 +32,21 @@ var index_exports = {};
 __export(index_exports, {
   OraculoButton: () => OraculoButton,
   OraculoCarousel: () => OraculoCarousel_default,
+  OraculoCarouselDots: () => OraculoCarouselDots_default,
+  OraculoClubOlimpoVisual: () => OraculoClubOlimpoVisual_default,
   OraculoGameCard: () => OraculoGameCard_default,
   OraculoGameRankCard: () => OraculoGameRankCard,
   OraculoGameSlide: () => OraculoGameSlide_default,
   OraculoLiveCasinoCard: () => OraculoLiveCasinoCard_default,
+  OraculoSeccionBonoBienvenida: () => OraculoSeccionBonoBienvenida_default,
   OraculoSeccionCasino: () => OraculoSeccionCasino_default,
   OraculoSeccionCasinoEnVivo: () => OraculoSeccionCasinoEnVivo_default,
+  OraculoSeccionClubOlimpo: () => OraculoSeccionClubOlimpo_default,
   OraculoSeccionDestacados: () => OraculoSeccionDestacados,
   OraculoSeccionTopJuegos: () => OraculoSeccionTopJuegos,
   OraculoSeccionVirtuales: () => OraculoSeccionVirtuales_default,
-  OraculoSectionTitle: () => OraculoSectionTitle
+  OraculoSectionTitle: () => OraculoSectionTitle,
+  OraculoWelcomeBanner: () => OraculoWelcomeBanner_default
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -142,10 +147,34 @@ function OraculoSectionTitle({
   ] });
 }
 
+// src/atoms/OraculoCarouselDots/OraculoCarouselDots.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var OraculoCarouselDots = ({
+  total,
+  active,
+  onSelect,
+  className = ""
+}) => {
+  if (total <= 1) return null;
+  const rootClass = ["orc-dots", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: rootClass, role: "tablist", children: Array.from({ length: total }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "orc-dots__cell", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": i === active,
+      "aria-label": `Ir al slide ${i + 1}`,
+      className: "orc-dots__dot" + (i === active ? " orc-dots__dot--active" : ""),
+      onClick: () => onSelect == null ? void 0 : onSelect(i)
+    }
+  ) }, i)) });
+};
+var OraculoCarouselDots_default = OraculoCarouselDots;
+
 // src/molecules/OraculoCarousel/OraculoCarousel.tsx
 var import_react = require("react");
 var import_react_splide = require("@splidejs/react-splide");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Splide = import_react_splide.Splide;
 var SplideSlide = import_react_splide.SplideSlide;
 var OraculoCarousel = (0, import_react.forwardRef)(
@@ -194,7 +223,7 @@ var OraculoCarousel = (0, import_react.forwardRef)(
       },
       [handleMove]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Splide,
       {
         ref: splideRef,
@@ -216,7 +245,7 @@ var OraculoCarousel = (0, import_react.forwardRef)(
         onMounted: handleMounted,
         children: items.map((item, index) => {
           var _a;
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SplideSlide, { children: renderItem(item, index) }, (_a = item.id) != null ? _a : index);
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SplideSlide, { children: renderItem(item, index) }, (_a = item.id) != null ? _a : index);
         })
       }
     ) });
@@ -226,7 +255,7 @@ var OraculoCarousel_default = OraculoCarousel;
 
 // src/molecules/OraculoGameRankCard/OraculoGameRankCard.tsx
 var import_Box = __toESM(require("@mui/material/Box"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function OraculoGameRankCard({
   imageUrl,
   orden = 1,
@@ -252,7 +281,7 @@ function OraculoGameRankCard({
     xs: Math.round(((_b = (_a = sizes.xs) == null ? void 0 : _a.font) != null ? _b : 64) * 0.28),
     md: Math.round(((_d = (_c = sizes.md) == null ? void 0 : _c.font) != null ? _d : 64) * 0.28)
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     import_Box.default,
     {
       onClick,
@@ -274,7 +303,7 @@ function OraculoGameRankCard({
         "&:hover": { transform: "translateY(-2px)", boxShadow: 8 }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           import_Box.default,
           {
             sx: {
@@ -284,7 +313,7 @@ function OraculoGameRankCard({
               overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "img",
                 {
                   src: imageUrl,
@@ -298,7 +327,7 @@ function OraculoGameRankCard({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 import_Box.default,
                 {
                   sx: {
@@ -312,7 +341,7 @@ function OraculoGameRankCard({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_Box.default,
           {
             component: "span",
@@ -345,7 +374,7 @@ function OraculoGameRankCard({
 // src/molecules/OraculoLiveCasinoCard/OraculoLiveCasinoCard.tsx
 var import_Box2 = __toESM(require("@mui/material/Box"));
 var import_Typography = __toESM(require("@mui/material/Typography"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var OraculoLiveCasinoCard = ({
   logo,
   provider,
@@ -354,7 +383,7 @@ var OraculoLiveCasinoCard = ({
   onClick
 }) => {
   var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     import_Box2.default,
     {
       onClick,
@@ -378,7 +407,7 @@ var OraculoLiveCasinoCard = ({
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           import_Box2.default,
           {
             component: "img",
@@ -394,7 +423,7 @@ var OraculoLiveCasinoCard = ({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           import_Box2.default,
           {
             className: "orc-live-provider-label",
@@ -408,7 +437,7 @@ var OraculoLiveCasinoCard = ({
               transition: "opacity .25s ease",
               pointerEvents: "none"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               import_Typography.default,
               {
                 sx: {
@@ -430,14 +459,14 @@ var OraculoLiveCasinoCard_default = OraculoLiveCasinoCard;
 
 // src/molecules/OraculoGameCard/OraculoGameCard.tsx
 var import_Box3 = __toESM(require("@mui/material/Box"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var OraculoGameCard = ({
   imageUrl,
   onClick,
   size = "sm"
 }) => {
   const dim = size === "lg" ? { w: 280, h: 352 } : { w: 152, h: 168 };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_Box3.default,
     {
       onClick,
@@ -457,7 +486,7 @@ var OraculoGameCard = ({
         },
         opacity: 1
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "img",
         {
           src: imageUrl,
@@ -479,7 +508,7 @@ var OraculoGameCard_default = OraculoGameCard;
 
 // src/molecules/OraculoGameSlide/OraculoGameSlide.tsx
 var import_Box4 = __toESM(require("@mui/material/Box"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var GAP = 12;
 var OraculoGameSlide = ({
   items,
@@ -489,7 +518,7 @@ var OraculoGameSlide = ({
   if (layout === "mosaic") {
     const big = items[0];
     const smalls = items.slice(1, 5);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       import_Box4.default,
       {
         sx: {
@@ -513,7 +542,7 @@ var OraculoGameSlide = ({
           justifyItems: "stretch"
         },
         children: [
-          big && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          big && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             import_Box4.default,
             {
               sx: {
@@ -524,17 +553,17 @@ var OraculoGameSlide = ({
                 borderRadius: 2,
                 "& > *": { width: "100%", height: "100%" }
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 OraculoGameCard_default,
                 {
                   imageUrl: big.imageUrl,
                   size: "lg",
-                  onClick: () => onClick == null ? void 0 : onClick(big)
+                  onClick: () => onClick == null ? void 0 : onClick(big, 0)
                 }
               )
             }
           ),
-          smalls.map((it) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          smalls.map((it, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             import_Box4.default,
             {
               sx: {
@@ -544,12 +573,12 @@ var OraculoGameSlide = ({
                 borderRadius: 2,
                 "& > *": { width: "100%", height: "100%" }
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 OraculoGameCard_default,
                 {
                   imageUrl: it.imageUrl,
                   size: "sm",
-                  onClick: () => onClick == null ? void 0 : onClick(it)
+                  onClick: () => onClick == null ? void 0 : onClick(it, index)
                 }
               )
             },
@@ -559,7 +588,7 @@ var OraculoGameSlide = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_Box4.default,
     {
       sx: {
@@ -579,12 +608,12 @@ var OraculoGameSlide = ({
           "& > *": { width: "100%", height: "100%" }
         }
       },
-      children: items.map((it) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Box4.default, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      children: items.map((it, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Box4.default, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         OraculoGameCard_default,
         {
           imageUrl: it.imageUrl,
           size: "sm",
-          onClick: () => onClick == null ? void 0 : onClick(it)
+          onClick: () => onClick == null ? void 0 : onClick(it, index)
         }
       ) }, it.id))
     }
@@ -592,6 +621,217 @@ var OraculoGameSlide = ({
 };
 var OraculoGameSlide_default = OraculoGameSlide;
 
+// src/molecules/OraculoWelcomeBanner/OraculoWelcomeBanner.tsx
+var import_Box5 = __toESM(require("@mui/material/Box"));
+var import_Typography2 = __toESM(require("@mui/material/Typography"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var OraculoWelcomeBanner = ({
+  title,
+  amount,
+  subtitle,
+  buttonText,
+  onButtonClick,
+  backgroundImage,
+  alt,
+  className = "",
+  variant = "small"
+}) => {
+  const symbol = amount ? amount.slice(0, 2) : "";
+  const value = amount ? amount.slice(2) : "";
+  const isLarge = variant === "large";
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    import_Box5.default,
+    {
+      className,
+      sx: {
+        position: "relative",
+        width: "100%",
+        maxWidth: {
+          xs: 328,
+          lg: isLarge ? 618 : 456
+        },
+        mx: "auto"
+      },
+      children: [
+        backgroundImage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_Box5.default,
+          {
+            sx: {
+              position: "relative",
+              width: "100%",
+              aspectRatio: {
+                xs: "328 / 188",
+                lg: isLarge ? "618 / 346" : "456 / 272"
+              },
+              borderRadius: "14px",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              import_Box5.default,
+              {
+                component: "img",
+                src: backgroundImage,
+                alt: alt != null ? alt : "Fondo promocional",
+                sx: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover",
+                  objectPosition: {
+                    xs: "50% 0%",
+                    lg: "45% 0%"
+                  },
+                  display: "block"
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_Box5.default,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              color: "#e7f8ff",
+              textAlign: "center",
+              pl: "14%",
+              pr: { xs: "14%", lg: "15%" }
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              import_Box5.default,
+              {
+                sx: {
+                  maxWidth: "60%",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center"
+                },
+                children: [
+                  title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    import_Typography2.default,
+                    {
+                      sx: {
+                        fontSize: { xs: 12, lg: 20 },
+                        fontWeight: 400,
+                        color: "#e7f8ff"
+                      },
+                      children: title
+                    }
+                  ),
+                  amount && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                    import_Box5.default,
+                    {
+                      component: "p",
+                      sx: {
+                        fontFamily: '"secondary", sans-serif',
+                        lineHeight: { xs: 0.9, lg: 0.87 },
+                        m: "4px 0",
+                        background: "linear-gradient(175deg, #EDC421 -12.56%, #FFFABF 17.99%, #EDC421 49.74%)",
+                        WebkitBackgroundClip: "text",
+                        WebkitTextFillColor: "transparent",
+                        WebkitTextStroke: "0.5px #fff8c1",
+                        filter: "drop-shadow(0px 4px 0px #8D4406) drop-shadow(0px 4px 4px rgba(28, 28, 28, 0.4))",
+                        display: "flex",
+                        alignItems: "baseline",
+                        justifyContent: "center"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          import_Box5.default,
+                          {
+                            component: "span",
+                            sx: { fontSize: { xs: 35, lg: 48 }, mr: 0.5 },
+                            children: symbol
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          import_Box5.default,
+                          {
+                            component: "span",
+                            sx: { fontSize: { xs: 52, lg: 77 } },
+                            children: value
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  subtitle && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    import_Typography2.default,
+                    {
+                      sx: {
+                        pb: "20px",
+                        fontSize: 14,
+                        fontWeight: 600,
+                        color: "#e7f8ff"
+                      },
+                      children: subtitle
+                    }
+                  ),
+                  buttonText && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(OraculoButton, { onClick: onButtonClick, children: buttonText })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var OraculoWelcomeBanner_default = OraculoWelcomeBanner;
+
+// src/molecules/OraculoClubOlimpoVisual/OraculoClubOlimpoVisual.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var OraculoClubOlimpoVisual = ({
+  text,
+  buttonLabel = "Conoce m\xE1s",
+  onClick,
+  imgAlt = "Club Olimpo",
+  imgSrcMobile,
+  imgSrcDesktopBg,
+  imgSrcDesktopLogo
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "orc-co-bgMobile", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "img",
+      {
+        src: imgSrcMobile,
+        alt: imgAlt,
+        className: "orc-co-bgMobileImg"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "orc-co-bgDesktop", children: [
+      imgSrcDesktopBg && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "orc-co-fillHost", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "img",
+        {
+          src: imgSrcDesktopBg,
+          alt: `${imgAlt} fondo`,
+          className: "orc-co-bgDesktopImg"
+        }
+      ) }),
+      imgSrcDesktopLogo && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "orc-co-logo", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "img",
+        {
+          src: imgSrcDesktopLogo,
+          alt: `${imgAlt} logo`,
+          className: "orc-co-logoImg"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "orc-co-desktopContent", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "orc-co-captionDesktop", children: text }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(OraculoButton, { onClick, variant: "primary", size: "md", children: buttonLabel })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "orc-co-bottom", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "orc-co-caption", children: text }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(OraculoButton, { onClick, variant: "primary", size: "md", children: buttonLabel })
+    ] })
+  ] });
+};
+var OraculoClubOlimpoVisual_default = OraculoClubOlimpoVisual;
+
 // src/organisms/OraculoSeccionDestacados/OraculoSeccionDestacados.tsx
 var import_react2 = require("react");
 
@@ -599,19 +839,19 @@ var import_react2 = require("react");
 var import_utils = require("@mui/material/utils");
 
 // ../node_modules/@mui/icons-material/esm/ChevronLeftRounded.js
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ChevronLeftRounded_default = (0, import_utils.createSvgIcon)(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", {
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ChevronLeftRounded_default = (0, import_utils.createSvgIcon)(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", {
   d: "M14.71 6.71a.996.996 0 0 0-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0s.39-1.02 0-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41"
 }), "ChevronLeftRounded");
 
 // ../node_modules/@mui/icons-material/esm/ChevronRightRounded.js
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var ChevronRightRounded_default = (0, import_utils.createSvgIcon)(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", {
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ChevronRightRounded_default = (0, import_utils.createSvgIcon)(/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", {
   d: "M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41s1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01"
 }), "ChevronRightRounded");
 
 // src/organisms/OraculoSeccionDestacados/OraculoSeccionDestacados.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function OraculoSeccionDestacados({
   items,
   title = "Destacados",
@@ -633,8 +873,8 @@ function OraculoSeccionDestacados({
     onViewMore == null ? void 0 : onViewMore();
   };
   const sectionClassName = className || void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { className: sectionClassName, style: { width: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", { className: sectionClassName, style: { width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "header",
       {
         style: {
@@ -646,7 +886,7 @@ function OraculoSeccionDestacados({
           marginBottom: 16
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             OraculoSectionTitle,
             {
               title,
@@ -654,7 +894,7 @@ function OraculoSeccionDestacados({
               size: "md"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
             "div",
             {
               style: {
@@ -662,24 +902,24 @@ function OraculoSeccionDestacados({
                 gap: 8
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   OraculoButton,
                   {
                     ariaLabel: "Anterior",
                     variant: "secondary",
                     iconOnly: true,
-                    leftIcon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronLeftRounded_default, {}),
+                    leftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronLeftRounded_default, {}),
                     onClick: handlePrev,
                     disabled: navState.isStart
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   OraculoButton,
                   {
                     ariaLabel: "Siguiente",
                     variant: "secondary",
                     iconOnly: true,
-                    rightIcon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronRightRounded_default, {}),
+                    rightIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronRightRounded_default, {}),
                     onClick: handleNext,
                     disabled: navState.isEnd
                   }
@@ -687,11 +927,11 @@ function OraculoSeccionDestacados({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       OraculoCarousel_default,
       {
         ref: carouselRef,
@@ -705,14 +945,14 @@ function OraculoSeccionDestacados({
         },
         renderItem: (item) => {
           var _a;
-          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "div",
             {
               style: {
                 textAlign: "center",
                 marginTop: 16
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "img",
                 {
                   src: item.src,
@@ -737,8 +977,8 @@ function OraculoSeccionDestacados({
 
 // src/organisms/OraculoSeccionTopJuegos/OraculoSeccionTopJuegos.tsx
 var import_Stack = __toESM(require("@mui/material/Stack"));
-var import_Box5 = __toESM(require("@mui/material/Box"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_Box6 = __toESM(require("@mui/material/Box"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function OraculoSeccionTopJuegos({
   items,
   title = "Top Juegos",
@@ -746,10 +986,10 @@ function OraculoSeccionTopJuegos({
   onCardClick,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("section", { className, style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Stack.default, { direction: "column", spacing: 2, useFlexGap: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(OraculoSectionTitle, { title, iconUrl, size: "md" }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_Box5.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("section", { className, style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_Stack.default, { direction: "column", spacing: 2, useFlexGap: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(OraculoSectionTitle, { title, iconUrl, size: "md" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_Box6.default,
       {
         sx: {
           display: "grid",
@@ -761,11 +1001,11 @@ function OraculoSeccionTopJuegos({
           justifyItems: "center",
           width: "100%"
         },
-        children: items.slice(0, 6).map((juego, idx) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        children: items.slice(0, 6).map((juego, idx) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           OraculoGameRankCard,
           {
             imageUrl: juego.logo || "",
-            orden: juego.orden,
+            orden: juego.orden || idx + 1,
             onClick: () => console.log(juego.machine)
           },
           juego.machine
@@ -776,10 +1016,10 @@ function OraculoSeccionTopJuegos({
 }
 
 // src/organisms/OraculoSeccionCasinoEnVivo/OraculoSeccionCasinoEnVivo.tsx
-var import_Box6 = __toESM(require("@mui/material/Box"));
+var import_Box7 = __toESM(require("@mui/material/Box"));
 var import_Stack2 = __toESM(require("@mui/material/Stack"));
-var import_Typography2 = __toESM(require("@mui/material/Typography"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_Typography3 = __toESM(require("@mui/material/Typography"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var OraculoSeccionCasinoEnVivo = ({
   items,
   title = "Casino en vivo",
@@ -790,8 +1030,8 @@ var OraculoSeccionCasinoEnVivo = ({
   onViewMore,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    import_Box6.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    import_Box7.default,
     {
       className,
       sx: {
@@ -804,8 +1044,8 @@ var OraculoSeccionCasinoEnVivo = ({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_Box6.default,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_Box7.default,
           {
             sx: {
               position: "absolute",
@@ -829,8 +1069,8 @@ var OraculoSeccionCasinoEnVivo = ({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-          import_Box6.default,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          import_Box7.default,
           {
             sx: {
               position: "relative",
@@ -847,9 +1087,9 @@ var OraculoSeccionCasinoEnVivo = ({
               textAlign: { xs: "center", md: "left" }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_Stack2.default, { spacing: 3, sx: { maxWidth: { md: 280 } }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  import_Typography2.default,
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_Stack2.default, { spacing: 3, sx: { maxWidth: { md: 280 } }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  import_Typography3.default,
                   {
                     variant: "h4",
                     sx: {
@@ -861,8 +1101,8 @@ var OraculoSeccionCasinoEnVivo = ({
                     children: title
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  import_Typography2.default,
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  import_Typography3.default,
                   {
                     sx: {
                       fontSize: { xs: 14, md: 18 },
@@ -873,7 +1113,7 @@ var OraculoSeccionCasinoEnVivo = ({
                     children: subtitle
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Box6.default, { sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Box7.default, { sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   OraculoButton,
                   {
                     variant: "primary",
@@ -883,8 +1123,8 @@ var OraculoSeccionCasinoEnVivo = ({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                import_Box6.default,
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_Box7.default,
                 {
                   sx: {
                     display: "flex",
@@ -896,7 +1136,7 @@ var OraculoSeccionCasinoEnVivo = ({
                   },
                   children: items.map((juego, idx) => {
                     var _a, _b;
-                    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                       OraculoLiveCasinoCard_default,
                       {
                         logo: (_b = juego.logo) != null ? _b : "",
@@ -905,12 +1145,12 @@ var OraculoSeccionCasinoEnVivo = ({
                         machine: juego.machine,
                         onClick: () => onCardClick == null ? void 0 : onCardClick(juego, idx)
                       },
-                      (_a = juego.machine) != null ? _a : idx
+                      (_a = juego.orden) != null ? _a : idx
                     );
                   })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Box6.default, { sx: { display: { xs: "block", md: "none" } }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Box7.default, { sx: { display: { xs: "block", md: "none" } }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 OraculoButton,
                 {
                   variant: "primary",
@@ -931,14 +1171,14 @@ var OraculoSeccionCasinoEnVivo_default = OraculoSeccionCasinoEnVivo;
 // src/organisms/OraculoSeccionCasino/OraculoSeccionCasino.tsx
 var import_react3 = require("react");
 var import_Stack3 = __toESM(require("@mui/material/Stack"));
-var import_Box7 = __toESM(require("@mui/material/Box"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_Box8 = __toESM(require("@mui/material/Box"));
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var buildCasinoSlides = (games, mosaicFirst = true, gridSize = 4) => {
   const baseItems = games.map((g, idx) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     return {
-      id: (_b = (_a = g.id) != null ? _a : g.machine) != null ? _b : idx,
-      imageUrl: (_d = (_c = g.imageUrl) != null ? _c : g.logo) != null ? _d : ""
+      id: (_b = (_a = g.orden) != null ? _a : g.machine) != null ? _b : idx,
+      imageUrl: (_c = g.logo) != null ? _c : ""
     };
   });
   if (!baseItems.length) return [];
@@ -988,9 +1228,9 @@ var OraculoSeccionCasino = ({
   const handleViewMore = () => {
     onViewMore == null ? void 0 : onViewMore();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("section", { className, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_Stack3.default, { direction: "column", spacing: 2, useFlexGap: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-      import_Box7.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("section", { className, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Stack3.default, { direction: "column", spacing: 2, useFlexGap: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      import_Box8.default,
       {
         sx: {
           display: "grid",
@@ -1000,7 +1240,7 @@ var OraculoSeccionCasino = ({
           rowGap: 1
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             OraculoSectionTitle,
             {
               title,
@@ -1008,8 +1248,8 @@ var OraculoSeccionCasino = ({
               size: "md"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-            import_Box7.default,
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+            import_Box8.default,
             {
               sx: {
                 display: "flex",
@@ -1017,24 +1257,24 @@ var OraculoSeccionCasino = ({
                 justifyContent: "flex-end"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   OraculoButton,
                   {
                     ariaLabel: "Anterior",
                     variant: "secondary",
                     iconOnly: true,
-                    leftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronLeftRounded_default, {}),
+                    leftIcon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronLeftRounded_default, {}),
                     onClick: handlePrev,
                     disabled: navState.isStart
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   OraculoButton,
                   {
                     ariaLabel: "Siguiente",
                     variant: "secondary",
                     iconOnly: true,
-                    rightIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronRightRounded_default, {}),
+                    rightIcon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronRightRounded_default, {}),
                     onClick: handleNext,
                     disabled: navState.isEnd
                   }
@@ -1042,11 +1282,11 @@ var OraculoSeccionCasino = ({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Box7.default, { sx: { justifySelf: "end" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Box8.default, { sx: { justifySelf: "end" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" }) })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       OraculoCarousel_default,
       {
         ref: carouselRef,
@@ -1062,7 +1302,7 @@ var OraculoSeccionCasino = ({
           drag: true,
           focus: "start"
         },
-        renderItem: (slide) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { alignSelf: "start" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        renderItem: (slide) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { alignSelf: "start" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           OraculoGameSlide_default,
           {
             items: slide.items,
@@ -1070,8 +1310,8 @@ var OraculoSeccionCasino = ({
             onClick: (itm) => {
               const game = items.find(
                 (g, idx) => {
-                  var _a, _b;
-                  return ((_b = (_a = g.id) != null ? _a : g.machine) != null ? _b : idx) === itm.id;
+                  var _a;
+                  return ((_a = g.orden) != null ? _a : idx) === itm.id;
                 }
               );
               if (game) onItemClick == null ? void 0 : onItemClick(game);
@@ -1088,14 +1328,14 @@ var OraculoSeccionCasino_default = OraculoSeccionCasino;
 // src/organisms/OraculoSeccionVirtuales/OraculoSeccionVirtuales.tsx
 var import_react4 = require("react");
 var import_Stack4 = __toESM(require("@mui/material/Stack"));
-var import_Box8 = __toESM(require("@mui/material/Box"));
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_Box9 = __toESM(require("@mui/material/Box"));
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var buildVirtualSlides = (games, mosaicFirst = true, gridSize = 4) => {
   const baseItems = games.map((g, idx) => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     return {
-      id: (_b = (_a = g.id) != null ? _a : g.machine) != null ? _b : idx,
-      imageUrl: (_d = (_c = g.imageUrl) != null ? _c : g.logo) != null ? _d : ""
+      id: (_a = g.orden) != null ? _a : idx,
+      imageUrl: (_b = g.logo) != null ? _b : ""
     };
   });
   if (!baseItems.length) return [];
@@ -1145,9 +1385,9 @@ var OraculoSeccionVirtuales = ({
   const handleViewMore = () => {
     onViewMore == null ? void 0 : onViewMore();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("section", { className, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_Stack4.default, { direction: "column", spacing: 2, useFlexGap: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-      import_Box8.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { className, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Stack4.default, { direction: "column", spacing: 2, useFlexGap: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      import_Box9.default,
       {
         sx: {
           display: "grid",
@@ -1157,7 +1397,7 @@ var OraculoSeccionVirtuales = ({
           rowGap: 1
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             OraculoSectionTitle,
             {
               title,
@@ -1165,8 +1405,8 @@ var OraculoSeccionVirtuales = ({
               size: "md"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-            import_Box8.default,
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+            import_Box9.default,
             {
               sx: {
                 display: "flex",
@@ -1174,24 +1414,24 @@ var OraculoSeccionVirtuales = ({
                 justifyContent: "flex-end"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   OraculoButton,
                   {
                     ariaLabel: "Anterior",
                     variant: "secondary",
                     iconOnly: true,
-                    leftIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronLeftRounded_default, {}),
+                    leftIcon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronLeftRounded_default, {}),
                     onClick: handlePrev,
                     disabled: navState.isStart
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   OraculoButton,
                   {
                     ariaLabel: "Siguiente",
                     variant: "secondary",
                     iconOnly: true,
-                    rightIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronRightRounded_default, {}),
+                    rightIcon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronRightRounded_default, {}),
                     onClick: handleNext,
                     disabled: navState.isEnd
                   }
@@ -1199,11 +1439,11 @@ var OraculoSeccionVirtuales = ({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Box8.default, { sx: { justifySelf: "end" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Box9.default, { sx: { justifySelf: "end" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" }) })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       OraculoCarousel_default,
       {
         ref: carouselRef,
@@ -1220,7 +1460,7 @@ var OraculoSeccionVirtuales = ({
           focus: "start",
           perMove: 1
         },
-        renderItem: (slide) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { alignSelf: "start" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        renderItem: (slide) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { alignSelf: "start" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           OraculoGameSlide_default,
           {
             items: slide.items,
@@ -1228,8 +1468,8 @@ var OraculoSeccionVirtuales = ({
             onClick: (itm) => {
               const game = items.find(
                 (g, idx) => {
-                  var _a, _b;
-                  return ((_b = (_a = g.id) != null ? _a : g.machine) != null ? _b : idx) === itm.id;
+                  var _a;
+                  return ((_a = g.orden) != null ? _a : idx) === itm.id;
                 }
               );
               if (game) onItemClick == null ? void 0 : onItemClick(game);
@@ -1242,18 +1482,272 @@ var OraculoSeccionVirtuales = ({
   ] }) });
 };
 var OraculoSeccionVirtuales_default = OraculoSeccionVirtuales;
+
+// src/organisms/OraculoSeccionBonoBienvenida/OraculoSeccionBonoBienvenida.tsx
+var import_react5 = require("react");
+var import_Box10 = __toESM(require("@mui/material/Box"));
+var import_Typography4 = __toESM(require("@mui/material/Typography"));
+var import_useMediaQuery = __toESM(require("@mui/material/useMediaQuery"));
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var buildSectionSx = (bgUrl) => ({
+  width: "100vw",
+  position: "relative",
+  left: "50%",
+  right: "50%",
+  marginLeft: "-50vw",
+  marginRight: "-50vw",
+  py: 8,
+  color: "#fff",
+  backgroundImage: `
+    linear-gradient(to bottom,#121212 0%, rgba(18,18,18,0) 10%),
+    linear-gradient(to top,   #121212 0%, rgba(18,18,18,0) 10%),
+    linear-gradient(to left,  #121212 0%, rgba(18,18,18,0) 10%),
+    linear-gradient(to right, #121212 0%, rgba(18,18,18,0) 10%),
+    url("${bgUrl}")
+  `,
+  backgroundRepeat: "no-repeat",
+  backgroundPosition: "center",
+  backgroundSize: "cover"
+});
+var headlineBaseSx = {
+  textAlign: "center",
+  lineHeight: 1.1,
+  mb: 1.5
+};
+var hlTopSx = {
+  display: "inline-block",
+  fontWeight: 600,
+  fontSize: 24
+};
+var hlBottomSx = {
+  display: "inline-block",
+  fontSize: 24,
+  lineHeight: 1.1,
+  WebkitTextStroke: "0.3px rgba(255, 255, 255, .5)",
+  textShadow: `
+    0 0 2px rgba(255, 255, 255, .95),
+    0 0 6px rgba(255, 255, 255, .6),
+    0 1px 0 rgba(137, 137, 137, .85)
+  `
+};
+var OraculoSeccionBonoBienvenida = ({
+  headline,
+  items,
+  backgroundImageUrl
+}) => {
+  const [hl1 = "", hl2 = ""] = (headline || "").split("\n");
+  const isMobile = (0, import_useMediaQuery.default)("(max-width: 767px)");
+  const showDots = items.length > 1;
+  const bgUrl = backgroundImageUrl != null ? backgroundImageUrl : "/assets/img/home/BonoBienvenida/Fondobg.png";
+  const sectionSx = buildSectionSx(bgUrl);
+  const carouselRef = (0, import_react5.useRef)(null);
+  const [navState, setNavState] = (0, import_react5.useState)({ isStart: true, isEnd: false });
+  const [activeIndex, setActiveIndex] = (0, import_react5.useState)(0);
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      import_Box10.default,
+      {
+        component: "section",
+        sx: {
+          ...sectionSx,
+          textAlign: "center"
+        },
+        children: [
+          (hl1 || hl2) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_Box10.default, { sx: headlineBaseSx, children: [
+            hl1 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Typography4.default, { component: "span", sx: hlTopSx, children: hl1 }),
+            hl2 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("br", {}),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Typography4.default, { component: "span", sx: hlBottomSx, children: hl2 })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_Box10.default, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              OraculoCarousel_default,
+              {
+                ref: carouselRef,
+                items,
+                perPage: 1,
+                gap: "12px",
+                breakpoints: {
+                  480: {
+                    perPage: 1,
+                    gap: "8px",
+                    padding: { left: "8px", right: "8px" }
+                  },
+                  768: {
+                    perPage: 1,
+                    gap: "12px",
+                    padding: { left: "8px", right: "8px" }
+                  }
+                },
+                options: {
+                  autoWidth: false
+                },
+                renderItem: (it) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OraculoWelcomeBanner_default, { ...it, onButtonClick: items[0].onButtonClick }),
+                onMove: ({ index, isStart, isEnd }) => {
+                  setNavState({ isStart, isEnd });
+                  setActiveIndex(index);
+                }
+              }
+            ),
+            showDots && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              OraculoCarouselDots_default,
+              {
+                total: items.length,
+                active: activeIndex,
+                onSelect: (i) => {
+                  var _a;
+                  setActiveIndex(i);
+                  (_a = carouselRef.current) == null ? void 0 : _a.go(i);
+                }
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Box10.default, { component: "section", sx: sectionSx, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    import_Box10.default,
+    {
+      sx: {
+        maxWidth: 1200,
+        mx: 5,
+        px: 2,
+        display: "grid",
+        gridTemplateColumns: "200px auto",
+        alignItems: "center"
+      },
+      children: [
+        (hl1 || hl2) && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          import_Box10.default,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              minHeight: "100%"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+              import_Box10.default,
+              {
+                sx: {
+                  ...headlineBaseSx,
+                  textAlign: "left",
+                  mb: 0
+                },
+                children: [
+                  hl1 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Typography4.default, { component: "span", sx: hlTopSx, children: hl1 }),
+                  hl2 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("br", {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Typography4.default, { component: "span", sx: hlBottomSx, children: hl2 })
+                  ] })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          import_Box10.default,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              flexWrap: "nowrap",
+              gap: 4
+            },
+            children: items.map((it, idx) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              OraculoWelcomeBanner_default,
+              {
+                onButtonClick: it.onButtonClick,
+                ...it
+              },
+              idx
+            ))
+          }
+        )
+      ]
+    }
+  ) });
+};
+var OraculoSeccionBonoBienvenida_default = OraculoSeccionBonoBienvenida;
+
+// src/organisms/OraculoSeccionClubOlimpo/OraculoSeccionClubOlimpo.tsx
+var import_react6 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var OraculoSeccionClubOlimpo = ({
+  className = "",
+  fullBleed = true,
+  items,
+  selectedIndex = 0,
+  ariaLabel
+}) => {
+  const rootRef = (0, import_react6.useRef)(null);
+  const bottomRef = (0, import_react6.useRef)(null);
+  if (!items || items.length === 0) return null;
+  const safeIndex = Math.min(Math.max(selectedIndex, 0), items.length - 1);
+  const item = items[safeIndex];
+  (0, import_react6.useLayoutEffect)(() => {
+    if (!rootRef.current || !bottomRef.current) return;
+    if (typeof ResizeObserver === "undefined") return;
+    const root = rootRef.current;
+    const bottom = bottomRef.current;
+    const update = () => {
+      root.style.setProperty(
+        "--orc-co-bottomH",
+        `${bottom.offsetHeight + 16}px`
+      );
+    };
+    const ro = new ResizeObserver(update);
+    ro.observe(bottom);
+    update();
+    return () => ro.disconnect();
+  }, []);
+  const rootClass = [
+    "orc-co-wrap",
+    fullBleed ? "orc-co-fullBleed" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "section",
+    {
+      ref: rootRef,
+      className: rootClass,
+      "aria-label": ariaLabel || item.imgAlt || "Club Olimpo",
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref: bottomRef, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        OraculoClubOlimpoVisual_default,
+        {
+          text: item.text,
+          onClick: item.onClick,
+          imgAlt: item.imgAlt,
+          imgSrcMobile: item.images.mobile,
+          imgSrcDesktopBg: item.images.desktopBg,
+          imgSrcDesktopLogo: item.images.desktopLogo,
+          priority: item.priority
+        }
+      ) })
+    }
+  );
+};
+var OraculoSeccionClubOlimpo_default = OraculoSeccionClubOlimpo;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   OraculoButton,
   OraculoCarousel,
+  OraculoCarouselDots,
+  OraculoClubOlimpoVisual,
   OraculoGameCard,
   OraculoGameRankCard,
   OraculoGameSlide,
   OraculoLiveCasinoCard,
+  OraculoSeccionBonoBienvenida,
   OraculoSeccionCasino,
   OraculoSeccionCasinoEnVivo,
+  OraculoSeccionClubOlimpo,
   OraculoSeccionDestacados,
   OraculoSeccionTopJuegos,
   OraculoSeccionVirtuales,
-  OraculoSectionTitle
+  OraculoSectionTitle,
+  OraculoWelcomeBanner
 });