/* ===== Cabecera, menú, Salón de la fama y pie (todo se edita en Diseño de la tienda) ===== */

/* Barra superior: texto libre (anuncio) */
.tb-text{margin-left:auto;min-width:0;max-width:44%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600;color:#F3E9FF;padding:4px 12px;border-radius:999px;background:linear-gradient(90deg,rgba(var(--primary-rgb),.22),rgba(var(--accent-rgb),.14));border:1px solid rgba(var(--accent-rgb),.3)}
a.tb-text[href]:hover{border-color:var(--gold)}
.tb-text:not([hidden])~.links{margin-left:10px}
header.top.static{position:relative}

/* Menú principal */
nav.main{align-items:center;overflow:visible}
nav.main.with-icons a canvas{display:block;width:20px;height:20px;opacity:.9}
nav.main a.hl{color:var(--on-accent);background:var(--gold);box-shadow:0 3px 0 var(--gold-deep)}
nav.main a.hl:hover{background:var(--gold-hi);color:var(--on-accent)}
.nav-item{position:relative;display:flex}
.nav-peek{position:absolute;left:50%;top:calc(100% + 14px);width:260px;transform:translate(-50%,6px);opacity:0;visibility:hidden;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:0 22px 50px -10px rgba(0,0,0,.7);transition:opacity .15s,transform .15s,visibility .15s;cursor:pointer;z-index:55}
.nav-peek::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-peek::after{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.nav-item:hover .nav-peek,.nav-item:focus-within .nav-peek{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto}
.nav-peek b{display:block;font-family:var(--display);font-weight:var(--display-weight,400);font-size:18px;color:var(--white)}
.nav-peek p{margin:4px 0 10px;font-size:12.5px;color:var(--muted);line-height:1.45}
.np-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--faint);padding-top:10px;border-top:1px solid var(--line)}
.np-row b{display:inline;font-family:var(--body);font-size:13px;color:var(--gold)}
.np-go{display:block;margin-top:10px;font-size:12px;font-weight:700;color:var(--gold)}
.nav-shop{position:relative;display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;color:var(--muted);font-weight:600;font-size:14px;white-space:nowrap;transition:color .15s,background .15s}
.nav-shop:hover,.nav-shop[aria-expanded=true]{color:var(--white);background:rgba(255,255,255,.05)}
.nav-shop.on{color:var(--white);background:linear-gradient(180deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.06));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.35)}
.nav-shop .chev{transition:transform .15s}
.nav-shop[aria-expanded=true] .chev{transform:rotate(180deg)}

/* Panel desplegable "Tienda" */
.mega{position:absolute;left:0;right:0;top:100%;background:rgba(13,9,21,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line);box-shadow:0 30px 60px -20px rgba(0,0,0,.8);padding-block:20px 24px;animation:pop .15s ease-out}
.mega-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.mega-card,.m-card{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:6px;align-items:center;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;transition:transform .15s,border-color .15s,box-shadow .15s}
.mega-card::before,.m-card::before{content:"";position:absolute;right:-50px;bottom:-60px;width:150px;height:150px;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);opacity:.8;pointer-events:none}
.mega-card:hover,.m-card:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 14px 30px -18px rgba(var(--accent-rgb),.6)}
.cc-ico{grid-row:1/3;display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line)}
.cc-ico canvas,.cc-ico img{width:36px;height:36px}
.cc-txt{min-width:0;position:relative}
.cc-txt b{display:block;font-family:var(--display);font-weight:var(--display-weight,400);font-size:18px;line-height:1.1;color:var(--white)}
.cc-txt small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-from{position:relative;font-size:12px;color:var(--faint);font-weight:600}
.cc-from b{color:var(--gold);font-size:13px}

