/* =====================================================================
   PixelFrameStudio — diseño "cristal líquido" (estilo iOS).
   Idea: una construccion del estudio es el fondo de pantalla; todo lo demas
   son capas de cristal flotando encima. Jerarquia del cristal:
     - cromo (barra, botones, pestanas): cristal claro, refracta el fondo;
     - hojas (secciones, ventanas): cristal esmerilado, mas opaco, para leer comodo.
   La pagina clasica sigue en clasica.html (style.css y compania).
   ===================================================================== */

:root {
  color-scheme: light;
  /* Paleta */
  --laguna: #0096b8;        /* acento: botones, foco, enlaces activos */
  --laguna-ink: #006f8a;    /* acento para texto pequeno (contraste) */
  --abismo: #0b2233;        /* texto principal en claro */
  --espuma: #f4fbfd;        /* brillos y texto en oscuro */
  --glow: #ffb23f;          /* piedra luminosa: precios y ofertas */
  --blurple: #5865f2;       /* Discord */
  --noche: #07131f;         /* base del modo oscuro */

  --ink: var(--abismo);
  --muted: #34505f;
  --faint: #557080;
  --hairline: rgba(11, 34, 51, .12);

  /* Capas de cristal */
  --chrome-fill: rgba(255, 255, 255, .34);
  --plate-fill: rgba(255, 255, 255, .7);
  --sheet-fill: rgba(244, 251, 253, .74);
  --sheet-fill-strong: rgba(246, 252, 254, .86);
  --rim-hi: rgba(255, 255, 255, .95);
  --rim-lo: rgba(255, 255, 255, .28);
  --rim: inset 0 1px 0 var(--rim-hi), inset 0 -1px 0 var(--rim-lo), inset 0 0 0 1px rgba(255, 255, 255, .32);
  --lift: 0 22px 54px -26px rgba(2, 54, 74, .55), 0 2px 8px -4px rgba(2, 54, 74, .25);
  --chrome-blur: blur(22px) saturate(1.9) brightness(1.04);
  --sheet-blur: blur(36px) saturate(1.7);

  /* Radios concentricos: interior = exterior - margen */
  --r-sheet: 40px;
  --r-tile: 28px;
  --r-plate: 18px;

  --font-display: 'Funnel Display', ui-rounded, system-ui, sans-serif;
  --font-ui: 'Funnel Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --page: min(1220px, calc(100% - 40px));
  --dock-h: 64px;
  --spring: cubic-bezier(.3, 1.55, .45, 1);
  --ease: cubic-bezier(.2, .75, .2, 1);
}
:root[data-theme=dark] {
  color-scheme: dark;
  --laguna: #1fb8d6;
  --laguna-ink: #7fdcef;
  --ink: #eef6fb;
  --muted: #a9c0cd;
  --faint: #86a1b1;
  --hairline: rgba(255, 255, 255, .1);
  --chrome-fill: rgba(16, 30, 44, .44);
  --plate-fill: rgba(10, 22, 34, .6);
  --sheet-fill: rgba(8, 19, 31, .7);
  --sheet-fill-strong: rgba(9, 20, 32, .84);
  --rim-hi: rgba(255, 255, 255, .34);
  --rim-lo: rgba(255, 255, 255, .06);
  --rim: inset 0 1px 0 var(--rim-hi), inset 0 -1px 0 var(--rim-lo), inset 0 0 0 1px rgba(255, 255, 255, .09);
  --lift: 0 22px 54px -24px rgba(0, 0, 0, .75), 0 2px 8px -4px rgba(0, 0, 0, .5);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--dock-h) + 32px); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: #bfe6ee; font: 400 17px/1.55 var(--font-ui); -webkit-font-smoothing: antialiased; }
:root[data-theme=dark] body { background: var(--noche); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }
[hidden] { display: none !important; }
body.viewer-open { overflow: hidden; }
:focus-visible { outline: 3px solid var(--laguna); outline-offset: 3px; }
.skip { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--sheet-fill-strong); color: var(--ink); font-weight: 600; }
.skip:focus { top: calc(var(--dock-h) + 24px); }

/* ---------- Fondo de pantalla ---------- */
.wallpaper { position: fixed; inset: -3vmax; z-index: -1; background: #8fd2e0 url(gallery/work-02.webp) center 40% / cover no-repeat; transform: scale(1.04); }
.wallpaper::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(230, 248, 252, 0) 30%, rgba(196, 232, 240, .35) 100%); }
:root[data-theme=dark] .wallpaper { filter: brightness(.5) saturate(1.15); }
:root[data-theme=dark] .wallpaper::after { background: linear-gradient(180deg, rgba(4, 12, 22, .25), rgba(4, 12, 22, .72)); }
/* Un solo momento de entrada: el fondo se asienta cuando termina la intro (o al cargar si no hay intro). */
html:not(.intro-pending) .wallpaper { animation: wallpaper-settle 1.6s var(--ease) both; }
@keyframes wallpaper-settle { from { transform: scale(1.13); filter: blur(14px); } }
:root[data-theme=dark]:not(.intro-pending) .wallpaper { animation-name: wallpaper-settle-dark; }
@keyframes wallpaper-settle-dark { from { transform: scale(1.13); filter: blur(14px) brightness(.5); } to { filter: brightness(.5) saturate(1.15); } }

