:root {
  color-scheme: light;
  --es-bg: #f8f3e8;
  --es-bg-soft: #fff8ed;
  --es-bg-tech: #eef4ff;
  --es-surface: #fffdf7;
  --es-surface-2: #fff7e6;
  --es-surface-glass: rgba(255, 253, 247, .88);
  --es-ink: #0f172a;
  --es-text: #1e293b;
  --es-muted: #64748b;
  --es-soft: #94a3b8;
  --es-line: rgba(148, 163, 184, .28);
  --es-line-warm: rgba(245, 158, 11, .30);
  --es-blue: #2563eb;
  --es-blue-2: #0ea5e9;
  --es-violet: #7c3aed;
  --es-gold: #f59e0b;
  --es-orange: #f97316;
  --es-coral: #fb7185;
  --es-green: #16a34a;
  --es-red: #dc2626;
  --es-radius-lg: 18px;
  --es-radius-xl: 28px;
  --es-shadow-soft: 0 18px 45px rgba(15, 23, 42, .10);
  --es-shadow-card: 0 10px 30px rgba(15, 23, 42, .08);
  --es-shadow-glow: 0 22px 60px rgba(37, 99, 235, .16);
}

html.dark {
  color-scheme: dark;
  --es-bg: #050816;
  --es-bg-soft: #0b1220;
  --es-bg-tech: #101827;
  --es-surface: rgba(15, 23, 42, .88);
  --es-surface-2: rgba(2, 6, 23, .92);
  --es-surface-glass: rgba(15, 23, 42, .78);
  --es-ink: #f8fafc;
  --es-text: #e2e8f0;
  --es-muted: #94a3b8;
  --es-soft: #64748b;
  --es-line: rgba(255, 255, 255, .10);
  --es-line-warm: rgba(245, 158, 11, .22);
  --es-blue: #60a5fa;
  --es-blue-2: #38bdf8;
  --es-violet: #a78bfa;
  --es-gold: #fbbf24;
  --es-orange: #fb923c;
  --es-coral: #fb7185;
  --es-green: #4ade80;
  --es-red: #f87171;
  --es-shadow-soft: 0 26px 90px rgba(0, 0, 0, .45);
  --es-shadow-card: 0 18px 42px rgba(0, 0, 0, .32);
  --es-shadow-glow: 0 22px 60px rgba(96, 165, 250, .16);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--es-bg);
  scroll-padding-top: 96px;
}

body.light-theme,
html:not(.dark) body {
  background:
    radial-gradient(circle at 12% 8%, rgba(245, 158, 11, .16), transparent 26rem),
    radial-gradient(circle at 86% 18%, rgba(37, 99, 235, .12), transparent 24rem),
    linear-gradient(180deg, var(--es-bg) 0%, #fffaf1 48%, #f3f7ff 100%) !important;
  color: var(--es-text) !important;
}

body.dark-theme,
html.dark body {
  background:
    radial-gradient(circle at 18% 12%, rgba(96, 165, 250, .20), transparent 28rem),
    radial-gradient(circle at 84% 20%, rgba(251, 146, 60, .12), transparent 24rem),
    linear-gradient(180deg, #050816 0%, #0b1220 58%, #020617 100%) !important;
  color: var(--es-text) !important;
}

body {
  overflow-x: hidden;
  letter-spacing: 0;
}

:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .35);
  outline-offset: 3px;
}

img {
  max-width: 100%;
}

.glass-header,
header {
  background: var(--es-surface-glass) !important;
  border-bottom: 1px solid var(--es-line) !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .08);
  backdrop-filter: blur(20px);
}

html.dark .glass-header,
html.dark header {
  box-shadow: 0 14px 42px rgba(0, 0, 0, .34);
}

.container {
  width: min(100% - 2rem, 1180px);
}

.product-card,
.es-game-card,
.mini-game-card,
#cartDrawer,
#checkoutModalContent,
#modalContent,
section .bg-white,
section [class*="dark:bg-brand-card"] {
  border-color: var(--es-line) !important;
}

.product-card {
  border-radius: 22px !important;
  background: linear-gradient(180deg, var(--es-surface) 0%, rgba(255, 255, 255, .94) 100%) !important;
  box-shadow: var(--es-shadow-card) !important;
  overflow: hidden !important;
  cursor: pointer;
}

html.dark .product-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, .92) 0%, rgba(2, 6, 23, .88) 100%) !important;
}

.product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--es-shadow-glow) !important;
}

.product-card:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .42);
  outline-offset: 4px;
}

.product-card img,
#modalContent img,
#checkoutModalContent img {
  object-fit: cover;
}

#filtros {
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

#filtros::-webkit-scrollbar {
  display: none;
}

.filter-btn,
.btn-interactivo-filtro button {
  border-radius: 999px !important;
  min-height: 44px;
}

input,
select,
textarea {
  background: var(--es-surface) !important;
  color: var(--es-text) !important;
  border-color: var(--es-line) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--es-muted) !important;
}

#cartDrawer {
  background: var(--es-surface) !important;
  color: var(--es-text) !important;
  transform: translateX(100%);
}

#cartDrawer.translate-x-0 {
  transform: translateX(0);
}

#cartDrawer.translate-x-full {
  transform: translateX(100%);
}

#checkoutModalContent,
#modalContent {
  background: var(--es-surface) !important;
  color: var(--es-text) !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 24px !important;
}

#checkoutModalContent,
#modalContent {
  max-height: min(90vh, 860px);
}