/* Menú del móvil */
.mnav .m-title{font-family:var(--pixel);font-size:10px;letter-spacing:.1em;color:var(--faint);padding:10px 12px 2px;text-transform:uppercase}
.mnav .m-cats{display:grid;gap:8px;padding:0 0 6px}
.mnav a.m-card{padding:12px;color:var(--text)}
.mnav a.m-card .cc-ico{width:44px;height:44px}
.mnav a.m-card .cc-ico canvas{width:30px;height:30px}
.mnav a.hl{color:var(--on-accent);background:var(--gold)}

/* Páginas de categoría */
.phead .trust{margin-top:14px}
.phead-min{padding-block:30px 6px}
.phead-min h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,4vw,44px);line-height:1;margin:0}
.phead-min p{margin:8px 0 0;color:var(--muted)}

/* Salón de la fama (sección del inicio) */
.hof-sec{scroll-margin-top:96px}
.hof-eye{display:inline-flex;align-items:center;gap:7px;font-family:var(--pixel);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.hof-eye svg{width:14px;height:14px}
.hof{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:20px;align-items:start}
.hof.solo{grid-template-columns:1fr}
.hof-main{display:grid;gap:18px;min-width:0}
.hof-empty{display:grid;place-items:center;gap:8px;text-align:center;padding:44px 20px;background:var(--surface);border:1px dashed var(--line);border-radius:18px;color:var(--muted)}
.hof-empty svg{width:32px;height:32px;color:var(--gold)}
.hof-empty p{margin:0;max-width:40ch}
/* Podio en 3D: cada puesto es un bloque con cara superior, frente iluminado y sombra; el jugador se para encima. */
.podium{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:end;padding:34px 22px 0;border-radius:18px;
  background:radial-gradient(60% 70% at 50% 18%,rgba(var(--accent-rgb),.14),transparent 70%),radial-gradient(90% 60% at 50% 110%,rgba(var(--primary-rgb),.22),transparent 70%),var(--surface);
  border:1px solid var(--line);overflow:hidden;isolation:isolate}
.podium::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.pod{--m:#B8C2D6;--m-hi:#E8EDF7;--m-lo:#6E7891;position:relative;display:grid;justify-items:center;text-align:center;min-width:0}
.pod.p1{--m:var(--gold);--m-hi:var(--gold-hi);--m-lo:var(--gold-deep)}
.pod.p3{--m:#D08A4E;--m-hi:#F0B888;--m-lo:#7E4A22}
/* Halo de luz detrás del primero */
.pod.p1::before{content:"";position:absolute;z-index:-1;left:50%;top:-10px;width:230px;height:230px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.38),rgba(var(--accent-rgb),.08) 45%,transparent 70%);filter:blur(6px);animation:podGlow 4s ease-in-out infinite}
.pod-skin{position:relative;z-index:1;display:grid;justify-items:center;height:170px;align-content:end;margin-bottom:-14px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pod.p1 .pod-skin{height:214px}
.pod-skin .skin3d,.pod-skin canvas{position:relative;z-index:1;display:block;object-fit:contain;filter:drop-shadow(0 14px 14px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(0,0,0,.6))}
.pod-skin .skin3d{height:170px;width:104px}
.pod.p1 .pod-skin .skin3d{height:214px;width:131px}
.pod-skin canvas{width:85px;height:170px}
.pod.p1 .pod-skin canvas{width:107px;height:214px}
/* Sombra en el suelo, bajo los pies */
.pod-shadow{position:absolute;bottom:4px;left:50%;width:62%;height:16px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);z-index:0}
.pod:hover .pod-skin{transform:translateY(-6px) scale(1.03)}
.pod.p1 .pod-skin .skin3d{animation:podBob 4s ease-in-out infinite}
/* Bloque: frente con degradado y relieve; cara superior en perspectiva */
.pod-base{position:relative;width:100%;display:grid;justify-items:center;gap:7px;margin-top:14px;padding:22px 10px 18px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--m) 22%,var(--surface-2)),color-mix(in srgb,var(--m) 6%,var(--bg-2)) 85%);
  border:1px solid color-mix(in srgb,var(--m) 35%,var(--line));border-bottom:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 6px 0 12px -8px rgba(255,255,255,.12),inset -10px 0 16px -8px rgba(0,0,0,.45),0 -2px 22px -6px color-mix(in srgb,var(--m) 45%,transparent)}
