/* Tienda: reutiliza tokens y componentes de styles.css */
.shop-page { overflow-x: hidden; }
.shop-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgb(11 9 20 / 0.55) 0%, rgb(11 9 20 / 0.86) 45%, var(--bg) 80%),
    url("assets/hero.jpg") center top / cover no-repeat;
}
.shop-nav { opacity: 1; visibility: visible; }
.shop-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 6px 0 12px;
  font-size: 14px;
  color: var(--ink);
  background: rgb(236 233 245 / 0.06);
  box-shadow: inset 0 0 0 1px var(--line-2);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
.shop-user i { font-size: 18px; color: var(--accent-hi); }
.shop-user__out {
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 8px;
}
.shop-user__out:hover { color: var(--ink); }
@media (max-width: 560px) { .shop-user span { display: none; } }

.shop {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 140px var(--gutter) 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas: "hero hero" "notice notice" "body aside";
  gap: 40px 48px;
}
.shop-hero { grid-area: hero; display: grid; gap: 16px; }
.shop-hero__title {
  font-weight: 900;
  font-stretch: 118%;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.shop-hero__sub { color: var(--ink-2); font-size: clamp(16px, 1.4vw, 19px); max-width: 58ch; }

.shop-notice {
  grid-area: notice;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 16px 20px;
  color: var(--ink);
  background: rgb(139 44 245 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(139 44 245 / 0.3);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.shop-notice--ok { background: rgb(74 222 128 / 0.08); box-shadow: inset 0 0 0 1px rgb(74 222 128 / 0.28); }
.shop-notice--error { background: rgb(248 113 113 / 0.08); box-shadow: inset 0 0 0 1px rgb(248 113 113 / 0.3); }
.shop-notice a { color: var(--accent-hi); }

.shop-body { grid-area: body; display: grid; gap: 48px; align-content: start; }
.pkg-cat { display: grid; gap: 20px; }
.pkg-cat__title { font-weight: 800; font-stretch: 112%; font-size: clamp(22px, 2.2vw, 30px); }
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.pkg {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg-2);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  transition: background-color 0.4s;
}
.pkg:hover { background: var(--bg-3); }
.pkg__media {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(80% 90% at 50% 100%, rgb(139 44 245 / 0.35), transparent 70%), var(--bg-3);
}
.pkg__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.pkg:hover .pkg__media img { transform: scale(1.05); }
.pkg__media i { font-size: 48px; color: var(--accent-hi); }
.pkg__body { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 22px; }
.pkg__name { font-weight: 800; font-stretch: 112%; font-size: 20px; line-height: 1.15; }
.pkg__desc { color: var(--ink-2); font-size: 15px; }
.pkg__desc p { margin: 0 0 8px; }
.pkg__desc a { color: var(--accent-hi); }
.pkg__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.pkg__price { font-weight: 800; font-size: 24px; letter-spacing: -0.01em; }
.pkg__price s { color: var(--ink-3); font-weight: 500; font-size: 16px; margin-right: 4px; }
.pkg .btn.is-loading { opacity: 0.6; pointer-events: none; }
.pkg--skeleton {
  min-height: 380px;
  background: linear-gradient(100deg, var(--bg-2) 40%, var(--bg-3) 50%, var(--bg-2) 60%) 0 0 / 300% 100%;
  animation: shimmer 1.6s linear infinite;
}

.shop-empty {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 40px;
  background: var(--bg-2);
  color: var(--ink-2);
}
.shop-empty i { font-size: 36px; color: var(--accent-hi); }

.shop-howto {
  grid-area: aside;
  align-self: start;
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
  padding: 28px;
  background: rgb(17 14 30 / 0.85);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.shop-howto h2 { font-weight: 800; font-stretch: 112%; font-size: 20px; }
.shop-howto ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--ink-2); font-size: 15px; }
.shop-howto strong { color: var(--ink); }
.shop-howto__legal { font-size: 13px; color: var(--ink-3); }
.shop-howto__legal a { color: var(--ink-2); }

.shop-footer { position: relative; z-index: 1; }

.shop-modal {
  max-width: min(92vw, 460px);
  padding: 32px;
  border: 0;
  color: var(--ink);
  background: var(--bg-2);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.shop-modal::backdrop { background: rgb(7 6 13 / 0.8); backdrop-filter: blur(4px); }
.shop-modal h2 { font-weight: 800; font-stretch: 112%; font-size: 24px; margin-bottom: 10px; }
.shop-modal p { color: var(--ink-2); margin-bottom: 24px; }
.shop-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 960px) {
  .shop { grid-template-columns: 1fr; grid-template-areas: "hero" "notice" "body" "aside"; padding-top: 112px; }
  .shop-howto { position: static; }
}