#checkoutModalContent p,
#checkoutModalContent li,
#modalContent p,
#modalContent li {
  color: var(--es-muted);
}

.es-minijuegos-section {
  background:
    radial-gradient(circle at 18% 20%, rgba(249, 115, 22, .16), transparent 22rem),
    radial-gradient(circle at 85% 12%, rgba(124, 58, 237, .12), transparent 22rem),
    linear-gradient(180deg, rgba(255, 248, 237, .94), rgba(238, 244, 255, .86)) !important;
  border-block: 1px solid var(--es-line);
}

html.dark .es-minijuegos-section {
  background:
    radial-gradient(circle at 18% 20%, rgba(251, 146, 60, .14), transparent 24rem),
    radial-gradient(circle at 85% 12%, rgba(167, 139, 250, .15), transparent 22rem),
    linear-gradient(180deg, #0b1220, #050816) !important;
}

.es-minijuegos-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.es-game-card {
  position: relative;
  min-height: 300px;
  padding: 22px;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 253, 247, .96), rgba(255, 248, 237, .88)) !important;
  box-shadow: var(--es-shadow-card);
}

html.dark .es-game-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, .92), rgba(2, 6, 23, .9)) !important;
}

.es-game-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  opacity: .12;
  pointer-events: none;
  background: radial-gradient(circle at 30% 10%, currentColor, transparent 18rem);
}

.es-game-card--fiesta {
  color: var(--es-orange);
  border-color: rgba(249, 115, 22, .40) !important;
}

.es-game-card--fiesta::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .35;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 20%, rgba(251, 113, 133, .35) 0 6px, transparent 7px),
    radial-gradient(circle at 78% 22%, rgba(245, 158, 11, .38) 0 5px, transparent 6px),
    radial-gradient(circle at 60% 72%, rgba(124, 58, 237, .25) 0 4px, transparent 5px);
  background-size: 120px 120px;
}

.es-game-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.es-game-card__badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.es-game-card__badge--fiesta {
  background: rgba(249, 115, 22, .13);
  color: #9a3412;
  border: 1px solid rgba(249, 115, 22, .25);
}

html.dark .es-game-card__badge--fiesta {
  color: #fed7aa;
  background: rgba(249, 115, 22, .16);
}

.es-game-card__actions {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.es-game-card__icon-wrap--fiesta {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .65), transparent 32%),
    linear-gradient(135deg, rgba(249, 115, 22, .24), rgba(251, 113, 133, .18), rgba(124, 58, 237, .16));
  color: var(--es-orange);
  box-shadow: 0 14px 34px rgba(249, 115, 22, .20);
}

.es-game-card__actions .es-game-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 14px;
  border-radius: 14px;
  font-weight: 950;
  text-align: center;
  text-decoration: none;
}

.es-game-card__btn--fiesta {
  justify-content: center;
  background: linear-gradient(135deg, var(--es-orange), var(--es-coral), var(--es-violet));
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(249, 115, 22, .25);
}

.es-game-card__btn--demo {
  justify-content: center;
  background: rgba(22, 163, 74, .10);
  color: var(--es-green) !important;
  border: 1px solid rgba(22, 163, 74, .25);
}

.es-floating-actions {
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
}

.es-product-page body,
body.light-theme {
  min-height: 100vh;
}

.es-home-fab {
  background: var(--es-surface) !important;
  color: var(--es-text) !important;
  border: 1px solid var(--es-line);
  box-shadow: var(--es-shadow-card);
}

.hero-empanada-bubble,
.es-hero-readable-bubble {
  background: rgba(255, 253, 247, .96) !important;
  background-color: rgba(255, 253, 247, .96) !important;
  background-image: none !important;
  color: #0f172a !important;
  border: 1px solid rgba(245, 158, 11, .34) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .14) !important;
  backdrop-filter: blur(16px);
}

html:not(.dark) #inicio .hero-empanada-bubble.es-hero-readable-bubble[class*="rotate-6"] {
  background: rgba(255, 253, 247, .96) !important;
  background-color: rgba(255, 253, 247, .96) !important;
  background-image: none !important;
  color: #0f172a !important;
  border: 1px solid rgba(245, 158, 11, .34) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .14) !important;
}

#hero-empanada-text {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
  text-shadow: none !important;
}

html.dark .hero-empanada-bubble,
html.dark .es-hero-readable-bubble {
  background: rgba(15, 23, 42, .90) !important;
  background-color: rgba(15, 23, 42, .90) !important;
  background-image: none !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .38) !important;
}

html.dark #hero-empanada-text {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

html.dark .hero-empanada-bubble #hero-empanada-emoji {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .35));
}

@media (max-width: 1024px) {
  .es-minijuegos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 82px;
  }

  .container {
    width: min(100% - 1rem, 1180px);
  }

  .es-minijuegos-grid {
    grid-template-columns: 1fr;
  }

  .es-game-card {
    min-height: 250px;
    padding: 18px;
    border-radius: 18px;
  }

  .fixed.bottom-6.right-6,
  .fixed.right-6.bottom-6 {
    right: 12px !important;
    bottom: 12px !important;
    gap: 10px !important;
  }

  .fixed.bottom-6.right-6 button,
  .fixed.bottom-6.right-6 a {
    width: 48px;
    height: 48px;
    padding: 0 !important;
  }

  #cartDrawer {
    width: 100% !important;
    max-width: 100vw;
  }

  #checkoutModalContent,
  #modalContent {
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 24px);
    border-radius: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}