.pod-top{position:absolute;left:-1px;right:-1px;bottom:100%;height:16px;
  background:linear-gradient(180deg,var(--m-hi),var(--m));clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);
  box-shadow:0 -1px 0 rgba(255,255,255,.3)}
.pod-top::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 12px);opacity:.6}
.pod.p1 .pod-base{padding-bottom:42px}
.pod.p2 .pod-base{padding-bottom:28px}
.pod-n{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;font-size:15px;color:var(--white);text-shadow:0 2px 0 rgba(0,0,0,.35)}
.pod .tagp{background:var(--c);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.35)}
/* Número con volumen: varias sombras apiladas dan grosor */
.pod-rank{font-family:var(--display);font-size:30px;line-height:1;color:var(--m-hi);
  text-shadow:0 1px 0 var(--m),0 2px 0 var(--m-lo),0 3px 0 var(--m-lo),0 4px 0 color-mix(in srgb,var(--m-lo) 70%,#000),0 8px 12px rgba(0,0,0,.5)}
.pod.p1 .pod-rank{font-size:42px}
@keyframes podBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes podGlow{0%,100%{opacity:.75;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.pod.p1::before,.pod.p1 .pod-skin .skin3d{animation:none}.pod:hover .pod-skin{transform:none}}
.skin-pos{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:11px;color:var(--faint)}
.hof-side{position:sticky;top:100px}

/* "Cómo comprar" */
.how-head{padding-top:40px;text-align:center}
.how-head h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,34px);margin:0}
.how-head h2 .g{color:var(--gold)}
.how-head p{margin:6px auto 0;color:var(--muted);max-width:56ch}
.how-grid{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.how .pay{justify-content:center}

/* Pie de página */
footer.sf{border-top:1px solid var(--line);background:linear-gradient(180deg,var(--bg-2),var(--bg));padding:0;font-size:13px;color:var(--muted)}
.sf-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:40px;padding-block:44px 34px}
.sf-top.solo{grid-template-columns:1fr}
.sf-brand{display:grid;gap:14px;align-content:start;justify-items:start}
.sf-brand .brand .wm{font-size:24px}
.sf-brand p{margin:0;max-width:44ch;line-height:1.6}
.sf-brand .ipchip .ipm{font-family:var(--mono);color:var(--white);font-size:12.5px}
.sf-soc{display:flex;flex-wrap:wrap;gap:8px}
.sf-soc a{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--muted);transition:color .15s,border-color .15s,transform .15s}
.sf-soc a:hover{color:var(--white);border-color:var(--gold);transform:translateY(-2px)}
.sf-cols{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:24px}
.sf-col{display:grid;gap:10px;align-content:start}
.sf-col h6{margin:0 0 4px;font-family:var(--pixel);font-weight:400;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.sf-col a{color:var(--muted);width:fit-content;transition:color .15s}
.sf-col a:hover{color:var(--white)}
.sf-mid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;padding-block:24px;border-top:1px solid var(--line)}
.sf-legal b{display:block;color:var(--text);margin-bottom:6px;font-size:13px}
.sf-legal p{margin:0 0 6px;font-size:12.5px;color:var(--faint);line-height:1.6}
.sf-pay small{display:block;font-size:11px;font-family:var(--pixel);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.sf-pay .pay{padding-bottom:0}
.sf-pay p{margin:10px 0 0;font-size:12px;color:var(--faint)}
.sf-bot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding-block:18px 26px;border-top:1px solid var(--line);font-size:12px;color:var(--faint)}
.sf-links{display:flex;flex-wrap:wrap;gap:6px 16px}
.sf-links a:hover{color:var(--gold)}
.sf-tm{margin-left:auto}