/* ---------- Superficies de cristal ---------- */
.dock, .tool-toggle, .specialties li, .brand-stamp, .image-label, .button-clear, .tabbar, .site-footer, .product-close, .tile-caption, .seasonal-banner {
  background: var(--chrome-fill);
  -webkit-backdrop-filter: var(--chrome-blur);
  backdrop-filter: var(--chrome-blur);
  box-shadow: var(--rim), var(--lift);
}
.sheet, #product-viewer {
  background: var(--sheet-fill);
  -webkit-backdrop-filter: var(--sheet-blur);
  backdrop-filter: var(--sheet-blur);
  box-shadow: var(--rim), var(--lift);
}

/* ---------- Barra flotante ---------- */
.dock { position: fixed; z-index: 60; top: max(12px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; width: min(1220px, calc(100% - 24px)); height: var(--dock-h); display: flex; align-items: center; gap: 12px; padding: 0 10px 0 12px; border-radius: 999px; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 19px/1 var(--font-display); letter-spacing: -.02em; white-space: nowrap; }
.brand img { display: block; border-radius: 10px; }
.brand .studio { font-weight: 500; color: var(--muted); }
.dock-nav { display: flex; gap: 2px; margin-inline: auto; }
.dock-nav a { padding: 10px 17px; border-radius: 999px; font: 600 15px/1 var(--font-ui); transition: background-color .25s, box-shadow .25s; }
.dock-nav a:hover { background: rgba(255, 255, 255, .32); }
:root[data-theme=dark] .dock-nav a:hover { background: rgba(255, 255, 255, .08); }
.dock-nav a[aria-current=true] { background: var(--plate-fill); box-shadow: var(--rim); color: var(--laguna-ink); }
.header-tools { display: flex; gap: 6px; margin-left: auto; }
.dock-nav + .header-tools { margin-left: 0; }
.tool-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; --lift: none; transition: transform .45s var(--spring); }
.tool-toggle:active { transform: scale(.88); }
.tool-toggle svg { grid-area: 1 / 1; display: block; transition: opacity .25s, transform .35s var(--ease); }
.flag { width: 24px; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.icon-moon, .icon-sun { width: 20px; height: 20px; }
#lang-toggle .flag-us, #lang-toggle[data-current=es] .flag-es { opacity: 0; transform: scale(.6) rotate(-8deg); }
#lang-toggle[data-current=es] .flag-us { opacity: 1; transform: none; }
#theme-toggle .icon-sun, :root[data-theme=dark] #theme-toggle .icon-moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme=dark] #theme-toggle .icon-sun { opacity: 1; transform: none; }

main { padding-top: calc(var(--dock-h) + 40px); }

/* ---------- Botones ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer; text-align: center; font: 600 16px/1.15 var(--font-ui); color: #fff;
  background: linear-gradient(180deg, color-mix(in oklab, var(--laguna) 80%, white), var(--laguna));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 8px rgba(0, 40, 60, .22), 0 12px 26px -12px color-mix(in oklab, var(--laguna) 70%, black);
  transition: transform .45s var(--spring), filter .25s; }
.button:hover { filter: brightness(1.07) saturate(1.1); }
.button:active { transform: scale(.95); }
.button-clear { color: var(--ink); background: var(--chrome-fill); }
.button-discord { background: linear-gradient(180deg, #7682ff, var(--blurple)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 8px rgba(20, 20, 90, .25), 0 12px 26px -12px rgba(50, 58, 180, .7); }

/* ---------- Portada: la lente ---------- */
.hero { position: relative; width: var(--page); margin: 0 auto; min-height: min(84vh, 820px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: center; padding-bottom: 36px; }
.lens { position: relative; padding: clamp(28px, 4.2vw, 60px); border-radius: 52px; background: rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(14px) saturate(1.8) brightness(1.05); backdrop-filter: blur(14px) saturate(1.8) brightness(1.05); box-shadow: var(--rim), inset 0 0 40px rgba(255, 255, 255, .25), var(--lift); }
:root[data-theme=dark] .lens { background: rgba(10, 24, 38, .42); box-shadow: var(--rim), inset 0 0 40px rgba(120, 220, 240, .06), var(--lift); }
/* Brillo especular: luz de arriba a la izquierda y reflejo suave abajo a la derecha. */
.lens::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(90% 70% at 12% 0%, rgba(255, 255, 255, .5), transparent 55%), radial-gradient(60% 50% at 100% 100%, rgba(255, 255, 255, .22), transparent 60%); mix-blend-mode: soft-light; }
.lens > * { position: relative; }
html:not(.intro-pending) .lens { animation: lens-in 1.1s .2s var(--ease) both; }
@keyframes lens-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.kicker { margin: 0 0 14px; font: 650 15px/1.3 var(--font-ui); color: var(--laguna-ink); }
h1 { margin: 0 0 22px; font: 750 clamp(46px, 6.6vw, 96px)/.94 var(--font-display); letter-spacing: -.04em; text-wrap: balance; }
h1 span { display: block; }
.intro { max-width: 34ch; margin-bottom: 0; font: 450 clamp(18px, 1.6vw, 21px)/1.5 var(--font-ui); color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.signature { margin: 30px 0 0; font: 500 14px/1.4 var(--font-ui); color: var(--faint); }

/* Widget de foto */
.hero-visual { position: relative; margin: 0; }
.image-shell { position: relative; aspect-ratio: 4 / 5; max-height: 72vh; margin-left: auto; border-radius: 46px; overflow: hidden; background: #6ab9d0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 34px 80px -30px rgba(2, 44, 64, .65); }
.castle { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hero-visual:hover .castle { transform: scale(1.04); }
.image-label { position: absolute; top: 14px; left: 14px; padding: 9px 15px; border-radius: 999px; font: 600 13px/1 var(--font-ui); color: #fff; background: rgba(255, 255, 255, .16); --lift: none; }
.brand-stamp { position: absolute; left: -26px; bottom: 56px; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 26px; }
.brand-stamp img { display: block; border-radius: 14px; }
.brand-stamp strong { display: block; font: 700 16px/1.2 var(--font-display); letter-spacing: -.01em; }
.brand-stamp span { font: 500 13px/1.3 var(--font-ui); color: var(--muted); }
.hero-visual figcaption { position: absolute; right: 14px; bottom: 14px; padding: 8px 14px; border-radius: 999px; font: 600 12px/1 var(--font-ui); color: #fff; background: rgba(4, 30, 44, .32); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* Pastillas de especialidades */
.specialties { width: var(--page); margin: 0 auto 40px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.specialties li { padding: 12px 22px; border-radius: 999px; font: 600 15px/1 var(--font-ui); --lift: 0 10px 24px -16px rgba(2, 54, 74, .5); }

/* ---------- Hojas (secciones) ---------- */
.sheet { position: relative; width: var(--page); margin: 0 auto 28px; padding: clamp(24px, 4vw, 52px); border-radius: var(--r-sheet); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 18px 48px; align-items: end; margin-bottom: 32px; }
h2 { margin: 0; font: 750 clamp(34px, 4.4vw, 60px)/1 var(--font-display); letter-spacing: -.035em; text-wrap: balance; }
.section-head > p { margin: 0; font: 450 17px/1.5 var(--font-ui); color: var(--muted); }
.dungeon-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 12px 48px; align-items: end; margin: 44px 0 20px; padding-top: 30px; border-top: 1px solid var(--hairline); }
.dungeon-head h3 { margin: 0; font: 750 clamp(26px, 2.6vw, 36px)/1.05 var(--font-display); letter-spacing: -.03em; }
.dungeon-head p { margin: 0; font: 450 16px/1.5 var(--font-ui); color: var(--muted); }

/* ---------- Productos ---------- */
.product-grid { display: grid; gap: 18px; }
.product-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-grid-maps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-tile { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--r-tile); overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: var(--ink); background: linear-gradient(160deg, #e2f4f8, #b8e0ea); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 20px 44px -24px rgba(2, 44, 64, .6); transition: transform .5s var(--spring), box-shadow .3s; }
:root[data-theme=dark] .product-tile { background: linear-gradient(160deg, #15303f, #0b1b28); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 44px -24px rgba(0, 0, 0, .8); }
.product-tile > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.product-tile:hover > img, .product-tile:focus-visible > img { transform: scale(1.05); }
.product-tile:active { transform: scale(.975); }
.product-tile-dungeon { color: #f4eefb; }
.product-tile-dungeon > img { object-fit: contain; }
.product-tile-dungeon[data-product=halloween-boss-pack] > img { object-fit: cover; }
.product-grid-maps .product-tile { aspect-ratio: 16 / 10; }

/* Placa de cristal con nombre y precio; al pasar el cursor se expande (morph) con tipo, descripcion y "ver detalles". */
.product-overlay { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "type type" "name price" "desc desc" "more more"; align-items: baseline; column-gap: 12px; padding: 12px 16px 13px; border-radius: var(--r-plate); background: var(--plate-fill); -webkit-backdrop-filter: blur(20px) saturate(1.9); backdrop-filter: blur(20px) saturate(1.9); box-shadow: var(--rim); }
.product-tile-dungeon .product-overlay { background: rgba(18, 10, 26, .5); --rim-hi: rgba(255, 255, 255, .32); --rim-lo: rgba(255, 255, 255, .06); }
.product-overlay-foot { display: contents; }
.product-tile .product-type { grid-area: type; }
.product-overlay-name { grid-area: name; font: 700 clamp(18px, 1.6vw, 22px)/1.15 var(--font-display); letter-spacing: -.02em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.product-overlay-foot strong { grid-area: price; font: 750 18px/1 var(--font-display); color: var(--laguna-ink); }
.product-tile-dungeon .product-overlay-foot strong { color: var(--glow); }
.product-overlay-desc { grid-area: desc; }
.view-details { grid-area: more; font: 650 14px/1 var(--font-ui); color: var(--laguna-ink); }
.product-tile-dungeon .view-details { color: #d9c6ff; }
.product-tile .product-type, .product-overlay-desc, .view-details { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .3s, margin .4s var(--ease); }
.product-tile .product-type { font: 650 13px/1.3 var(--font-ui); font-variant-caps: all-small-caps; letter-spacing: .04em; color: var(--laguna-ink); }
.product-tile-dungeon .product-type { color: #cdb6f2; }
.product-overlay-desc { font: 450 14px/1.45 var(--font-ui); color: var(--muted); }
.product-tile-dungeon .product-overlay-desc { color: #d8cfe4; }
@media (hover: hover) {
  .product-tile:hover .product-type, .product-tile:focus-visible .product-type { max-height: 3em; opacity: 1; margin-bottom: 6px; }
  .product-tile:hover .product-overlay-desc, .product-tile:focus-visible .product-overlay-desc { max-height: 6em; opacity: 1; margin-top: 6px; }
  .product-tile:hover .view-details, .product-tile:focus-visible .view-details { max-height: 2em; opacity: 1; margin-top: 10px; }
}
.sale-ribbon { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 7px 13px; border-radius: 999px; font: 750 12px/1 var(--font-ui); letter-spacing: .04em; color: #2b1500; background: linear-gradient(180deg, #ffd27f, var(--glow)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 18px -8px rgba(120, 60, 0, .6); pointer-events: none; }
.catalog-error { grid-column: 1 / -1; padding: 30px; border-radius: var(--r-tile); text-align: center; color: var(--muted); background: var(--plate-fill); }

/* ---------- Ventana de producto: hoja de iOS ---------- */
#product-viewer { width: min(1100px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 40px; overflow: auto; color: var(--ink); background: var(--sheet-fill-strong); overscroll-behavior: contain; }
#product-viewer::backdrop, #image-viewer::backdrop { background: rgba(4, 24, 36, .32); -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3); }
#product-viewer[open], #image-viewer[open] { animation: sheet-up .6s var(--spring); }
@keyframes sheet-up { from { opacity: 0; transform: translateY(46px) scale(.96); } }
.grabber { display: block; width: 44px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: color-mix(in oklab, var(--ink) 22%, transparent); }
.product-close { position: sticky; top: 12px; float: right; z-index: 3; min-height: 42px; margin: 4px 14px -60px 0; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; font: 600 15px/1 var(--font-ui); --lift: 0 8px 20px -12px rgba(0, 0, 0, .4); transition: transform .45s var(--spring); }
.product-close:active { transform: scale(.92); }
.product-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.product-visual { position: relative; display: flex; flex-direction: column; justify-content: center; margin: 14px; border-radius: 30px; overflow: hidden; background: linear-gradient(160deg, #e4f5f9, #bfe3ec); }
:root[data-theme=dark] .product-visual { background: linear-gradient(160deg, #163343, #0a1824); }
.dungeon-motion-stage { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; width: 100%; min-width: 0; }
.dungeon-motion-stage.has-motion { grid-template-columns: minmax(0, 1fr) 156px; gap: 10px; padding: 14px; }
#catalog-preview { display: block; width: 100%; min-width: 0; height: auto; aspect-ratio: 1; object-fit: contain; }
.dungeon-motion { align-self: stretch; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; border-radius: 22px; color: #f2eef8; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.dungeon-motion h4 { margin: 0; font: 700 16px/1.2 var(--font-display); }
.motion-model-name { margin: 0; font: 500 13px/1.3 var(--font-ui); color: #cfc4dc; }
.motion-play, .motion-list button { padding: 9px 12px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; font: 550 13px/1.3 var(--font-ui); color: #f0ebf7; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: transform .4s var(--spring), background-color .2s; }
.motion-play { color: #1d1230; background: linear-gradient(180deg, #efe3ff, #cdb2f3); font-weight: 700; }
.motion-list { display: flex; flex-direction: column; gap: 6px; max-height: 270px; overflow: auto; scrollbar-width: thin; }
.motion-list button:hover { background: rgba(255, 255, 255, .15); }
.motion-list button[aria-pressed=true] { background: rgba(214, 190, 255, .24); box-shadow: inset 0 0 0 1px rgba(214, 190, 255, .55); }
.motion-play:active, .motion-list button:active { transform: scale(.95); }
.motion-status { margin: 0; min-height: 34px; font: 450 12px/1.45 var(--font-ui); color: #d3c9df; }
.pack-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; padding: 12px; }
.pack-thumb { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 5px 5px 8px; border: 0; border-radius: 18px; cursor: pointer; text-align: center; font: 600 11px/1.2 var(--font-ui); color: var(--ink); background: rgba(255, 255, 255, .45); box-shadow: var(--rim); transition: transform .4s var(--spring); }
.pack-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 13px; }
.pack-thumb:active { transform: scale(.94); }
.pack-thumb[aria-pressed=true] { box-shadow: var(--rim), 0 0 0 2px var(--laguna); }
.product-visual.visual-dark .pack-thumb { color: #ece4f6; background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.product-visual.visual-dark .pack-thumb[aria-pressed=true] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 2px #d4bcff; }
:root[data-theme=dark] .pack-thumb { background: rgba(255, 255, 255, .07); }
.product-info { padding: 44px 40px 36px 22px; }
.product-info .product-type { margin: 0 0 12px; font: 650 15px/1.3 var(--font-ui); font-variant-caps: all-small-caps; letter-spacing: .04em; color: var(--laguna-ink); }
.product-info h3 { margin: 0 0 18px; font: 750 clamp(32px, 3.4vw, 48px)/1.02 var(--font-display); letter-spacing: -.035em; text-wrap: balance; }
.product-price { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.product-price strong { font: 750 36px/1 var(--font-display); letter-spacing: -.02em; }
.product-price span { padding: 7px 13px; border-radius: 999px; font: 600 13px/1 var(--font-ui); color: var(--laguna-ink); background: color-mix(in oklab, var(--laguna) 14%, transparent); }
.seasonal-price-note { display: inline-block; margin: 0 0 16px; padding: 7px 13px; border-radius: 999px; font: 700 13px/1.2 var(--font-ui); color: #2b1500; background: linear-gradient(180deg, #ffd27f, var(--glow)); }
.product-description { font: 450 17px/1.55 var(--font-ui); color: var(--muted); }
.product-details { margin-top: 22px; padding: 18px 20px; border-radius: 22px; background: rgba(255, 255, 255, .42); box-shadow: var(--rim); }
:root[data-theme=dark] .product-details { background: rgba(255, 255, 255, .05); }
.product-details h4 { margin: 0 0 10px; font: 650 15px/1.3 var(--font-ui); }
.product-details ul { margin: 0; padding-left: 18px; font: 450 15px/1.5 var(--font-ui); color: var(--muted); }
.product-details li + li { margin-top: 6px; }
.product-compatibility { margin: 16px 0 18px; font: 450 13px/1.5 var(--font-ui); color: var(--faint); }
.product-info > .button { width: 100%; }
.order-status:empty { display: none; }
.order-status, #copy-status { margin: 14px 0 0; font: 600 14px/1.45 var(--font-ui); color: var(--laguna-ink); }
#copy-status:empty { display: none; }
.product-contact { margin: 12px 0 0; font: 450 13px/1.5 var(--font-ui); color: var(--faint); }
#catalog-request, #brief-fallback { width: 100%; min-height: 200px; margin-top: 12px; padding: 14px; border: 0; border-radius: 18px; font: 14px/1.55 ui-monospace, Consolas, monospace; color: var(--ink); background: rgba(255, 255, 255, .7); box-shadow: var(--rim); }
:root[data-theme=dark] :is(#catalog-request, #brief-fallback) { background: rgba(0, 0, 0, .3); }
#catalog-card.is-map { grid-template-columns: 1fr; }
#catalog-card.is-map #catalog-preview { aspect-ratio: 16 / 9; object-fit: cover; }
#catalog-card.is-map .product-visual { background: #0d1a22; }
#catalog-card.is-map .product-info { padding: 20px 40px 36px; }
#catalog-card.is-map .pack-roster { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
#catalog-card.is-map .pack-thumb img { aspect-ratio: 16 / 9; }

/* ---------- Galeria ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gallery-tile { position: relative; display: block; min-width: 0; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; background: #8fcadb; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 16px 36px -22px rgba(2, 44, 64, .6); transition: transform .5s var(--spring); }
:root[data-theme=dark] .gallery-tile { background: #12293a; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 16px 36px -22px rgba(0, 0, 0, .8); }
.gallery-tile > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gallery-tile:hover > img { transform: scale(1.05); }
.gallery-tile:active { transform: scale(.975); }
.tile-caption { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 6px 6px 15px; border-radius: 999px; font: 600 13px/1 var(--font-ui); background: var(--plate-fill); --lift: none; }
.view-number { margin-left: 4px; color: var(--faint); }
.expand-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 500 20px/1 var(--font-ui); color: var(--laguna-ink); background: rgba(255, 255, 255, .55); }
:root[data-theme=dark] .expand-icon { background: rgba(255, 255, 255, .1); }
.gallery-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 26px; }
.gallery-note { max-width: 52ch; margin: 0; font: 450 15px/1.5 var(--font-ui); color: var(--muted); }
.gallery-footer .button { flex-shrink: 0; }

/* Visor de imagenes */
#image-viewer { width: min(1200px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 14px; border: 0; border-radius: 38px; overflow: auto; color: #fff; background: rgba(6, 18, 28, .58); -webkit-backdrop-filter: blur(32px) saturate(1.6); backdrop-filter: blur(32px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 120px -30px rgba(0, 0, 0, .8); }
#viewer-image { display: block; width: 100%; height: min(72dvh, 780px); object-fit: contain; border-radius: 26px; }
.viewer-top, .viewer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 600 14px/1 var(--font-ui); }
.viewer-top { margin-bottom: 12px; padding-left: 10px; }
.viewer-bottom { margin-top: 12px; }
.viewer-bottom > span { color: rgba(255, 255, 255, .6); }
#image-viewer button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; font: 600 15px/1 var(--font-ui); color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .45s var(--spring), background-color .2s; }
#image-viewer button:hover { background: rgba(255, 255, 255, .22); }
#image-viewer button:active { transform: scale(.92); }

/* ---------- Contacto ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; overflow: hidden; }
.contact h2 { margin-bottom: 18px; }
.contact h2 span { display: block; }
.contact-copy > p:not(.kicker) { max-width: 40ch; margin: 0; font: 450 18px/1.5 var(--font-ui); color: var(--muted); }
.contact-brand { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.contact-brand img { display: block; border-radius: 18px; }
.contact-brand > span { font: 750 26px/1 var(--font-display); letter-spacing: -.02em; }
.contact-brand > span > span { font-weight: 500; color: var(--muted); }
.contact-card { display: grid; gap: 12px; padding: 30px; border-radius: 32px; background: linear-gradient(160deg, rgba(88, 101, 242, .16), rgba(255, 255, 255, .32)); box-shadow: var(--rim); }
:root[data-theme=dark] .contact-card { background: linear-gradient(160deg, rgba(88, 101, 242, .2), rgba(255, 255, 255, .03)); }
.contact-card h3 { margin: 0; font: 750 28px/1.1 var(--font-display); letter-spacing: -.025em; }
.contact-card > p:not(#copy-status) { margin: 0 0 8px; font: 450 16px/1.5 var(--font-ui); color: var(--muted); }
.contact-card .button { width: 100%; }

/* ---------- Pie ---------- */
.site-footer { position: relative; width: var(--page); margin: 0 auto calc(28px + env(safe-area-inset-bottom)); padding: 12px 22px 12px 14px; border-radius: 999px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; font: 500 13px/1.4 var(--font-ui); color: var(--muted); }
.site-footer .brand { font-size: 16px; color: var(--ink); }
.site-footer p { margin: 0; }

/* ---------- Barra de pestanas (movil) ---------- */
.tabbar { display: none; }

/* ---------- Refraccion real (Chromium): la lente y las barras doblan el fondo en sus bordes ---------- */
/* glass.js pone html.refract y el filtro de cada elemento. */

/* ---------- Halloween (octubre) ---------- */
html.halloween { --glow: #ff9a3c; }
html.halloween .wallpaper::after { background: linear-gradient(180deg, rgba(255, 150, 60, .08), rgba(90, 30, 0, .28)); }
:root.halloween[data-theme=dark] .wallpaper::after { background: linear-gradient(180deg, rgba(40, 10, 0, .3), rgba(20, 6, 0, .75)); }
.seasonal-banner { position: relative; z-index: 5; display: flex; align-items: center; gap: 12px; width: fit-content; max-width: calc(100% - 24px); margin: calc(var(--dock-h) + 24px) auto 0; padding: 9px 50px 9px 12px; border-radius: 999px; font: 500 14px/1.35 var(--font-ui); color: #ffe9d1; background: rgba(48, 20, 6, .55); --rim-hi: rgba(255, 210, 160, .45); --rim-lo: rgba(255, 255, 255, .05); }
.seasonal-banner + main { padding-top: 28px; }
.seasonal-banner img { flex-shrink: 0; width: 26px; height: auto; image-rendering: pixelated; }
.seasonal-banner a { font-weight: 700; color: #ffb35e; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.seasonal-banner button { position: absolute; right: 7px; top: 50%; translate: 0 -50%; width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; color: #ffe9d1; background: rgba(255, 255, 255, .1); }
.hw-web { position: absolute; top: 0; z-index: 2; image-rendering: pixelated; pointer-events: none; }
.hw-web.left { left: 0; } .hw-web.right { right: 0; }
.hw-web.on-image { width: clamp(90px, 11vw, 150px); opacity: .8; }
.hw-web.on-section { width: 70px; opacity: .45; }
.contact .hw-web.on-section { left: auto; right: 0; transform: scaleX(-1); }   /* esquina derecha: no tapa el titulo */
:root:not([data-theme=dark]) .hw-web.on-section { filter: brightness(.25); opacity: .3; }
.hw-props { position: absolute; z-index: 3; display: flex; align-items: flex-end; gap: 4px; pointer-events: none; }
.hw-props img { display: block; height: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.hero-visual .hw-props { right: -10px; bottom: 50px; }
.hero-visual .hw-props img:nth-child(1) { width: 92px; } .hero-visual .hw-props img:nth-child(2) { width: 60px; }
.site-footer .hw-props { right: 26px; bottom: 100%; }
.site-footer .hw-props img { width: 54px; } .site-footer .hw-props img:nth-child(2) { width: 40px; }
.hw-bats { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.hw-bat { position: absolute; left: -60px; color: #1b1015; animation: bat-fly var(--dur) linear var(--delay) infinite; }
:root[data-theme=dark] .hw-bat { color: #08050a; filter: drop-shadow(0 0 6px #ff9a4a55); }
.hw-bat svg { display: block; width: 100%; height: 100%; animation: bat-flap .22s steps(2) infinite; transform-origin: 50% 40%; }
@keyframes bat-fly { 0% { transform: translate(0, 0); } 25% { transform: translate(28vw, -24px); } 50% { transform: translate(56vw, 12px); } 75% { transform: translate(84vw, -18px); } 100% { transform: translate(115vw, 6px); } }
@keyframes bat-flap { 50% { transform: scaleY(.45); } }

/* ---------- Adaptacion a pantallas ---------- */
@media (max-width: 1080px) {
  .dock-nav a { padding: 10px 13px; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .brand-stamp { left: -14px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 22px; }
  .hero-visual { width: min(100%, 520px); margin-inline: auto; }
  .image-shell { aspect-ratio: 4 / 3; max-height: none; }
  .brand-stamp { left: 12px; bottom: 14px; }
  .hero-visual figcaption { display: none; }
  .product-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-head, .dungeon-head { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --dock-h: 58px; --r-sheet: 32px; --r-tile: 24px; --page: calc(100% - 20px); }
  body { font-size: 16px; }
  .dock { padding: 0 7px 0 10px; }
  .brand { font-size: 17px; }
  .dock-nav { display: none; }
  .dock-nav + .header-tools { margin-left: auto; }
  .tool-toggle { width: 42px; height: 42px; }
  main { padding-top: calc(var(--dock-h) + 24px); }
  .lens { border-radius: 38px; }
  .hero-actions .button { flex: 1 1 auto; }
  .sheet { padding: 24px 18px; margin-bottom: 18px; }
  .product-grid-maps { grid-template-columns: 1fr; }
  .product-card { grid-template-columns: 1fr; }
  .product-info, #catalog-card.is-map .product-info { padding: 22px 22px 28px; }
  .product-visual { margin: 10px 10px 0; border-radius: 26px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gallery-tile { border-radius: 20px; }
  .tile-caption { left: 6px; right: 6px; bottom: 6px; font-size: 11px; padding: 4px 4px 4px 10px; }
  .expand-icon { width: 24px; height: 24px; font-size: 16px; }
  .gallery-footer { flex-direction: column; align-items: stretch; }
  .site-footer { border-radius: 28px; margin-bottom: calc(108px + env(safe-area-inset-bottom)); }
  .seasonal-banner { margin-top: calc(var(--dock-h) + 20px); font-size: 13px; }
  /* Barra de pestanas flotante */
  .tabbar { position: fixed; z-index: 60; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); translate: -50% 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: min(440px, calc(100% - 24px)); padding: 6px; border-radius: 999px; }
  .tabbar a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px 6px; border-radius: 999px; font: 650 11px/1 var(--font-ui); transition: color .3s; }
  .tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
  .tabbar a[aria-current=true] { color: var(--laguna-ink); }
  .tab-drop { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 999px; background: var(--plate-fill); box-shadow: var(--rim); opacity: 0; transition: left .55s var(--spring), width .55s var(--spring), opacity .3s; }
  .tabbar.has-current .tab-drop { opacity: 1; }
  .hero-visual .hw-props img:nth-child(1) { width: 70px; } .hero-visual .hw-props img:nth-child(2) { width: 46px; }
}
@media (max-width: 560px) {
  .product-grid-3 { grid-template-columns: 1fr; }
  .dungeon-motion-stage.has-motion { grid-template-columns: 1fr; padding: 12px; }
  .motion-list { flex-direction: row; flex-wrap: wrap; max-height: 160px; }
  .motion-list button { flex: 1 0 auto; }
}
@media (max-width: 400px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .brand .studio { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .wallpaper { transform: none; }
  .hw-bats { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --chrome-fill: rgba(240, 249, 252, .94); --plate-fill: rgba(246, 252, 254, .96); --sheet-fill: rgba(246, 252, 254, .97); --sheet-fill-strong: #f6fcfe; }
  :root[data-theme=dark] { --chrome-fill: rgba(14, 28, 42, .95); --plate-fill: rgba(12, 24, 36, .96); --sheet-fill: rgba(9, 20, 32, .97); --sheet-fill-strong: #0a1622; }
  .lens { background: var(--sheet-fill); }
}

/* =====================================================================
   v2: tipografia estilo Minecraft, logo de bloques y carruseles de productos
   ===================================================================== */
/* Tipografia: titulares y elementos de interfaz con letra pixelada; los textos largos siguen en Funnel Sans. */
:root { --font-display: 'Pixelify Sans', 'Funnel Sans', system-ui, sans-serif; }
h1, h2, .dungeon-head h3, .product-info h3, .contact-card h3, .brand, .brand-stamp strong, .contact-brand > span,
.product-overlay-name, .product-overlay-foot strong, .product-price strong { letter-spacing: 0; }
h1 { font-weight: 700; font-size: clamp(42px, 5.8vw, 84px); line-height: 1.02; }
h2 { font-weight: 700; line-height: 1.06; }
.dock-nav a, .button, .kicker, .specialties li, .image-label, .view-details, .tile-caption, .tabbar a, .product-close,
#image-viewer button, .viewer-top, .viewer-bottom, .sale-ribbon, .product-price span, .seasonal-price-note, .motion-play,
.motion-list button, .pack-thumb, .product-details h4, .seasonal-banner a, .hero-visual figcaption, .signature {
  font-family: var(--font-display); letter-spacing: .01em; }
.product-tile .product-type, .product-info .product-type { font-family: var(--font-display); font-variant-caps: normal; letter-spacing: .03em; }
.button { font-weight: 600; font-size: 17px; }
.brand { font-size: 21px; font-weight: 700; }
.brand img { border-radius: 9px; image-rendering: pixelated; }
.brand-stamp img, .contact-brand img { border-radius: 14px; }
.contact-brand img { border-radius: 0; height: 86px; width: auto; filter: drop-shadow(0 10px 18px rgba(120, 10, 16, .25)); }
.contact-brand > span { font-size: 28px; }

/* Carrusel: unas 3 fichas a la vez y flechas a los lados para avanzar de una en una. */
.carousel { --gap: 16px; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; max-width: 1010px; margin-inline: auto; }
.carousel .carousel-row { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 12px 12px 26px; margin: -12px -12px -26px; }
.carousel .carousel-row::-webkit-scrollbar { display: none; }
.carousel .carousel-row > * { scroll-snap-align: start; scroll-margin-inline: 12px; }
.carousel-btn { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--ink); background: var(--chrome-fill); -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur); box-shadow: var(--rim), 0 12px 26px -16px rgba(2, 54, 74, .55); transition: transform .45s var(--spring), opacity .25s; }
.carousel-btn svg { width: 14px; height: 20px; }
.carousel-btn:hover:not(:disabled) { color: var(--laguna-ink); }
.carousel-btn:active:not(:disabled) { transform: scale(.88); }
.carousel.fits .carousel-btn { visibility: hidden; }
/* Fichas mas pequenas: placa y textos a escala */
.product-row .product-tile { border-radius: 24px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 12px 20px -14px rgba(2, 44, 64, .6); }
:root[data-theme=dark] .product-row .product-tile { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 20px -14px rgba(0, 0, 0, .8); }
.product-row .product-overlay { left: 8px; right: 8px; bottom: 8px; padding: 9px 12px 10px; border-radius: 16px; column-gap: 8px; }
.product-row .product-overlay-name { font-size: 17px; }
.product-row .product-overlay-foot strong { font-size: 16px; }
.product-row .product-overlay-desc { font-size: 13px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.product-row .view-details { font-size: 13px; }
.product-row .sale-ribbon { top: 10px; left: 10px; padding: 6px 11px; font-size: 11px; }
@media (max-width: 900px) {
  .carousel .carousel-row { grid-auto-columns: calc((100% - var(--gap)) / 2); }
}
@media (max-width: 760px) {
  /* Movil: una ficha y un trozo de la siguiente; las flechas flotan sobre los bordes */
  .carousel { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .carousel .carousel-row { grid-auto-columns: 78%; --gap: 12px; }
  .carousel-btn { position: absolute; top: 50%; z-index: 3; translate: 0 -50%; width: 42px; height: 42px; }
  .carousel-btn.prev { left: -4px; }
  .carousel-btn.next { right: -4px; }
  .brand { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .carousel .carousel-row { scroll-behavior: auto; } }
/* Intro con el logo nuevo y la letra pixelada */
#intro .intro-brand { font-family: var(--font-display); }
#intro .intro-brand img { border-radius: 0; box-shadow: none; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .6)); }
#intro .intro-brand strong { letter-spacing: 0; }
#intro .intro-brand small { letter-spacing: .12em; }

/* =====================================================================
   v3: logo del ghast, galeria en carrusel y carruseles que dan la vuelta
   ===================================================================== */
:root { --logo-shadow: transparent; }
:root[data-theme=dark] { --logo-shadow: #3c3c3c; }   /* sombra de texto de Minecraft en modo oscuro */
.logo { display: block; width: auto; height: 38px; overflow: visible; }
.brand { color: var(--ink); }
.site-footer .logo { height: 26px; }
.contact-brand { color: var(--ink); }
.contact-brand .logo { height: 68px; filter: drop-shadow(0 12px 20px rgba(2, 44, 64, .25)); }
.brand-stamp img { border-radius: 12px; image-rendering: pixelated; }
@media (max-width: 760px) { .dock .logo { height: 34px; } .contact-brand .logo { height: 52px; } }

/* Galeria: una fila con flechas (3 imagenes a la vez) en lugar de la cuadricula de 39 */
.carousel-gallery { max-width: none; }
.carousel-gallery .gallery-tile { scroll-snap-align: start; }
#show-gallery { display: none !important; }
.gallery-footer { justify-content: center; text-align: center; }
@media (max-width: 760px) { .carousel-gallery .carousel-row { grid-auto-columns: 86%; } }

/* Intro: el logo nuevo ya lleva el nombre; se muestra tambien en Halloween */
#intro .intro-brand img { display: block; width: auto !important; height: min(11vh, 84px) !important; image-rendering: pixelated; }
#intro .intro-brand strong { display: none; }
html.halloween #intro .intro-brand img { height: min(7vh, 58px) !important; }