:root {
  --bg: #050912;
  --panel: #0c1423;
  --text: #f7f5ef;
  --muted: #b7becb;
  --yellow: #ffc62b;
  --cyan: #20c8f4;
  --pink: #ff3f70;
  --line: rgba(255,255,255,.12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 20; height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; background: rgba(5,9,18,.76); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.07); }
.brand-mark { font-size: 2rem; font-weight: 950; letter-spacing: -.08em; text-shadow: 3px 0 var(--pink), -3px 0 var(--cyan); }
.nav { display: flex; gap: 28px; }
.nav a { color: #dce1ea; padding: 26px 0 8px; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a.active { color: white; border-color: var(--yellow); }
.menu-toggle { display: none; background: none; border: 0; color: white; font-size: 1.7rem; }
.hero { min-height: 760px; position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -3; background: url("assets/adda-hero.png") center/cover no-repeat; }
.hero-overlay { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(3,7,15,.78), rgba(3,7,15,.48) 45%, rgba(3,7,15,.58)); }
.hero-content { width: min(680px, 90%); text-align: center; padding-top: 80px; }
.eyebrow, .section-kicker { color: var(--yellow); font-weight: 900; letter-spacing: .12em; font-size: .78rem; }
.hero h1 { margin: 12px 0 0; font-size: clamp(5rem, 15vw, 9rem); line-height: .82; letter-spacing: -.09em; font-weight: 950; text-shadow: 5px 0 var(--pink), -5px 0 var(--cyan), 0 10px 30px rgba(0,0,0,.5); }
.hero-title { font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 900; margin: 22px 0 8px; }
.hero-title span { color: var(--yellow); }
.hero-text { color: #eef1f5; line-height: 1.65; font-size: 1.05rem; max-width: 560px; margin: 0 auto 28px; }
.hero-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.btn { padding: 14px 24px; border-radius: 999px; font-weight: 900; border: 2px solid white; transition: transform .2s, filter .2s; }
.btn:hover { transform: translateY(-3px); filter: brightness(1.08); }
.btn-primary { background: var(--yellow); color: #111; border-color: var(--yellow); }
.btn-secondary { background: rgba(5,9,18,.72); }
.highlights { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); background: #07101d; }
.highlights article { padding: 34px 20px; text-align: center; border-right: 1px solid var(--line); }
.highlights article:last-child { border-right: 0; }
.highlights span { font-size: 2rem; }
.highlights h2 { font-size: 1rem; margin: 10px 0 4px; }
.highlights p { color: var(--muted); font-size: .85rem; margin: 0; }
.cards-section, .catalog-preview, .local-section { width: min(1180px, 90%); margin: auto; }
.cards-section { padding: 90px 0; }
.section-heading { margin-bottom: 28px; }
.section-heading h2, .catalog-preview h2, .local-section h2 { font-size: clamp(2rem, 5vw, 3.6rem); margin: 10px 0 14px; line-height: 1.02; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card { min-height: 430px; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--panel); transition: transform .25s, border-color .25s; }
.feature-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.35); }
.card-image { height: 235px; display: grid; place-items: center; font-size: 5rem; background: radial-gradient(circle at 50% 40%, rgba(255,198,43,.24), transparent 55%), #121b2b; }
.games-placeholder { background: radial-gradient(circle at 50% 40%, rgba(32,200,244,.22), transparent 55%), #0c1929; }
.local-placeholder { background: radial-gradient(circle at 50% 40%, rgba(255,63,112,.22), transparent 55%), #1a1221; }
.card-content { padding: 24px; }
.card-content > span { color: var(--muted); font-size: .8rem; }
.card-content h3 { font-size: 2rem; margin: 8px 0; }
.card-content p { color: var(--muted); min-height: 44px; }
.card-content strong { color: var(--yellow); }
.catalog-preview { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: center; padding: 80px 0; border-top: 1px solid var(--line); }
.catalog-preview > div:first-child p, .local-copy p { color: var(--muted); line-height: 1.7; max-width: 620px; }
.mini-items, .game-list { display: grid; gap: 14px; }
.mini-items > div, .game-item { display: grid; grid-template-columns: 58px 1fr; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.mini-items span, .game-item span { grid-row: span 2; font-size: 2rem; }
.mini-items b, .game-item b { font-size: 1.05rem; }
.mini-items small, .game-item small { color: var(--muted); margin-top: 4px; }
.games-preview { border-top: 0; }
.local-section { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 100px 0; }
.local-photo { min-height: 330px; display: grid; place-items: center; text-align: center; border: 1px dashed rgba(255,255,255,.25); border-radius: 24px; background: linear-gradient(135deg, #111b2c, #0a1020); font-size: 4rem; }
.local-photo span { display: block; font-size: 1rem; color: var(--muted); }
footer { padding: 55px 5vw; background: #030711; border-top: 1px solid var(--line); text-align: center; }
.footer-brand { font-size: 3rem; font-weight: 950; text-shadow: 3px 0 var(--pink), -3px 0 var(--cyan); }
footer p { color: var(--muted); }
.footer-info { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; color: #d8dce4; margin-top: 22px; }

/* Catálogo */
.center { text-align: center; }
.section-heading.center p { color: var(--muted); margin: 0 auto; }
.catalog-full { width: min(1180px, 90%); margin: auto; padding: 92px 0; border-top: 1px solid var(--line); }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 36px; }
.product-card { overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(145deg, #0e1727, #08101d); box-shadow: 0 20px 55px rgba(0,0,0,.22); transition: transform .25s, border-color .25s; }
.product-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.35); }
.product-art, .product-photo { height: 330px; display: grid; place-items: center; overflow: hidden; background: #101a2b; }
.product-art { font-size: 6rem; letter-spacing: -1rem; }
.empanadas-art { background: radial-gradient(circle, rgba(255,198,43,.25), transparent 55%), #26190b; }
.pizza-art { background: radial-gradient(circle, rgba(255,63,112,.22), transparent 55%), #211019; }
.product-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-body { padding: 26px; }
.tag { display: inline-block; color: var(--yellow); font-size: .72rem; font-weight: 950; letter-spacing: .12em; padding: 6px 10px; border: 1px solid currentColor; border-radius: 999px; }
.tag.cyan { color: var(--cyan); }
.tag.pink { color: var(--pink); }
.product-body h3 { font-size: 2.4rem; margin: 12px 0 8px; }
.product-body p { color: var(--muted); line-height: 1.65; min-height: 52px; }
.product-meta, .game-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: #e6e9ee; font-size: .86rem; }
.product-meta b { color: var(--yellow); }
.game-meta { justify-content: flex-start; color: #d7dce4; }
.game-button { margin-top: 22px; border: 0; border-radius: 999px; padding: 12px 20px; background: var(--cyan); color: #04101a; font-weight: 950; cursor: pointer; }
.pink-button { background: var(--pink); color: white; }
.games-catalog { border-top: 0; }
.game-note { margin-top: 26px; display: flex; gap: 16px; align-items: center; padding: 18px 22px; border: 1px dashed rgba(255,255,255,.22); border-radius: 18px; background: rgba(255,255,255,.025); }
.game-note > span { font-size: 2rem; }
.game-note strong { display: block; margin-bottom: 4px; }
.game-note p { color: var(--muted); margin: 0; font-size: .9rem; }

/* Carruseles */
.catalog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.catalog-head .section-heading { margin-bottom: 0; }
.catalog-head .section-heading p { color: var(--muted); margin: 0; }
.carousel-controls { display: flex; gap: 10px; flex-shrink: 0; }
.carousel-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: #0b1625; color: white; font-size: 1.5rem; cursor: pointer; transition: transform .2s, border-color .2s, background .2s; }
.carousel-arrow:hover { transform: translateY(-2px); border-color: var(--yellow); background: #111e31; }
.catalog-carousel { display: flex; gap: 24px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 36px 4px 18px; scrollbar-width: thin; scrollbar-color: rgba(255,198,43,.7) transparent; }
.catalog-carousel::-webkit-scrollbar { height: 8px; }
.catalog-carousel::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 999px; }
.catalog-carousel::-webkit-scrollbar-thumb { background: rgba(255,198,43,.7); border-radius: 999px; }
.catalog-carousel .product-card { flex: 0 0 360px; scroll-snap-align: start; }
.product-photo { height: 280px; padding: 20px; background: radial-gradient(circle at 50% 45%, rgba(32,200,244,.12), transparent 65%), #0a1220; }
.product-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 12px; }
.game-product .product-photo img { transform: scale(.86); }
.coming-card { border-style: dashed; }
.coming-art { height: 280px; display: grid; place-items: center; font-size: 6rem; background: radial-gradient(circle, rgba(255,198,43,.18), transparent 55%), #11192a; }
.carousel-hint { text-align: center; color: #7f8999; font-size: .78rem; margin-top: 4px; }

/* Corrección del catálogo actual de index.html:
   Monopoly y T.E.G. usan .catalog-card/.catalog-image/.game-image.
   Se fija un área idéntica y se contienen las imágenes para evitar que
   Monopoly vuelva a aparecer gigante. */
.catalog-card { overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(145deg, #0e1727, #08101d); box-shadow: 0 20px 55px rgba(0,0,0,.22); flex: 0 0 360px; scroll-snap-align: start; }
.catalog-card .catalog-image { height: 280px; padding: 20px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(32,200,244,.12), transparent 65%), #0a1220; }
.catalog-card .catalog-image img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; border-radius: 12px; }
.catalog-card.game-card .catalog-image img { width: 78%; height: 82%; object-fit: contain; transform: none; }
.catalog-card .catalog-body { padding: 26px; }
.catalog-card .catalog-body h3 { margin: 12px 0 8px; font-size: 2rem; }
.catalog-card .catalog-body p { color: var(--muted); line-height: 1.6; min-height: 52px; }
.catalog-card .card-tag { display: inline-block; color: var(--yellow); font-size: .72rem; font-weight: 950; letter-spacing: .12em; padding: 6px 10px; border: 1px solid currentColor; border-radius: 999px; }
.catalog-card .price-placeholder { display: block; margin-top: 18px; color: var(--yellow); font-size: 1.1rem; }
.catalog-card .game-meta { margin-top: 18px; padding-top: 18px; }
.catalog-card .game-button { margin-top: 18px; }
.catalog-card.coming-soon .catalog-image-placeholder { height: 280px; display: grid; place-items: center; font-size: 6rem; background: radial-gradient(circle, rgba(255,198,43,.18), transparent 55%), #11192a; }

/* La estructura que usa actualmente el index */
.catalog-window { overflow: hidden; }
.catalog-track { display: flex; gap: 24px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 36px 4px 18px; scrollbar-width: thin; scrollbar-color: rgba(255,198,43,.7) transparent; }
.catalog-track::-webkit-scrollbar { height: 8px; }
.catalog-track::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 999px; }
.catalog-track::-webkit-scrollbar-thumb { background: rgba(255,198,43,.7); border-radius: 999px; }
.catalog-track .catalog-card { flex: 0 0 360px; }
.catalog-controls { display: flex; gap: 10px; flex-shrink: 0; }
.catalog-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: #0b1625; color: white; font-size: 1.5rem; cursor: pointer; }

@media (max-width: 800px) {
  .site-header { height: 66px; }
  .menu-toggle { display: block; }
  .nav { display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 10px 5vw 20px; background: #07101d; }
  .nav.open { display: flex; }
  .nav a { padding: 13px 0; }
  .hero { min-height: 720px; }
  .hero-content { padding-top: 70px; }
  .highlights { grid-template-columns: repeat(2, 1fr); }
  .highlights article:nth-child(2) { border-right: 0; }
  .cards { grid-template-columns: 1fr; }
  .catalog-preview, .local-section { grid-template-columns: 1fr; gap: 35px; padding: 65px 0; }
  .product-grid { grid-template-columns: 1fr; }
  .product-art, .product-photo { height: 270px; }
  .catalog-full { padding: 65px 0; }
  .catalog-head { align-items: flex-start; }
  .carousel-controls { margin-top: 4px; }
  .catalog-carousel, .catalog-track { gap: 16px; padding-top: 28px; }
  .catalog-carousel .product-card, .catalog-track .catalog-card { flex-basis: min(84vw, 360px); }
  .product-photo, .coming-art, .catalog-card .catalog-image, .catalog-card.coming-soon .catalog-image-placeholder { height: 250px; }
  .catalog-card.game-card .catalog-image img { width: 72%; height: 78%; }
}