@media (max-width:980px){
  .hof{grid-template-columns:1fr}
  .hof-side{position:static}
  .sf-top,.sf-mid{grid-template-columns:1fr;gap:28px}
  .tb-text{max-width:none}
}
@media (max-width:720px){
  .tb-text{display:none}
  .how-grid{grid-template-columns:1fr}
  .sf-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-tm{margin-left:0}
  .podium{gap:8px;padding:26px 10px 0}
  .pod-skin{height:120px;margin-bottom:-10px}
  .pod.p1 .pod-skin{height:150px}
  .pod-skin canvas{width:60px;height:120px}
  .pod.p1 .pod-skin canvas{width:75px;height:150px}
  .pod-skin .skin3d{height:120px;width:74px}
  .pod.p1 .pod-skin .skin3d{height:150px;width:92px}
  .pod.p1::before{width:160px;height:160px}
  .pod-base{padding:18px 6px 14px}
  .pod.p1 .pod-base{padding-bottom:30px}
  .pod.p2 .pod-base{padding-bottom:20px}
  .pod-n{font-size:13px}
  .pod-rank{font-size:24px}
  .pod.p1 .pod-rank{font-size:32px}
}
@media (max-width:420px){.sf-cols{grid-template-columns:1fr}}

/* ===== Categorías personalizables (ícono propio, cabecera, frase y etiqueta) ===== */
.catnav a img,.shop-tabs a img,nav.main.with-icons a img{object-fit:contain;flex:none}
.catnav a img{width:24px;height:24px}
.shop-tabs a img{width:20px;height:20px}
nav.main.with-icons a img{display:block;width:20px;height:20px;opacity:.9}
.ccard img.art-img{width:56px;height:56px;position:relative;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.cc-ico img{object-fit:contain}
.mnav a.m-card .cc-ico img{width:30px;height:30px}
.cat-badge{display:inline-flex;align-items:center;margin-left:8px;padding:2px 7px;border-radius:6px;background:var(--c,var(--purple));color:#fff;font-family:var(--body);font-size:10px;font-weight:800;letter-spacing:.05em;line-height:1.5;text-transform:uppercase;vertical-align:middle;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.3)}
.ccard .cat-badge{position:absolute;top:14px;right:14px;margin:0}
h1 .cat-badge,h2 .cat-badge{font-size:12px;padding:3px 9px;margin-left:12px;vertical-align:.35em;text-shadow:none;letter-spacing:.06em}
.cat-tagline{display:inline-block;margin-bottom:4px;font-family:var(--pixel);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
/* Ícono grande de la cabecera, con el brillo del color de la categoría */
.phead-ico{flex:none;display:grid;place-items:center;width:84px;height:84px;border-radius:20px;background:radial-gradient(closest-side,var(--glow),transparent),var(--surface);border:1px solid var(--line);box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
.phead .phead-ico canvas,.phead .phead-ico img{width:60px;height:60px;padding:0;border:0;background:none;border-radius:0;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}
/* Imagen de cabecera: a todo el ancho y con degradado para que el texto se lea */
.phead.has-banner .bgw{opacity:1;background-size:cover;background-position:center;image-rendering:auto;-webkit-mask-image:none;mask-image:none}
.phead.has-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,9,21,.94) 0%,rgba(13,9,21,.78) 40%,rgba(13,9,21,.3) 100%),linear-gradient(0deg,rgba(13,9,21,.6),transparent 50%)}
.phead.has-banner .phead-in{z-index:1;padding-block:52px}
.rk2-sec.has-banner{position:relative}
.rk2-sec.has-banner::before{content:"";position:absolute;inset:0 0 auto;height:440px;background:var(--banner) center/cover no-repeat;opacity:.5;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent);pointer-events:none}
.rk2-sec.has-banner>.wrap{position:relative}
@media (max-width:720px){.phead-ico{width:64px;height:64px;border-radius:16px}.phead .phead-ico canvas,.phead .phead-ico img{width:44px;height:44px}.phead.has-banner .phead-in{padding-block:34px}}

