oraculo-ui 0.1.8 → 0.1.9

package/dist/index.mjs

@@ -1,1820 +1,46 @@
-// src/atoms/OraculoButton/OraculoButton.tsx
-import { Link as MuiLink } from "@mui/material";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function OraculoButton({
-  children,
-  onClick,
-  href,
-  target,
-  rel,
-  type = "button",
-  disabled = false,
-  variant = "primary",
-  size,
-  fullWidth = false,
-  fullHeight = false,
-  className = "",
-  ariaLabel,
-  leftIcon,
-  rightIcon,
-  iconOnly
-}) {
-  const hasText = !!children && children !== true;
-  const hasLeft = !!leftIcon;
-  const hasRight = !!rightIcon;
-  const onlyOneIcon = (hasLeft ? 1 : 0) + (hasRight ? 1 : 0) === 1;
-  const isIconOnly = iconOnly != null ? iconOnly : onlyOneIcon && !hasText;
-  const cls = [
-    "orc-btn",
-    variant === "secondary" ? "orc-btn--secondary" : variant === "tertiary" ? "orc-btn--tertiary" : "orc-btn--primary",
-    size ? `orc-btn--${size}` : "",
-    fullWidth ? "orc-btn--full" : "",
-    fullHeight ? "orc-btn--fullHeight" : "",
-    isIconOnly ? "orc-btn--iconOnly" : "",
-    className
-  ].filter(Boolean).join(" ");
-  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    leftIcon && /* @__PURE__ */ jsx("span", { className: "orc-btn__icon", children: leftIcon }),
-    !isIconOnly && /* @__PURE__ */ jsx("span", { className: "orc-btn__label", children }),
-    rightIcon && /* @__PURE__ */ jsx("span", { className: "orc-btn__icon", children: rightIcon })
-  ] });
-  const ariaDisabled = disabled ? true : void 0;
-  if (href) {
-    return /* @__PURE__ */ jsx(
-      MuiLink,
-      {
-        href,
-        target,
-        rel,
-        "aria-label": ariaLabel,
-        "aria-disabled": ariaDisabled,
-        tabIndex: ariaDisabled ? -1 : void 0,
-        className: cls,
-        onClick: ariaDisabled ? (e) => e.preventDefault() : onClick,
-        children: content
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type,
-      onClick,
-      disabled: !!ariaDisabled,
-      "aria-label": ariaLabel,
-      className: cls,
-      children: content
-    }
-  );
-}
-
-// src/atoms/OraculoSectionTitle/OraculoSectionTitle.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function OraculoSectionTitle({
-  title,
-  iconUrl,
-  size = "md",
-  className = ""
-}) {
-  const sizeClass = size ? `orc-section-title--${size}` : "";
-  const wrapperClass = [
-    "orc-section-title",
-    sizeClass,
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs2("div", { className: wrapperClass, children: [
-    iconUrl && /* @__PURE__ */ jsx2(
-      "img",
-      {
-        src: iconUrl,
-        alt: "",
-        className: "orc-section-title__icon"
-      }
-    ),
-    /* @__PURE__ */ jsx2("h2", { className: "orc-section-title__title", children: title })
-  ] });
-}
-
-// src/atoms/OraculoCarouselDots/OraculoCarouselDots.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var OraculoCarouselDots = ({
-  total,
-  active,
-  onSelect,
-  className = ""
-}) => {
-  if (total <= 1) return null;
-  const rootClass = ["orc-dots", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx3("div", { className: rootClass, role: "tablist", children: Array.from({ length: total }).map((_, i) => /* @__PURE__ */ jsx3("span", { className: "orc-dots__cell", children: /* @__PURE__ */ jsx3(
-    "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
 import {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useRef
-} from "react";
+  OraculoPageLanding,
+  OraculoPageLandingPreview_default,
+  OraculoSeccionDestacados
+} from "./chunk-PXIOKT7L.mjs";
 import {
-  Splide as SplideRaw,
-  SplideSlide as SplideSlideRaw
-} from "@splidejs/react-splide";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Splide = SplideRaw;
-var SplideSlide = SplideSlideRaw;
-var OraculoCarousel = forwardRef(
-  ({
-    items = [],
-    renderItem,
-    perPage = 1,
-    gap = "0px",
-    breakpoints,
-    options = {},
-    className = "",
-    onMove
-  }, ref) => {
-    const splideRef = useRef(null);
-    useImperativeHandle(ref, () => ({
-      next: () => {
-        var _a;
-        return (_a = splideRef.current) == null ? void 0 : _a.go(">");
-      },
-      prev: () => {
-        var _a;
-        return (_a = splideRef.current) == null ? void 0 : _a.go("<");
-      },
-      go: (index) => {
-        var _a;
-        return (_a = splideRef.current) == null ? void 0 : _a.go(index);
-      }
-    }));
-    const handleMove = useCallback(
-      (splide) => {
-        const index = splide.index;
-        const total = splide.length;
-        const currentPerPage = splide.options.perPage || 1;
-        const isStart = index === 0;
-        const isEnd = index >= total - currentPerPage;
-        onMove == null ? void 0 : onMove({ index, isStart, isEnd, total });
-      },
-      [onMove]
-    );
-    const handleMounted = useCallback(
-      (splide) => {
-        handleMove(splide);
-      },
-      [handleMove]
-    );
-    const mergedOptions = {
-      type: "slide",
-      trimSpace: false,
-      drag: true,
-      pagination: false,
-      arrows: false,
-      rewind: false,
-      focus: "start",
-      autoWidth: false,
-      perPage,
-      gap,
-      breakpoints,
-      ...options
-    };
-    return /* @__PURE__ */ jsx4("div", { className, style: { width: "100%" }, children: /* @__PURE__ */ jsx4(
-      Splide,
-      {
-        ref: splideRef,
-        options: mergedOptions,
-        onMove: handleMove,
-        onMounted: handleMounted,
-        children: items.map((item, index) => {
-          var _a;
-          return /* @__PURE__ */ jsx4(SplideSlide, { children: renderItem(item, index) }, (_a = item.id) != null ? _a : index);
-        })
-      }
-    ) });
-  }
-);
-var OraculoCarousel_default = OraculoCarousel;
-
-// src/molecules/OraculoGameRankCard/OraculoGameRankCard.tsx
-import Box from "@mui/material/Box";
-import { jsx as jsx5, jsxs as jsxs3 } from "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__ */ jsxs3(
-    Box,
-    {
-      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__ */ jsxs3(
-          Box,
-          {
-            sx: {
-              position: "absolute",
-              inset: 0,
-              borderRadius: "inherit",
-              overflow: "hidden"
-            },
-            children: [
-              /* @__PURE__ */ jsx5(
-                "img",
-                {
-                  src: `https://olimpo.bet${imageUrl}`,
-                  alt: "Juego de casino",
-                  loading: "lazy",
-                  style: {
-                    width: "100%",
-                    height: "100%",
-                    objectFit: "cover",
-                    display: "block"
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx5(
-                Box,
-                {
-                  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__ */ jsx5(
-          Box,
-          {
-            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
-import Box2 from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var OraculoLiveCasinoCard = ({
-  logo,
-  provider,
-  providerName,
-  machine,
-  onClick
-}) => {
-  var _a;
-  return /* @__PURE__ */ jsxs4(
-    Box2,
-    {
-      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__ */ jsx6(
-          Box2,
-          {
-            component: "img",
-            src: logo,
-            alt: `Juego ${machine != null ? machine : ""}`,
-            sx: {
-              position: "absolute",
-              inset: 0,
-              width: "100%",
-              height: "100%",
-              objectFit: "cover",
-              display: "block"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx6(
-          Box2,
-          {
-            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__ */ jsx6(
-              Typography,
-              {
-                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
-import Box3 from "@mui/material/Box";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var OraculoGameCard = ({
-  imageUrl,
-  onClick,
-  size = "sm"
-}) => {
-  const dim = size === "lg" ? { w: 280, h: 352 } : { w: 152, h: 168 };
-  return /* @__PURE__ */ jsx7(
-    Box3,
-    {
-      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__ */ jsx7(
-        "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
-import Box4 from "@mui/material/Box";
-import { jsx as jsx8, jsxs as jsxs5 } from "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__ */ jsxs5(
-      Box4,
-      {
-        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__ */ jsx8(
-            Box4,
-            {
-              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__ */ jsx8(
-                OraculoGameCard_default,
-                {
-                  imageUrl: big.imageUrl,
-                  size: "lg",
-                  onClick: () => onClick == null ? void 0 : onClick(big, 0)
-                }
-              )
-            }
-          ),
-          smalls.map((it, index) => /* @__PURE__ */ jsx8(
-            Box4,
-            {
-              sx: {
-                width: { xs: 104, md: 152 },
-                height: { xs: 112, md: 168 },
-                overflow: "hidden",
-                borderRadius: 2,
-                "& > *": { width: "100%", height: "100%" }
-              },
-              children: /* @__PURE__ */ jsx8(
-                OraculoGameCard_default,
-                {
-                  imageUrl: it.imageUrl,
-                  size: "sm",
-                  onClick: () => onClick == null ? void 0 : onClick(it, index + 1)
-                }
-              )
-            },
-            it.id
-          ))
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx8(
-    Box4,
-    {
-      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, index) => {
-        var _a;
-        return /* @__PURE__ */ jsx8(Box4, { children: /* @__PURE__ */ jsx8(
-          OraculoGameCard_default,
-          {
-            imageUrl: it.imageUrl,
-            size: "sm",
-            onClick: () => onClick == null ? void 0 : onClick(it, index)
-          }
-        ) }, (_a = it.id) != null ? _a : index);
-      })
-    }
-  );
-};
-var OraculoGameSlide_default = OraculoGameSlide;
-
-// src/molecules/OraculoWelcomeBanner/OraculoWelcomeBanner.tsx
-import Box5 from "@mui/material/Box";
-import Typography2 from "@mui/material/Typography";
-import { jsx as jsx9, jsxs as jsxs6 } from "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__ */ jsxs6(
-    Box5,
-    {
-      className,
-      sx: {
-        position: "relative",
-        width: "100%",
-        maxWidth: {
-          xs: 328,
-          lg: isLarge ? 618 : 456
-        },
-        mx: "auto"
-      },
-      children: [
-        backgroundImage && /* @__PURE__ */ jsx9(
-          Box5,
-          {
-            sx: {
-              position: "relative",
-              width: "100%",
-              aspectRatio: {
-                xs: "328 / 188",
-                lg: isLarge ? "618 / 346" : "456 / 272"
-              },
-              borderRadius: "14px",
-              overflow: "hidden"
-            },
-            children: /* @__PURE__ */ jsx9(
-              Box5,
-              {
-                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__ */ jsx9(
-          Box5,
-          {
-            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__ */ jsxs6(
-              Box5,
-              {
-                sx: {
-                  maxWidth: "60%",
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center"
-                },
-                children: [
-                  title && /* @__PURE__ */ jsx9(
-                    Typography2,
-                    {
-                      sx: {
-                        fontSize: { xs: 12, lg: 20 },
-                        fontWeight: 400,
-                        color: "#e7f8ff"
-                      },
-                      children: title
-                    }
-                  ),
-                  amount && /* @__PURE__ */ jsxs6(
-                    Box5,
-                    {
-                      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__ */ jsx9(
-                          Box5,
-                          {
-                            component: "span",
-                            sx: { fontSize: { xs: 35, lg: 48 }, mr: 0.5 },
-                            children: symbol
-                          }
-                        ),
-                        /* @__PURE__ */ jsx9(
-                          Box5,
-                          {
-                            component: "span",
-                            sx: { fontSize: { xs: 52, lg: 77 } },
-                            children: value
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  subtitle && /* @__PURE__ */ jsx9(
-                    Typography2,
-                    {
-                      sx: {
-                        pb: "20px",
-                        fontSize: 14,
-                        fontWeight: 600,
-                        color: "#e7f8ff"
-                      },
-                      children: subtitle
-                    }
-                  ),
-                  buttonText && /* @__PURE__ */ jsx9(OraculoButton, { onClick: onButtonClick, children: buttonText })
-                ]
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-};
-var OraculoWelcomeBanner_default = OraculoWelcomeBanner;
-
-// src/molecules/OraculoClubOlimpoVisual/OraculoClubOlimpoVisual.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
-var OraculoClubOlimpoVisual = ({
-  text,
-  buttonLabel = "Conoce m\xE1s",
-  onClick,
-  imgAlt = "Club Olimpo",
-  imgSrcMobile,
-  imgSrcDesktopBg,
-  imgSrcDesktopLogo
-}) => {
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx10("div", { className: "orc-co-bgMobile", children: /* @__PURE__ */ jsx10(
-      "img",
-      {
-        src: imgSrcMobile,
-        alt: imgAlt,
-        className: "orc-co-bgMobileImg"
-      }
-    ) }),
-    /* @__PURE__ */ jsxs7("div", { className: "orc-co-bgDesktop", children: [
-      imgSrcDesktopBg && /* @__PURE__ */ jsx10("div", { className: "orc-co-fillHost", children: /* @__PURE__ */ jsx10(
-        "img",
-        {
-          src: imgSrcDesktopBg,
-          alt: `${imgAlt} fondo`,
-          className: "orc-co-bgDesktopImg"
-        }
-      ) }),
-      imgSrcDesktopLogo && /* @__PURE__ */ jsx10("div", { className: "orc-co-logo", children: /* @__PURE__ */ jsx10(
-        "img",
-        {
-          src: imgSrcDesktopLogo,
-          alt: `${imgAlt} logo`,
-          className: "orc-co-logoImg"
-        }
-      ) }),
-      /* @__PURE__ */ jsxs7("div", { className: "orc-co-desktopContent", children: [
-        /* @__PURE__ */ jsx10("p", { className: "orc-co-captionDesktop", children: text }),
-        /* @__PURE__ */ jsx10(OraculoButton, { onClick, variant: "primary", size: "md", children: buttonLabel })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "orc-co-bottom", children: [
-      /* @__PURE__ */ jsx10("p", { className: "orc-co-caption", children: text }),
-      /* @__PURE__ */ jsx10(OraculoButton, { onClick, variant: "primary", size: "md", children: buttonLabel })
-    ] })
-  ] });
-};
-var OraculoClubOlimpoVisual_default = OraculoClubOlimpoVisual;
-
-// src/organisms/OraculoSeccionDestacados/OraculoSeccionDestacados.tsx
-import { useRef as useRef2, useState } from "react";
-
-// ../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js
-import { createSvgIcon } from "@mui/material/utils";
-
-// ../node_modules/@mui/icons-material/esm/ChevronLeftRounded.js
-import { jsx as _jsx } from "react/jsx-runtime";
-var ChevronLeftRounded_default = createSvgIcon(/* @__PURE__ */ _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
-import { jsx as _jsx2 } from "react/jsx-runtime";
-var ChevronRightRounded_default = createSvgIcon(/* @__PURE__ */ _jsx2("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
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-function OraculoSeccionDestacados({
-  items,
-  title = "Destacados",
-  iconUrl,
-  onViewMore,
-  className = ""
-}) {
-  const carouselRef = useRef2(null);
-  const [navState, setNavState] = useState({ isStart: true, isEnd: false });
-  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();
-  };
-  const sectionClassName = className || void 0;
-  return /* @__PURE__ */ jsxs8("section", { className: sectionClassName, style: { width: "100%" }, children: [
-    /* @__PURE__ */ jsxs8(
-      "header",
-      {
-        style: {
-          display: "grid",
-          gridTemplateColumns: "1fr auto auto",
-          alignItems: "center",
-          columnGap: 12,
-          rowGap: 8,
-          marginBottom: 16
-        },
-        children: [
-          /* @__PURE__ */ jsx11(OraculoSectionTitle, { title, iconUrl, size: "md" }),
-          /* @__PURE__ */ jsxs8("div", { style: { display: "flex", gap: 8 }, children: [
-            /* @__PURE__ */ jsx11(
-              OraculoButton,
-              {
-                ariaLabel: "Anterior",
-                variant: "secondary",
-                iconOnly: true,
-                leftIcon: /* @__PURE__ */ jsx11(ChevronLeftRounded_default, {}),
-                onClick: handlePrev,
-                disabled: navState.isStart
-              }
-            ),
-            /* @__PURE__ */ jsx11(
-              OraculoButton,
-              {
-                ariaLabel: "Siguiente",
-                variant: "secondary",
-                iconOnly: true,
-                rightIcon: /* @__PURE__ */ jsx11(ChevronRightRounded_default, {}),
-                onClick: handleNext,
-                disabled: navState.isEnd
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx11(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx11(
-      OraculoCarousel_default,
-      {
-        ref: carouselRef,
-        items,
-        perPage: 3.395,
-        gap: "16px",
-        options: { autoWidth: false },
-        breakpoints: {
-          768: { perPage: 1.15, focus: "start" },
-          1024: { perPage: 2.5, focus: "start" }
-        },
-        renderItem: (item) => /* @__PURE__ */ jsx11(
-          "div",
-          {
-            style: {
-              textAlign: "center",
-              marginTop: 16
-            },
-            children: /* @__PURE__ */ jsx11(
-              "img",
-              {
-                src: item.image,
-                alt: item.title,
-                style: {
-                  width: "100%",
-                  height: "auto",
-                  borderRadius: 8,
-                  display: "block"
-                }
-              }
-            )
-          },
-          `${item.title}-${item.image}`
-        ),
-        onMove: ({ isStart, isEnd }) => setNavState({ isStart, isEnd })
-      }
-    )
-  ] });
-}
-
-// src/organisms/OraculoSeccionTopJuegos/OraculoSeccionTopJuegos.tsx
-import { useMemo } from "react";
-import Stack from "@mui/material/Stack";
-import Box6 from "@mui/material/Box";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
-function OraculoSeccionTopJuegos({
-  items,
-  title = "Top Juegos",
-  iconUrl,
-  onCardClick
-}) {
-  const normalizedItems = useMemo(
-    () => items.map((item, index) => {
-      var _a;
-      return {
-        ...item,
-        // si no viene orden, usamos el índice (1-based)
-        orden: (_a = item.orden) != null ? _a : index + 1,
-        _originalIndex: index
-      };
-    }).sort((a, b) => {
-      if (a.orden != null && b.orden != null) return a.orden - b.orden;
-      return a._originalIndex - b._originalIndex;
-    }),
-    [items]
-  );
-  return /* @__PURE__ */ jsx12("section", { style: { width: "100%" }, children: /* @__PURE__ */ jsxs9(Stack, { direction: "column", spacing: 2, useFlexGap: true, children: [
-    /* @__PURE__ */ jsx12(OraculoSectionTitle, { title, iconUrl, size: "md" }),
-    /* @__PURE__ */ jsx12(
-      Box6,
-      {
-        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: normalizedItems.slice(0, 6).map((juego) => /* @__PURE__ */ jsx12(
-          OraculoGameRankCard,
-          {
-            imageUrl: juego.logo || "",
-            orden: juego.orden,
-            onClick: () => onCardClick == null ? void 0 : onCardClick(juego)
-          },
-          juego.machine
-        ))
-      }
-    )
-  ] }) });
-}
-
-// src/organisms/OraculoSeccionCasinoEnVivo/OraculoSeccionCasinoEnVivo.tsx
-import Box7 from "@mui/material/Box";
-import Stack2 from "@mui/material/Stack";
-import Typography3 from "@mui/material/Typography";
-import { jsx as jsx13, jsxs as jsxs10 } from "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__ */ jsxs10(
-    Box7,
-    {
-      className,
-      sx: {
-        position: "relative",
-        width: "100vw",
-        left: "50%",
-        right: "50%",
-        transform: "translateX(-50%)",
-        color: "white",
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsx13(
-          Box7,
-          {
-            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__ */ jsxs10(
-          Box7,
-          {
-            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__ */ jsxs10(Stack2, { spacing: 3, sx: { maxWidth: { md: 280 } }, children: [
-                /* @__PURE__ */ jsx13(
-                  Typography3,
-                  {
-                    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__ */ jsx13(
-                  Typography3,
-                  {
-                    sx: {
-                      fontSize: { xs: 14, md: 18 },
-                      color: "rgba(255,255,255,0.9)",
-                      marginX: { xs: 4, md: 0 },
-                      lineHeight: 1.5
-                    },
-                    children: subtitle
-                  }
-                ),
-                /* @__PURE__ */ jsx13(Box7, { sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ jsx13(
-                  OraculoButton,
-                  {
-                    variant: "primary",
-                    size: "md",
-                    onClick: () => onViewMore == null ? void 0 : onViewMore(),
-                    children: "Ver m\xE1s"
-                  }
-                ) })
-              ] }),
-              /* @__PURE__ */ jsx13(
-                Box7,
-                {
-                  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__ */ jsx13(
-                      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.orden) != null ? _a : idx
-                    );
-                  })
-                }
-              ),
-              /* @__PURE__ */ jsx13(Box7, { sx: { display: { xs: "block", md: "none" } }, children: /* @__PURE__ */ jsx13(
-                OraculoButton,
-                {
-                  variant: "primary",
-                  size: "lg",
-                  onClick: () => onViewMore == null ? void 0 : onViewMore(),
-                  children: "Ver m\xE1s"
-                }
-              ) })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-var OraculoSeccionCasinoEnVivo_default = OraculoSeccionCasinoEnVivo;
-
-// src/organisms/OraculoSeccionCasino/OraculoSeccionCasino.tsx
-import { useRef as useRef3, useState as useState2 } from "react";
-import Stack3 from "@mui/material/Stack";
-import Box8 from "@mui/material/Box";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
-var buildCasinoSlides = (games, mosaicFirst = true, gridSize = 4) => {
-  const baseItems = games.map((g, idx) => {
-    var _a, _b, _c;
-    return {
-      id: (_b = (_a = g.orden) != null ? _a : g.machine) != null ? _b : idx,
-      imageUrl: (_c = g.logo) != null ? _c : ""
-    };
-  });
-  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
-}) => {
-  const carouselRef = useRef3(null);
-  const [navState, setNavState] = useState2({ 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__ */ jsx14("section", { children: /* @__PURE__ */ jsxs11(Stack3, { direction: "column", spacing: 2, useFlexGap: true, children: [
-    /* @__PURE__ */ jsxs11(
-      Box8,
-      {
-        sx: {
-          display: "grid",
-          gridTemplateColumns: "1fr auto auto",
-          alignItems: "center",
-          columnGap: 1.5,
-          rowGap: 1
-        },
-        children: [
-          /* @__PURE__ */ jsx14(
-            OraculoSectionTitle,
-            {
-              title,
-              iconUrl,
-              size: "md"
-            }
-          ),
-          /* @__PURE__ */ jsxs11(
-            Box8,
-            {
-              sx: {
-                display: "flex",
-                gap: 1,
-                justifyContent: "flex-end"
-              },
-              children: [
-                /* @__PURE__ */ jsx14(
-                  OraculoButton,
-                  {
-                    ariaLabel: "Anterior",
-                    variant: "secondary",
-                    iconOnly: true,
-                    leftIcon: /* @__PURE__ */ jsx14(ChevronLeftRounded_default, {}),
-                    onClick: handlePrev,
-                    disabled: navState.isStart
-                  }
-                ),
-                /* @__PURE__ */ jsx14(
-                  OraculoButton,
-                  {
-                    ariaLabel: "Siguiente",
-                    variant: "secondary",
-                    iconOnly: true,
-                    rightIcon: /* @__PURE__ */ jsx14(ChevronRightRounded_default, {}),
-                    onClick: handleNext,
-                    disabled: navState.isEnd
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx14(Box8, { sx: { justifySelf: "end" }, children: /* @__PURE__ */ jsx14(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx14(
-      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__ */ jsx14("div", { style: { alignSelf: "start" }, children: /* @__PURE__ */ jsx14(
-          OraculoGameSlide_default,
-          {
-            items: slide.items,
-            layout: slide.kind === "mosaic" ? "mosaic" : "grid",
-            onClick: (itm) => {
-              const game = items.find(
-                (g, idx) => {
-                  var _a;
-                  return ((_a = g.orden) != null ? _a : 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
-import { useRef as useRef4, useState as useState3 } from "react";
-import Stack4 from "@mui/material/Stack";
-import Box9 from "@mui/material/Box";
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
-var buildVirtualSlides = (games, mosaicFirst = true, gridSize = 4) => {
-  const baseItems = games.map((g, idx) => {
-    var _a, _b;
-    return {
-      id: (_a = g.orden) != null ? _a : idx,
-      imageUrl: (_b = g.logo) != null ? _b : ""
-    };
-  });
-  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
-}) => {
-  const carouselRef = useRef4(null);
-  const [navState, setNavState] = useState3({ 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__ */ jsx15("section", { children: /* @__PURE__ */ jsxs12(Stack4, { direction: "column", spacing: 2, useFlexGap: true, children: [
-    /* @__PURE__ */ jsxs12(
-      Box9,
-      {
-        sx: {
-          display: "grid",
-          gridTemplateColumns: "1fr auto auto",
-          alignItems: "center",
-          columnGap: 1.5,
-          rowGap: 1
-        },
-        children: [
-          /* @__PURE__ */ jsx15(
-            OraculoSectionTitle,
-            {
-              title,
-              iconUrl,
-              size: "md"
-            }
-          ),
-          /* @__PURE__ */ jsxs12(
-            Box9,
-            {
-              sx: {
-                display: "flex",
-                gap: 1,
-                justifyContent: "flex-end"
-              },
-              children: [
-                /* @__PURE__ */ jsx15(
-                  OraculoButton,
-                  {
-                    ariaLabel: "Anterior",
-                    variant: "secondary",
-                    iconOnly: true,
-                    leftIcon: /* @__PURE__ */ jsx15(ChevronLeftRounded_default, {}),
-                    onClick: handlePrev,
-                    disabled: navState.isStart
-                  }
-                ),
-                /* @__PURE__ */ jsx15(
-                  OraculoButton,
-                  {
-                    ariaLabel: "Siguiente",
-                    variant: "secondary",
-                    iconOnly: true,
-                    rightIcon: /* @__PURE__ */ jsx15(ChevronRightRounded_default, {}),
-                    onClick: handleNext,
-                    disabled: navState.isEnd
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx15(Box9, { sx: { justifySelf: "end" }, children: /* @__PURE__ */ jsx15(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx15(
-      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__ */ jsx15("div", { style: { alignSelf: "start" }, children: /* @__PURE__ */ jsx15(
-          OraculoGameSlide_default,
-          {
-            items: slide.items,
-            layout: slide.kind === "mosaic" ? "mosaic" : "grid",
-            onClick: (itm) => {
-              const game = items.find(
-                (g, idx) => {
-                  var _a;
-                  return ((_a = g.orden) != null ? _a : 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
-import { useRef as useRef5, useState as useState4 } from "react";
-import Box10 from "@mui/material/Box";
-import Typography4 from "@mui/material/Typography";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs13 } from "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 = useMediaQuery("(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 = useRef5(null);
-  const [navState, setNavState] = useState4({ isStart: true, isEnd: false });
-  const [activeIndex, setActiveIndex] = useState4(0);
-  if (isMobile) {
-    return /* @__PURE__ */ jsxs13(
-      Box10,
-      {
-        component: "section",
-        sx: {
-          ...sectionSx,
-          textAlign: "center"
-        },
-        children: [
-          (hl1 || hl2) && /* @__PURE__ */ jsxs13(Box10, { sx: headlineBaseSx, children: [
-            hl1 && /* @__PURE__ */ jsx16(Typography4, { component: "span", sx: hlTopSx, children: hl1 }),
-            hl2 && /* @__PURE__ */ jsxs13(Fragment3, { children: [
-              /* @__PURE__ */ jsx16("br", {}),
-              /* @__PURE__ */ jsx16(Typography4, { component: "span", sx: hlBottomSx, children: hl2 })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs13(Box10, { children: [
-            /* @__PURE__ */ jsx16(
-              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__ */ jsx16(OraculoWelcomeBanner_default, { ...it, onButtonClick: items[0].onButtonClick }),
-                onMove: ({ index, isStart, isEnd }) => {
-                  setNavState({ isStart, isEnd });
-                  setActiveIndex(index);
-                }
-              }
-            ),
-            showDots && /* @__PURE__ */ jsx16(
-              OraculoCarouselDots_default,
-              {
-                total: items.length,
-                active: activeIndex,
-                onSelect: (i) => {
-                  var _a;
-                  setActiveIndex(i);
-                  (_a = carouselRef.current) == null ? void 0 : _a.go(i);
-                }
-              }
-            )
-          ] })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx16(Box10, { component: "section", sx: sectionSx, children: /* @__PURE__ */ jsxs13(
-    Box10,
-    {
-      sx: {
-        maxWidth: 1200,
-        mx: 5,
-        px: 2,
-        display: "grid",
-        gridTemplateColumns: "200px auto",
-        alignItems: "center"
-      },
-      children: [
-        (hl1 || hl2) && /* @__PURE__ */ jsx16(
-          Box10,
-          {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "flex-start",
-              minHeight: "100%"
-            },
-            children: /* @__PURE__ */ jsxs13(
-              Box10,
-              {
-                sx: {
-                  ...headlineBaseSx,
-                  textAlign: "left",
-                  mb: 0
-                },
-                children: [
-                  hl1 && /* @__PURE__ */ jsx16(Typography4, { component: "span", sx: hlTopSx, children: hl1 }),
-                  hl2 && /* @__PURE__ */ jsxs13(Fragment3, { children: [
-                    /* @__PURE__ */ jsx16("br", {}),
-                    /* @__PURE__ */ jsx16(Typography4, { component: "span", sx: hlBottomSx, children: hl2 })
-                  ] })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx16(
-          Box10,
-          {
-            sx: {
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              flexWrap: "nowrap",
-              gap: 4
-            },
-            children: items.map((it, idx) => /* @__PURE__ */ jsx16(
-              OraculoWelcomeBanner_default,
-              {
-                onButtonClick: it.onButtonClick,
-                ...it
-              },
-              idx
-            ))
-          }
-        )
-      ]
-    }
-  ) });
-};
-var OraculoSeccionBonoBienvenida_default = OraculoSeccionBonoBienvenida;
-
-// src/organisms/OraculoSeccionClubOlimpo/OraculoSeccionClubOlimpo.tsx
-import { useLayoutEffect, useRef as useRef6 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var OraculoSeccionClubOlimpo = ({
-  className = "",
-  fullBleed = true,
-  items,
-  selectedIndex = 0,
-  ariaLabel
-}) => {
-  const rootRef = useRef6(null);
-  const bottomRef = useRef6(null);
-  if (!items) return null;
-  const safeIndex = Math.min(Math.max(selectedIndex, 0), 1);
-  const item = items;
-  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__ */ jsx17(
-    "section",
-    {
-      ref: rootRef,
-      className: rootClass,
-      "aria-label": ariaLabel || item.imgAlt || "Club Olimpo",
-      children: /* @__PURE__ */ jsx17("div", { ref: bottomRef, children: /* @__PURE__ */ jsx17(
-        OraculoClubOlimpoVisual_default,
-        {
-          text: item.text,
-          onClick: item.onClick,
-          imgAlt: item.imgAlt,
-          imgSrcMobile: item.images.mobile,
-          imgSrcDesktopBg: item.images.desktopBg,
-          imgSrcDesktopLogo: item.images.desktopLogo
-        }
-      ) })
-    }
-  );
-};
-var OraculoSeccionClubOlimpo_default = OraculoSeccionClubOlimpo;
-
-// src/templates/OraculoPageLanding.tsx
+  OraculoClubOlimpoVisual_default,
+  OraculoSeccionClubOlimpo_default
+} from "./chunk-2D7ZJMJV.mjs";
+import "./chunk-PZJSZNXJ.mjs";
+import {
+  OraculoGameRankCard,
+  OraculoSeccionTopJuegos
+} from "./chunk-DKP3HTEP.mjs";
+import {
+  OraculoLiveCasinoCard_default,
+  OraculoSeccionCasinoEnVivo_default
+} from "./chunk-PVY5Z3JS.mjs";
+import {
+  OraculoSeccionCasino_default
+} from "./chunk-AFPCFXMZ.mjs";
+import {
+  OraculoSeccionVirtuales_default
+} from "./chunk-YY5T37WR.mjs";
+import {
+  OraculoGameCard_default,
+  OraculoGameSlide_default
+} from "./chunk-AIT7B2J3.mjs";
+import {
+  OraculoSectionTitle
+} from "./chunk-5GTDKE3I.mjs";
+import {
+  OraculoCarouselDots_default,
+  OraculoSeccionBonoBienvenida_default,
+  OraculoWelcomeBanner_default
+} from "./chunk-WPLILXPP.mjs";
+import {
+  OraculoCarousel_default
+} from "./chunk-VHW77D2M.mjs";
 import {
-  Container,
-  Stack as Stack5
-} from "@mui/material";
-import "@splidejs/react-splide/css";
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
-function OraculoPageLanding({ props }) {
-  const clubOlimpoItems = [
-    {
-      text: "\xA1Canjea bonos, productos \n y las mejores experiencias!",
-      imgAlt: "Club Olimpo",
-      images: {
-        mobile: "/assets/img/home/ClubOlimpo/FondoMobile.png",
-        desktopBg: "/assets/img/home/ClubOlimpo/FondoDesktop.png",
-        desktopLogo: "/assets/img/home/ClubOlimpo/Logo.png"
-      },
-      onClick: () => console.log("CTA Club Olimpo")
-    }
-  ];
-  const listaDestacados = [
-    {
-      image: "/assets/img/home/Destacados/Banner01.png",
-      title: "Gol Seguro",
-      tags: "/destacados",
-      // aquí puedes usar la ruta que antes estaba en href
-      body: "",
-      summary_body: "",
-      summary_title: "",
-      groups_forbidden: [],
-      groups_allowed: [],
-      promotion: ""
-      // summary_image: "/lo-que-sea.png", // opcional
-    },
-    {
-      image: "/assets/img/home/Destacados/Banner02.png",
-      title: "Promo 2",
-      tags: "/destacados",
-      body: "",
-      summary_body: "",
-      summary_title: "",
-      groups_forbidden: [],
-      groups_allowed: [],
-      promotion: ""
-    },
-    {
-      image: "/assets/img/home/Destacados/Banner01.png",
-      title: "Gol Seguro",
-      tags: "/destacados",
-      body: "",
-      summary_body: "",
-      summary_title: "",
-      groups_forbidden: [],
-      groups_allowed: [],
-      promotion: ""
-    },
-    {
-      image: "/assets/img/home/Destacados/Banner02.png",
-      title: "Promo 2",
-      tags: "/destacados",
-      body: "",
-      summary_body: "",
-      summary_title: "",
-      groups_forbidden: [],
-      groups_allowed: [],
-      promotion: ""
-    }
-  ];
-  return /* @__PURE__ */ jsxs14(Container, { className: "oli-font", sx: { backgroundColor: "#121212", position: "relative", pb: 5 }, maxWidth: false, children: [
-    /* @__PURE__ */ jsx18(
-      OraculoSeccionBonoBienvenida_default,
-      {
-        headline: props.bonos.headline,
-        items: props.bonos.items
-      }
-    ),
-    /* @__PURE__ */ jsxs14(Stack5, { direction: "column", spacing: 12, useFlexGap: true, children: [
-      /* @__PURE__ */ jsx18(
-        OraculoSeccionTopJuegos,
-        {
-          items: props.topJuegos.items,
-          title: props.topJuegos.title,
-          iconUrl: props.topJuegos.iconUrl,
-          onCardClick: props.topJuegos.onCardClick
-        }
-      ),
-      /* @__PURE__ */ jsx18(
-        OraculoSeccionCasino_default,
-        {
-          items: props.casino.items,
-          title: props.casino.title,
-          iconUrl: props.casino.iconUrl,
-          onItemClick: props.casino.onItemClick,
-          onViewMore: props.casino.onViewMore
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx18(
-      OraculoSeccionCasinoEnVivo_default,
-      {
-        items: props.casinoEnVivo.items,
-        title: props.casinoEnVivo.title,
-        subtitle: props.casinoEnVivo.subtitle,
-        backgroundMobileUrl: props.casinoEnVivo.backgroundMobileUrl,
-        backgroundDesktopUrl: props.casinoEnVivo.backgroundDesktopUrl,
-        onCardClick: props.casinoEnVivo.onCardClick,
-        onViewMore: props.casinoEnVivo.onViewMore
-      }
-    ),
-    /* @__PURE__ */ jsxs14(Stack5, { direction: "column", spacing: 12, useFlexGap: true, children: [
-      /* @__PURE__ */ jsx18(
-        OraculoSeccionVirtuales_default,
-        {
-          items: props.virtuales.items,
-          title: props.virtuales.title,
-          iconUrl: props.virtuales.iconUrl,
-          onItemClick: props.virtuales.onItemClick,
-          onViewMore: props.virtuales.onViewMore
-        }
-      ),
-      /* @__PURE__ */ jsx18(
-        OraculoSeccionDestacados,
-        {
-          items: listaDestacados,
-          title: "Destacados",
-          iconUrl: "/assets/img/home/Destacados/starIcon.svg",
-          onViewMore: () => console.log("Ver m\xE1s clickeado")
-        }
-      ),
-      /* @__PURE__ */ jsx18(OraculoSeccionClubOlimpo_default, { items: props.clubOlimpo })
-    ] })
-  ] });
-}
+  OraculoButton
+} from "./chunk-IJQLK4NO.mjs";
+import "./chunk-VIPLL6XT.mjs";
 export {
   OraculoButton,
   OraculoCarousel_default as OraculoCarousel,
@@ -1825,6 +51,7 @@ export {
   OraculoGameSlide_default as OraculoGameSlide,
   OraculoLiveCasinoCard_default as OraculoLiveCasinoCard,
   OraculoPageLanding,
+  OraculoPageLandingPreview_default as OraculoPageLandingPreview,
   OraculoSeccionBonoBienvenida_default as OraculoSeccionBonoBienvenida,
   OraculoSeccionCasino_default as OraculoSeccionCasino,
   OraculoSeccionCasinoEnVivo_default as OraculoSeccionCasinoEnVivo,