oraculo-ui 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -22,8 +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,
-  OraculoSectionTitle: () => OraculoSectionTitle
+  OraculoSeccionTopJuegos: () => OraculoSeccionTopJuegos,
+  OraculoSeccionVirtuales: () => OraculoSeccionVirtuales_default,
+  OraculoSectionTitle: () => OraculoSectionTitle,
+  OraculoWelcomeBanner: () => OraculoWelcomeBanner_default
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -124,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)(
@@ -176,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,
@@ -198,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);
         })
       }
     ) });
@@ -206,6 +253,584 @@ var OraculoCarousel = (0, import_react.forwardRef)(
 );
 var OraculoCarousel_default = OraculoCarousel;
 
+// src/molecules/OraculoGameRankCard/OraculoGameRankCard.tsx
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function OraculoGameRankCard({
+  imageUrl,
+  orden = 1,
+  onClick,
+  sizes = {
+    xs: { w: 104, h: 112, r: 18, font: 48 },
+    md: { w: 186, h: 264, r: 22.6, font: 64 }
+  }
+}) {
+  var _a, _b, _c, _d;
+  const getVal = (k, def) => {
+    var _a2, _b2, _c2, _d2;
+    return {
+      xs: (_b2 = (_a2 = sizes.xs) == null ? void 0 : _a2[k]) != null ? _b2 : def,
+      md: (_d2 = (_c2 = sizes.md) == null ? void 0 : _c2[k]) != null ? _d2 : def
+    };
+  };
+  const W = getVal("w", 186);
+  const H = getVal("h", 264);
+  const R = getVal("r", 22.6);
+  const F = getVal("font", 64);
+  const hang = {
+    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_runtime5.jsxs)(
+    import_Box.default,
+    {
+      onClick,
+      role: "button",
+      sx: {
+        position: "relative",
+        width: "100%",
+        maxWidth: { xs: `${W.xs}px`, md: `${W.md}px` },
+        aspectRatio: {
+          xs: `${W.xs}/${H.xs}`,
+          md: `${W.md}/${H.md}`
+        },
+        borderRadius: { xs: `${R.xs}px`, md: `${R.md}px` },
+        boxSizing: "border-box",
+        cursor: "pointer",
+        overflow: "visible",
+        pb: { xs: `${hang.xs}px`, md: `${hang.md}px` },
+        transition: "transform .15s ease, box-shadow .15s ease",
+        "&:hover": { transform: "translateY(-2px)", boxShadow: 8 }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          import_Box.default,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              borderRadius: "inherit",
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "img",
+                {
+                  src: imageUrl,
+                  alt: "Juego de casino",
+                  loading: "lazy",
+                  style: {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                    display: "block"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_Box.default,
+                {
+                  sx: {
+                    position: "absolute",
+                    inset: 0,
+                    background: "linear-gradient(21.29deg, rgba(11,13,27,.8) -1.16%, rgba(255,255,255,0) 55%)",
+                    mixBlendMode: "multiply"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_Box.default,
+          {
+            component: "span",
+            sx: {
+              position: "absolute",
+              left: 8,
+              bottom: {
+                xs: `-${hang.xs}px`,
+                md: `-${hang.md}px`
+              },
+              fontFamily: "secondary",
+              fontSize: {
+                xs: `${F.xs}px`,
+                md: `${F.md}px`
+              },
+              lineHeight: 1,
+              color: "#3CC666",
+              WebkitTextStroke: "1px #9ee86e",
+              zIndex: 2,
+              userSelect: "none"
+            },
+            children: orden
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/molecules/OraculoLiveCasinoCard/OraculoLiveCasinoCard.tsx
+var import_Box2 = __toESM(require("@mui/material/Box"));
+var import_Typography = __toESM(require("@mui/material/Typography"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var OraculoLiveCasinoCard = ({
+  logo,
+  provider,
+  providerName,
+  machine,
+  onClick
+}) => {
+  var _a;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    import_Box2.default,
+    {
+      onClick,
+      sx: {
+        flex: "0 0 auto",
+        position: "relative",
+        borderRadius: "20px",
+        overflow: "hidden",
+        width: { xs: 100, md: 180 },
+        height: { xs: 200, md: 380 },
+        transition: "width .50s ease, transform .28s ease",
+        willChange: "width, transform",
+        cursor: "pointer",
+        zIndex: 0,
+        "&:hover": {
+          zIndex: 2,
+          width: { md: 260, xs: 110 }
+        },
+        "&:hover .orc-live-provider-label": {
+          opacity: 1
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_Box2.default,
+          {
+            component: "img",
+            src: logo,
+            alt: `Juego ${machine != null ? machine : ""}`,
+            sx: {
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              display: "block"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_Box2.default,
+          {
+            className: "orc-live-provider-label",
+            sx: {
+              position: "absolute",
+              left: "50%",
+              top: { xs: "75%", md: "80%" },
+              transform: "translate(-50%, -50%)",
+              zIndex: 3,
+              opacity: 0,
+              transition: "opacity .25s ease",
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              import_Typography.default,
+              {
+                sx: {
+                  color: "#fff",
+                  fontWeight: 700,
+                  fontSize: { xs: 11, md: 14 },
+                  textTransform: "capitalize"
+                },
+                children: (_a = provider != null ? provider : providerName) != null ? _a : ""
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var OraculoLiveCasinoCard_default = OraculoLiveCasinoCard;
+
+// src/molecules/OraculoGameCard/OraculoGameCard.tsx
+var import_Box3 = __toESM(require("@mui/material/Box"));
+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_runtime7.jsx)(
+    import_Box3.default,
+    {
+      onClick,
+      role: "button",
+      sx: {
+        position: "relative",
+        width: `${dim.w}px`,
+        height: `${dim.h}px`,
+        borderRadius: "12px",
+        overflow: "hidden",
+        boxSizing: "border-box",
+        transition: "transform .15s ease, box-shadow .15s ease",
+        "&:hover": {
+          transform: "translateY(-2px)",
+          boxShadow: 8,
+          cursor: "pointer"
+        },
+        opacity: 1
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "img",
+        {
+          src: imageUrl,
+          alt: "Juego de casino",
+          loading: "lazy",
+          style: {
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            display: "block",
+            borderRadius: "inherit"
+          }
+        }
+      )
+    }
+  );
+};
+var OraculoGameCard_default = OraculoGameCard;
+
+// src/molecules/OraculoGameSlide/OraculoGameSlide.tsx
+var import_Box4 = __toESM(require("@mui/material/Box"));
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var GAP = 12;
+var OraculoGameSlide = ({
+  items,
+  layout = "grid",
+  onClick
+}) => {
+  if (layout === "mosaic") {
+    const big = items[0];
+    const smalls = items.slice(1, 5);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      import_Box4.default,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateRows: {
+            xs: `repeat(2, 112px)`,
+            md: `repeat(2, 168px)`
+          },
+          gridTemplateColumns: {
+            xs: `184px`,
+            md: `280px`
+          },
+          gridAutoFlow: "column",
+          gridAutoColumns: {
+            xs: `104px`,
+            md: `152px`
+          },
+          columnGap: `${GAP}px`,
+          rowGap: `${GAP}px`,
+          alignItems: "stretch",
+          justifyItems: "stretch"
+        },
+        children: [
+          big && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_Box4.default,
+            {
+              sx: {
+                width: { xs: 184, md: 280 },
+                height: { xs: 234, md: 352 },
+                gridRow: "1 / span 2",
+                overflow: "hidden",
+                borderRadius: 2,
+                "& > *": { width: "100%", height: "100%" }
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                OraculoGameCard_default,
+                {
+                  imageUrl: big.imageUrl,
+                  size: "lg",
+                  onClick: () => onClick == null ? void 0 : onClick(big)
+                }
+              )
+            }
+          ),
+          smalls.map((it) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_Box4.default,
+            {
+              sx: {
+                width: { xs: 104, md: 152 },
+                height: { xs: 112, md: 168 },
+                overflow: "hidden",
+                borderRadius: 2,
+                "& > *": { width: "100%", height: "100%" }
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                OraculoGameCard_default,
+                {
+                  imageUrl: it.imageUrl,
+                  size: "sm",
+                  onClick: () => onClick == null ? void 0 : onClick(it)
+                }
+              )
+            },
+            it.id
+          ))
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_Box4.default,
+    {
+      sx: {
+        display: "grid",
+        gridTemplateColumns: {
+          xs: `repeat(2, 104px)`,
+          md: `repeat(2, 152px)`
+        },
+        gridTemplateRows: {
+          xs: `repeat(2, 112px)`,
+          md: `repeat(2, 168px)`
+        },
+        gap: `${GAP}px`,
+        "& > *": {
+          overflow: "hidden",
+          borderRadius: 2,
+          "& > *": { width: "100%", height: "100%" }
+        }
+      },
+      children: items.map((it) => /* @__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)
+        }
+      ) }, it.id))
+    }
+  );
+};
+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: {
+                        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");
 
@@ -213,19 +838,19 @@ var import_react2 = require("react");
 var import_utils = require("@mui/material/utils");
 
 // ../node_modules/@mui/icons-material/esm/ChevronLeftRounded.js
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var ChevronLeftRounded_default = (0, import_utils.createSvgIcon)(/* @__PURE__ */ (0, import_jsx_runtime4.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_runtime5 = require("react/jsx-runtime");
-var ChevronRightRounded_default = (0, import_utils.createSvgIcon)(/* @__PURE__ */ (0, import_jsx_runtime5.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_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function OraculoSeccionDestacados({
   items,
   title = "Destacados",
@@ -247,8 +872,8 @@ function OraculoSeccionDestacados({
     onViewMore == null ? void 0 : onViewMore();
   };
   const sectionClassName = className || void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: sectionClassName, style: { width: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", { className: sectionClassName, style: { width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "header",
       {
         style: {
@@ -260,7 +885,7 @@ function OraculoSeccionDestacados({
           marginBottom: 16
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             OraculoSectionTitle,
             {
               title,
@@ -268,7 +893,7 @@ function OraculoSeccionDestacados({
               size: "md"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
             "div",
             {
               style: {
@@ -276,24 +901,24 @@ function OraculoSeccionDestacados({
                 gap: 8
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   OraculoButton,
                   {
                     ariaLabel: "Anterior",
                     variant: "secondary",
                     iconOnly: true,
-                    leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronLeftRounded_default, {}),
+                    leftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronLeftRounded_default, {}),
                     onClick: handlePrev,
                     disabled: navState.isStart
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   OraculoButton,
                   {
                     ariaLabel: "Siguiente",
                     variant: "secondary",
                     iconOnly: true,
-                    rightIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronRightRounded_default, {}),
+                    rightIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronRightRounded_default, {}),
                     onClick: handleNext,
                     disabled: navState.isEnd
                   }
@@ -301,11 +926,11 @@ function OraculoSeccionDestacados({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       OraculoCarousel_default,
       {
         ref: carouselRef,
@@ -319,14 +944,14 @@ function OraculoSeccionDestacados({
         },
         renderItem: (item) => {
           var _a;
-          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "div",
             {
               style: {
                 textAlign: "center",
                 marginTop: 16
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "img",
                 {
                   src: item.src,
@@ -348,10 +973,779 @@ function OraculoSeccionDestacados({
     )
   ] });
 }
+
+// src/organisms/OraculoSeccionTopJuegos/OraculoSeccionTopJuegos.tsx
+var import_Stack = __toESM(require("@mui/material/Stack"));
+var import_Box6 = __toESM(require("@mui/material/Box"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function OraculoSeccionTopJuegos({
+  items,
+  title = "Top Juegos",
+  iconUrl,
+  onCardClick,
+  className
+}) {
+  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",
+          gridTemplateColumns: {
+            xs: "repeat(3, minmax(0, 1fr))",
+            md: "repeat(6, minmax(0, 1fr))"
+          },
+          gap: { xs: 1.5, md: 2 },
+          justifyItems: "center",
+          width: "100%"
+        },
+        children: items.slice(0, 6).map((juego, idx) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          OraculoGameRankCard,
+          {
+            imageUrl: juego.logo || "",
+            orden: juego.orden,
+            onClick: () => console.log(juego.machine)
+          },
+          juego.machine
+        ))
+      }
+    )
+  ] }) });
+}
+
+// src/organisms/OraculoSeccionCasinoEnVivo/OraculoSeccionCasinoEnVivo.tsx
+var import_Box7 = __toESM(require("@mui/material/Box"));
+var import_Stack2 = __toESM(require("@mui/material/Stack"));
+var import_Typography3 = __toESM(require("@mui/material/Typography"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var OraculoSeccionCasinoEnVivo = ({
+  items,
+  title = "Casino en vivo",
+  subtitle = "Disfruta la emoci\xF3n en tus juegos favoritos y gana en tiempo real.",
+  backgroundMobileUrl = "/assets/img/home/CasinoEnVivo/FondoMobile3.png",
+  backgroundDesktopUrl = "/assets/img/home/CasinoEnVivo/FondoDesktop3.png",
+  onCardClick,
+  onViewMore,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    import_Box7.default,
+    {
+      className,
+      sx: {
+        position: "relative",
+        width: "100vw",
+        left: "50%",
+        right: "50%",
+        transform: "translateX(-50%)",
+        color: "white",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_Box7.default,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              backgroundImage: {
+                xs: `
+              linear-gradient(to bottom, #121212 0%, rgba(18,18,18,0) 10%),
+              linear-gradient(to top,    #121212 0%, rgba(18,18,18,0) 10%),
+              url('${backgroundMobileUrl}')
+            `,
+                md: `
+              linear-gradient(to bottom, #121212 0%, rgba(18,18,18,0) 10%),
+              linear-gradient(to top,    #121212 0%, rgba(18,18,18,0) 10%),
+              url('${backgroundDesktopUrl}')
+            `
+              },
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat",
+              zIndex: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          import_Box7.default,
+          {
+            sx: {
+              position: "relative",
+              zIndex: 1,
+              maxWidth: 1200,
+              height: { xs: "450px", md: "550px" },
+              mx: "auto",
+              px: { xs: 2.5, md: 6 },
+              display: "flex",
+              flexDirection: { xs: "column", md: "row" },
+              alignItems: { xs: "center", md: "center" },
+              justifyContent: "center",
+              gap: { xs: 0, md: 15 },
+              textAlign: { xs: "center", md: "left" }
+            },
+            children: [
+              /* @__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: {
+                      fontWeight: 800,
+                      fontSize: { xs: 24, md: 40 },
+                      WebkitTextStroke: "0.5px rgba(255, 255, 255, .5)",
+                      textShadow: "0 0 2px rgba(255, 255, 255, .95),0 0 4px rgba(255, 255, 255, .6),0 1px 0 #898989"
+                    },
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  import_Typography3.default,
+                  {
+                    sx: {
+                      fontSize: { xs: 14, md: 18 },
+                      color: "rgba(255,255,255,0.9)",
+                      marginX: { xs: 4, md: 0 },
+                      lineHeight: 1.5
+                    },
+                    children: subtitle
+                  }
+                ),
+                /* @__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",
+                    size: "md",
+                    onClick: () => onViewMore == null ? void 0 : onViewMore(),
+                    children: "Ver m\xE1s"
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_Box7.default,
+                {
+                  sx: {
+                    display: "flex",
+                    gap: { xs: 2, md: 3 },
+                    justifyContent: "center",
+                    overflowX: { xs: "auto", md: "visible" },
+                    py: { xs: 3, md: 0 },
+                    alignItems: "center"
+                  },
+                  children: items.map((juego, idx) => {
+                    var _a, _b;
+                    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                      OraculoLiveCasinoCard_default,
+                      {
+                        logo: (_b = juego.logo) != null ? _b : "",
+                        provider: juego.provider,
+                        providerName: juego.web_name,
+                        machine: juego.machine,
+                        onClick: () => onCardClick == null ? void 0 : onCardClick(juego, idx)
+                      },
+                      (_a = juego.machine) != null ? _a : idx
+                    );
+                  })
+                }
+              ),
+              /* @__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",
+                  size: "lg",
+                  onClick: () => onViewMore == null ? void 0 : onViewMore(),
+                  children: "Ver m\xE1s"
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var OraculoSeccionCasinoEnVivo_default = OraculoSeccionCasinoEnVivo;
+
+// src/organisms/OraculoSeccionCasino/OraculoSeccionCasino.tsx
+var import_react3 = require("react");
+var import_Stack3 = __toESM(require("@mui/material/Stack"));
+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;
+    return {
+      id: (_b = (_a = g.id) != null ? _a : g.machine) != null ? _b : idx,
+      imageUrl: (_d = (_c = g.imageUrl) != null ? _c : g.logo) != null ? _d : ""
+    };
+  });
+  if (!baseItems.length) return [];
+  const slides = [];
+  let start = 0;
+  if (mosaicFirst) {
+    const take = Math.min(baseItems.length, 5);
+    slides.push({
+      id: "mosaic-0",
+      kind: "mosaic",
+      items: baseItems.slice(0, take)
+    });
+    start = take;
+  }
+  while (start < baseItems.length) {
+    const end = Math.min(start + gridSize, baseItems.length);
+    slides.push({
+      id: `grid-${start}`,
+      kind: "grid",
+      items: baseItems.slice(start, end)
+    });
+    start = end;
+  }
+  return slides;
+};
+var OraculoSeccionCasino = ({
+  items,
+  title = "Casino",
+  iconUrl = "/assets/img/home/Casino/diamante.svg",
+  onItemClick,
+  onViewMore,
+  mosaicFirst = true,
+  gridSize = 4,
+  className
+}) => {
+  const carouselRef = (0, import_react3.useRef)(null);
+  const [navState, setNavState] = (0, import_react3.useState)({ isStart: true, isEnd: false });
+  const slides = buildCasinoSlides(items, mosaicFirst, gridSize);
+  const handlePrev = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.prev();
+  };
+  const handleNext = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.next();
+  };
+  const handleViewMore = () => {
+    onViewMore == null ? void 0 : onViewMore();
+  };
+  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",
+          gridTemplateColumns: "1fr auto auto",
+          alignItems: "center",
+          columnGap: 1.5,
+          rowGap: 1
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            OraculoSectionTitle,
+            {
+              title,
+              iconUrl,
+              size: "md"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+            import_Box8.default,
+            {
+              sx: {
+                display: "flex",
+                gap: 1,
+                justifyContent: "flex-end"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  OraculoButton,
+                  {
+                    ariaLabel: "Anterior",
+                    variant: "secondary",
+                    iconOnly: true,
+                    leftIcon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronLeftRounded_default, {}),
+                    onClick: handlePrev,
+                    disabled: navState.isStart
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  OraculoButton,
+                  {
+                    ariaLabel: "Siguiente",
+                    variant: "secondary",
+                    iconOnly: true,
+                    rightIcon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronRightRounded_default, {}),
+                    onClick: handleNext,
+                    disabled: navState.isEnd
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__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_runtime16.jsx)(
+      OraculoCarousel_default,
+      {
+        ref: carouselRef,
+        items: slides,
+        perPage: 1,
+        gap: "0px",
+        options: {
+          autoWidth: true,
+          gap: "12px",
+          trimSpace: false,
+          pagination: false,
+          arrows: false,
+          drag: true,
+          focus: "start"
+        },
+        renderItem: (slide) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { alignSelf: "start" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          OraculoGameSlide_default,
+          {
+            items: slide.items,
+            layout: slide.kind === "mosaic" ? "mosaic" : "grid",
+            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;
+                }
+              );
+              if (game) onItemClick == null ? void 0 : onItemClick(game);
+            }
+          }
+        ) }),
+        onMove: ({ isStart, isEnd }) => setNavState({ isStart, isEnd })
+      }
+    )
+  ] }) });
+};
+var OraculoSeccionCasino_default = OraculoSeccionCasino;
+
+// src/organisms/OraculoSeccionVirtuales/OraculoSeccionVirtuales.tsx
+var import_react4 = require("react");
+var import_Stack4 = __toESM(require("@mui/material/Stack"));
+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;
+    return {
+      id: (_b = (_a = g.id) != null ? _a : g.machine) != null ? _b : idx,
+      imageUrl: (_d = (_c = g.imageUrl) != null ? _c : g.logo) != null ? _d : ""
+    };
+  });
+  if (!baseItems.length) return [];
+  const slides = [];
+  let start = 0;
+  if (mosaicFirst) {
+    const take = Math.min(baseItems.length, 5);
+    slides.push({
+      id: "mosaic-0",
+      kind: "mosaic",
+      items: baseItems.slice(0, take)
+    });
+    start = take;
+  }
+  while (start < baseItems.length) {
+    const end = Math.min(start + gridSize, baseItems.length);
+    slides.push({
+      id: `grid-${start}`,
+      kind: "grid",
+      items: baseItems.slice(start, end)
+    });
+    start = end;
+  }
+  return slides;
+};
+var OraculoSeccionVirtuales = ({
+  items,
+  title = "Virtuales",
+  iconUrl = "/assets/img/home/Virtuales/virtuales.svg",
+  onItemClick,
+  onViewMore,
+  mosaicFirst = true,
+  gridSize = 4,
+  className
+}) => {
+  const carouselRef = (0, import_react4.useRef)(null);
+  const [navState, setNavState] = (0, import_react4.useState)({ isStart: true, isEnd: false });
+  const slides = buildVirtualSlides(items, mosaicFirst, gridSize);
+  const handlePrev = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.prev();
+  };
+  const handleNext = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.next();
+  };
+  const handleViewMore = () => {
+    onViewMore == null ? void 0 : onViewMore();
+  };
+  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",
+          gridTemplateColumns: "1fr auto auto",
+          alignItems: "center",
+          columnGap: 1.5,
+          rowGap: 1
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            OraculoSectionTitle,
+            {
+              title,
+              iconUrl,
+              size: "md"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+            import_Box9.default,
+            {
+              sx: {
+                display: "flex",
+                gap: 1,
+                justifyContent: "flex-end"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  OraculoButton,
+                  {
+                    ariaLabel: "Anterior",
+                    variant: "secondary",
+                    iconOnly: true,
+                    leftIcon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronLeftRounded_default, {}),
+                    onClick: handlePrev,
+                    disabled: navState.isStart
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  OraculoButton,
+                  {
+                    ariaLabel: "Siguiente",
+                    variant: "secondary",
+                    iconOnly: true,
+                    rightIcon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronRightRounded_default, {}),
+                    onClick: handleNext,
+                    disabled: navState.isEnd
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__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_runtime17.jsx)(
+      OraculoCarousel_default,
+      {
+        ref: carouselRef,
+        items: slides,
+        perPage: 1,
+        gap: "0",
+        options: {
+          autoWidth: true,
+          gap: "12px",
+          trimSpace: false,
+          pagination: false,
+          arrows: false,
+          drag: true,
+          focus: "start",
+          perMove: 1
+        },
+        renderItem: (slide) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { alignSelf: "start" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          OraculoGameSlide_default,
+          {
+            items: slide.items,
+            layout: slide.kind === "mosaic" ? "mosaic" : "grid",
+            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;
+                }
+              );
+              if (game) onItemClick == null ? void 0 : onItemClick(game);
+            }
+          }
+        ) }),
+        onMove: ({ isStart, isEnd }) => setNavState({ isStart, isEnd })
+      }
+    )
+  ] }) });
+};
+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 }),
+                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,
+              {
+                ...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,
-  OraculoSectionTitle
+  OraculoSeccionTopJuegos,
+  OraculoSeccionVirtuales,
+  OraculoSectionTitle,
+  OraculoWelcomeBanner
 });