/* ===== Abrir la ficha de un producto ===== */
.p-open{cursor:pointer}
.prod h3.p-open:hover,.rk2-name.p-open:hover,.rk-head .nm.p-open:hover{color:var(--gold)}
.qs-item{position:relative}
.pinfo{position:absolute;top:10px;left:10px;z-index:3;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:rgba(13,9,21,.6);border:1px solid var(--line);color:var(--muted);backdrop-filter:blur(6px);opacity:.85;transition:opacity .15s,color .15s,border-color .15s,transform .15s}
.pinfo:hover{opacity:1;color:var(--white);border-color:var(--gold);transform:scale(1.06)}
.rk2>.pinfo{top:12px;left:12px}

/* ===== Ficha de producto ===== */
.pd-scrim{position:fixed;inset:0;z-index:78;display:grid;place-items:center;padding:20px;background:rgba(5,3,10,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:pdFade .2s ease}
.pd-scrim.out{animation:pdFade .16s ease reverse forwards}
.pd{--c:#8A3CF0;position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:1fr auto;grid-template-areas:"media body" "media foot";width:min(940px,100%);max-height:min(720px,calc(100vh - 40px));overflow:hidden;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:0 40px 90px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.03) inset;animation:pdIn .28s cubic-bezier(.2,.9,.3,1.1)}
.pd-x{z-index:4;top:14px;right:14px}
.pd-media{grid-area:media;position:relative;display:grid;place-items:center;align-content:center;gap:22px;padding:40px 28px;overflow:hidden;
  background:radial-gradient(70% 55% at 50% 42%,var(--glow),transparent 70%),linear-gradient(160deg,color-mix(in srgb,var(--c) 18%,var(--bg-2)),var(--bg-2) 70%);border-right:1px solid var(--line)}
.pd-media::before{content:"";position:absolute;inset:0;background:conic-gradient(rgba(255,255,255,.03) 25%,transparent 0 50%,rgba(255,255,255,.03) 0 75%,transparent 0) 0 0/40px 40px;-webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent)}
.pd-art{position:relative;display:grid;place-items:center;width:100%;height:240px}
.pd-art canvas{width:150px;height:150px;image-rendering:pixelated;filter:drop-shadow(0 20px 22px rgba(0,0,0,.6));animation:float 5s ease-in-out infinite}
.pd-art img{max-width:88%;max-height:240px;object-fit:contain;filter:drop-shadow(0 20px 22px rgba(0,0,0,.6));animation:float 5s ease-in-out infinite}
.pd-flag{position:absolute;top:16px;left:16px;z-index:2;padding:5px 11px;border-radius:8px;background:var(--gold);color:var(--on-accent);font-family:var(--pixel);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 3px 0 var(--gold-deep)}
.pd-chat{position:relative;width:100%;max-width:330px;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.06);font-family:var(--mono);font-size:12.5px;color:#fff}
.pd-chat small{display:block;margin-bottom:4px;font-family:var(--body);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.pd-chat .pd-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-chat .pd-pfx{color:var(--c);filter:brightness(1.35)}
.pd-chat .pd-who{color:var(--text)}
.pd-body{grid-area:body;min-height:0;overflow-y:auto;padding:30px 30px 18px;overscroll-behavior:contain;scrollbar-width:thin}
.pd-cat{display:inline-flex;align-items:center;gap:7px;margin-bottom:8px;padding:4px 10px 4px 6px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--muted);transition:color .15s,border-color .15s}
.pd-cat:hover{color:var(--white);border-color:var(--surface-3)}
.pd-cat canvas,.pd-cat img{width:18px;height:18px;object-fit:contain}
.pd h2{margin:0 40px 10px 0;font-family:var(--display);font-weight:var(--display-weight,400);font-size:clamp(26px,3vw,34px);line-height:1.05;color:var(--white)}
.pd-price .pr{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;font-family:var(--display);font-size:32px;line-height:1;color:var(--gold)}
.pd-price s{font-family:var(--body);font-size:16px;font-weight:600;color:var(--faint)}
.pd-save{align-self:center;padding:3px 8px;border-radius:6px;background:rgba(74,222,128,.14);color:var(--good);font-family:var(--body);font-size:12px;font-weight:800}
.pd-price small{display:block;margin-top:6px;font-size:12.5px;color:var(--faint)}
.pd-price small.up{color:var(--good);font-weight:600}
.pd-per{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.pd-per button{display:grid;gap:1px;padding:10px 12px;border-radius:11px;background:var(--bg-2);border:2px solid var(--line);font-weight:800;font-size:14px;color:var(--muted);text-align:left;transition:border-color .15s,color .15s,background .15s}
.pd-per button small{font-size:11px;font-weight:600;color:var(--faint)}
.pd-per button.on{border-color:var(--gold);color:var(--white);background:rgba(var(--accent-rgb),.08)}
.pd-desc{margin-top:18px;color:var(--muted);font-size:14.5px;line-height:1.65}
.pd-desc p{margin:0 0 10px}
.pd-desc .hl{color:var(--good)}
.pd-h{margin:20px 0 10px;font-family:var(--pixel);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.pd-perks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pd-perks li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text)}
.pd-perks svg{flex:none;margin-top:2px;padding:3px;width:20px;height:20px;border-radius:6px;background:rgba(74,222,128,.14);color:var(--good)}
.pd-attrs{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pd-attrs div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 14px;font-size:13.5px}
.pd-attrs div:nth-child(odd){background:rgba(255,255,255,.025)}
.pd-attrs dt{color:var(--muted)}
.pd-attrs dd{margin:0;font-weight:700;color:var(--white);text-align:right}
.pd-attrs .tagp{background:var(--c)}
.pd-trust{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--faint)}
.pd-trust span{display:inline-flex;align-items:center;gap:6px}
.pd-trust svg{width:15px;height:15px;color:var(--gold)}
.pd-foot{grid-area:foot;display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;padding:16px 30px 22px;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--bg-2))}
.pd-qty{display:grid;gap:6px}
.pd-qty .lbl{margin:0}
.pd-qty .step{margin:0;width:fit-content}
.pd-qty .step button{width:36px;height:38px;font-size:16px}
.pd-qty .step span{min-width:32px}
.pd-presets{display:flex;gap:6px}
.pd-presets button{padding:5px 10px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--muted)}
.pd-presets button.on,.pd-presets button:hover{border-color:var(--gold);color:var(--white)}
.pd-total{display:grid;margin-left:auto;text-align:right}
.pd-total small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.pd-total b{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1;color:var(--white)}
.pd-btns{display:flex;gap:10px;width:100%}
.pd-btns .pd-buy{flex:1;padding:14px 20px;font-size:15px;border-radius:12px}
.pd-gift{padding:14px 18px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);color:var(--text)}
.pd-gift:hover:not(:disabled){border-color:var(--gold);color:var(--white)}
.pd-gift:disabled{opacity:.5;cursor:not-allowed}
@keyframes pdIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pdFade{from{opacity:0}to{opacity:1}}
/* Móvil: hoja que sube desde abajo */
@media (max-width:760px){
  .pd-scrim{place-items:end center;padding:0}
  .pd{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"media" "body" "foot";max-height:92vh;border-radius:20px 20px 0 0;animation:pdUp .3s cubic-bezier(.2,.9,.3,1)}
  .pd-media{padding:26px 20px 18px;gap:14px;border-right:0;border-bottom:1px solid var(--line)}
  .pd-art{height:130px}
  .pd-art canvas{width:96px;height:96px}
  .pd-art img{max-height:130px}
  .pd-body{padding:20px 20px 12px}
  .pd-foot{padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px))}
  .pd-presets{display:none}
}
@keyframes pdUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pd,.pd-scrim,.pd-art canvas,.pd-art img{animation:none}}