/* ============================================================
   VALESUKISHOP — tienda profesional (mezcla AiWave + Isak)
   ============================================================ */

.shop-body{ padding-bottom:0; }
.shop-main{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 24px; overflow-x:clip; }

/* ---------- Encabezado en píldora ---------- */
.shop-nav{
  position:sticky;
  top:14px;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  max-width:1200px;
  margin:14px auto 0;
  padding:7px 7px 7px 20px;
  border-radius:999px;
  background:linear-gradient(rgba(20,17,28,0.82), rgba(20,17,28,0.82)) padding-box, linear-gradient(135deg, rgba(255,79,163,0.45), rgba(139,92,246,0.45)) border-box;
  border:1px solid transparent;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 50px -24px rgba(0,0,0,0.9);
}
.shop-nav__brand{ display:flex; align-items:center; gap:8px; text-decoration:none; }
.shop-nav__word{
  font-family:var(--font-music);
  font-size:1.5rem;
  line-height:1;
  color:#fff;
  text-shadow:0 0 22px rgba(255,79,163,0.7);
}
.shop-nav__tag{
  padding:3px 9px;
  border-radius:999px;
  background:var(--aw-grad);
  color:#fff;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.shop-nav__pill{ display:flex; gap:2px; }
.shop-nav__pill a, .shop-nav__ghost, .shop-nav__cta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 15px;
  border-radius:999px;
  font-size:.84rem;
  font-weight:500;
  text-decoration:none;
  transition:background .2s, color .2s, filter .2s;
}
.shop-nav__pill a{ color:#B9B3CC; }
.shop-nav__pill a:hover{ color:#fff; background:rgba(255,255,255,0.06); }
.shop-nav__actions{ display:flex; gap:6px; }
.shop-nav__ghost{ color:#fff; background:rgba(255,255,255,0.05); }
.shop-nav__ghost:hover{ color:#fff; background:rgba(255,255,255,0.1); }
.shop-nav__cta{ color:#fff; font-weight:600; background:var(--aw-grad); box-shadow:0 8px 22px -8px rgba(255,79,163,0.9); }
.shop-nav__cta:hover{ color:#fff; filter:brightness(1.1); }

/* ---------- Etiqueta en píldora y títulos de sección (Isak) ---------- */
.shop-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 14px 5px 5px;
  border-radius:999px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.09);
  color:#fff;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.shop-pill i{
  width:26px; height:26px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--aw-grad);
  font-size:.8rem;
}
.shop-section{ padding:80px 0 0; scroll-margin-top:90px; }
.shop-section__head{ margin-bottom:28px; }
.shop-section__title{
  margin:16px 0 0;
  font-size:clamp(1.8rem, 3.2vw, 2.7rem);
  font-weight:500;
  letter-spacing:-0.035em;
  color:#fff;
}

/* ---------- Portada ---------- */
.shop-hero{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
  padding:72px 0 20px;
}
.shop-hero__gridlines{
  position:absolute;
  inset:-30px 0 auto;
  height:620px;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,143,200,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,168,255,0.06) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 40% 40%, #000 30%, transparent 75%);
  mask-image:radial-gradient(ellipse 70% 70% at 40% 40%, #000 30%, transparent 75%);
}
.shop-hero__title{
  margin:20px 0 18px;
  font-size:clamp(2.3rem, 4.4vw, 4rem);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-0.045em;
  color:#fff;
  text-wrap:balance;
}
.shop-hero__sub{ margin:0 0 26px; max-width:48ch; color:#C9C3DA; font-size:1.02rem; line-height:1.65; }
.shop-hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.shop-trust{
  list-style:none;
  margin:34px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.shop-trust li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
}
.shop-trust i{
  width:36px; height:36px;
  flex-shrink:0;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--aw-grad-soft);
  color:#FF8AC4;
}
.shop-trust strong{ display:block; color:#fff; font-size:.8rem; font-weight:600; }
.shop-trust span{ color:var(--aw-muted); font-size:.72rem; }

/* Producto destacado dentro de la ventana con borde luminoso */
.shop-feature__body{
  display:grid;
  grid-template-columns:1fr;
  border-radius:0 0 21px 21px;
  overflow:hidden;
  background:linear-gradient(180deg, #13111A, #0F0E15);
}
.shop-feature__media{ position:relative; aspect-ratio:4 / 3; overflow:hidden; background:#16141E; }
.shop-feature__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.22,1,.36,1); }
.shop-feature:hover .shop-feature__media img{ transform:scale(1.05); }
.shop-feature__flag{
  position:absolute; top:14px; left:14px;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(14,12,21,0.75);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,79,163,0.4);
  color:#FFC2E1;
  font-size:.72rem;
  font-weight:600;
}
.shop-feature__info{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:6px; }
.shop-feature__cat{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#FF8AC4; font-weight:600; }
.shop-feature__info h3{ margin:0; font-size:1.3rem; font-weight:600; color:#fff; }
.shop-feature__price{ margin:0 0 10px; font-size:1.4rem; font-weight:700; background:var(--aw-grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.shop-feature__skeleton{ height:420px; background:linear-gradient(100deg, #16141E 30%, #201C2B 50%, #16141E 70%); background-size:200% 100%; animation:shopShimmer 1.4s linear infinite; }
.shop-feature__empty{ padding:80px 20px; text-align:center; color:var(--aw-muted); }
.shop-feature__empty i{ font-size:2rem; color:#FF8AC4; }
@keyframes shopShimmer{ to{ background-position:-200% 0; } }

/* ---------- Barra de herramientas del catálogo ---------- */
.shop-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.shop-filters{ display:flex; flex-wrap:wrap; gap:8px; }
.shop-filters[hidden]{ display:none; }
.shop-chip{
  padding:8px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.03);
  color:#C9C3DA;
  font-family:inherit;
  font-size:.82rem;
  font-weight:500;
  cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
}
.shop-chip:hover{ color:#fff; border-color:rgba(255,79,163,0.45); }
.shop-chip.is-active{ color:#fff; background:var(--aw-grad); border-color:transparent; box-shadow:0 8px 20px -10px rgba(255,79,163,0.9); }
.shop-toolbar__right{ display:flex; gap:10px; flex-wrap:wrap; }
.shop-search{
  display:flex; align-items:center; gap:8px;
  padding:0 14px;
  height:42px;
  border-radius:12px;
  background:#16141E;
  border:1px solid rgba(255,255,255,0.1);
  color:var(--aw-muted);
  transition:border-color .2s, box-shadow .2s;
}
.shop-search:focus-within{ border-color:#FF4FA3; box-shadow:0 0 0 3px rgba(255,79,163,0.18); }
.shop-search input{ border:none; outline:none; background:transparent; color:#fff; font-family:inherit; font-size:.86rem; width:200px; }
.shop-search input::placeholder{ color:#7D7892; }
.shop-sort{
  height:42px;
  padding:0 36px 0 14px;
  border-radius:12px;
  background:#16141E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23FF8AC4' d='M8 11 3 6h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid rgba(255,255,255,0.1);
  color:#fff;
  font-family:inherit;
  font-size:.86rem;
  -webkit-appearance:none;
  appearance:none;
  color-scheme:dark;
  cursor:pointer;
}
.shop-sort:focus{ outline:none; border-color:#FF4FA3; }
.shop-count{ margin:18px 0 16px; color:var(--aw-muted); font-size:.82rem; }

/* ---------- Tarjetas de producto ---------- */
.shop-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:22px; }
.product-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(180deg, #17151F, #13121A);
  border:1px solid rgba(255,255,255,0.07);
  isolation:isolate;
  transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s;
}
.product-card::after{
  content:'';
  position:absolute; inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s;
  background:radial-gradient(280px circle at var(--spot-x,50%) var(--spot-y,50%), rgba(255,79,163,0.14), transparent 70%);
}
.product-card:hover{ transform:translateY(-6px); border-color:rgba(255,79,163,0.5); box-shadow:0 26px 50px -26px rgba(255,79,163,0.7); }
.product-card:hover::after{ opacity:1; }
.product-card__media{ position:relative; aspect-ratio:1 / 1; overflow:hidden; background:#1B1823; }
.product-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.22,1,.36,1); }
.product-card:hover .product-card__media img{ transform:scale(1.07); }
.product-card.is-soldout .product-card__media img{ filter:grayscale(.75) brightness(.7); }
.product-card__cat{
  position:absolute; left:12px; bottom:12px;
  padding:5px 10px;
  border-radius:8px;
  background:rgba(14,12,21,0.75);
  backdrop-filter:blur(8px);
  color:#FFC2E1;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.product-badge{
  position:absolute; top:12px; right:12px;
  padding:5px 11px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.04em;
}
.shop-feature__info .product-badge{ position:static; align-self:flex-start; }
.product-badge--out{ background:rgba(14,12,21,0.85); color:#FF9B9B; border:1px solid rgba(255,92,93,0.5); }
.product-badge--low{ background:var(--aw-grad); color:#fff; box-shadow:0 6px 16px -6px rgba(255,79,163,0.9); }
.product-card__body{ flex:1; display:flex; flex-direction:column; gap:6px; padding:18px 18px 20px; }
.product-card__name{ margin:0; font-size:1.02rem; font-weight:600; color:#fff; letter-spacing:-0.01em; }
.product-card__desc{
  margin:0;
  color:var(--aw-muted);
  font-size:.82rem;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-card__foot{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:auto; padding-top:8px; }
.product-card__price{ margin:0; font-size:1.25rem; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.product-card__soldout{ font-size:.76rem; color:#FF9B9B; }
.product-card__buy{ display:flex; gap:8px; margin-top:12px; }
.product-card__btn{ flex:1; justify-content:center; }
.product-qty{
  display:flex; align-items:center;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  overflow:hidden;
  background:#0F0E15;
}
.product-qty button{ width:32px; height:38px; border:none; background:transparent; color:#fff; font-size:1rem; cursor:pointer; transition:background .2s; }
.product-qty button:hover{ background:rgba(255,79,163,0.15); }
.product-qty input{
  width:34px; height:38px;
  border:none;
  border-left:1px solid rgba(255,255,255,0.08);
  border-right:1px solid rgba(255,255,255,0.08);
  background:transparent;
  color:#fff;
  text-align:center;
  font-family:inherit;
  font-size:.86rem;
  -moz-appearance:textfield;
}
.product-qty input::-webkit-outer-spin-button, .product-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.product-card--skeleton{ min-height:420px; background:linear-gradient(100deg, #16141E 30%, #201C2B 50%, #16141E 70%); background-size:200% 100%; animation:shopShimmer 1.4s linear infinite; }
.shop-empty{ grid-column:1 / -1; text-align:center; padding:60px 20px; border-radius:20px; border:1px dashed rgba(255,255,255,0.12); color:var(--aw-muted); }
.shop-empty i{ font-size:2rem; color:#FF8AC4; }
.shop-empty p{ margin:10px 0 0; }

/* ---------- Cómo comprar ---------- */
.shop-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
.shop-step{
  position:relative;
  padding:26px 24px;
  border-radius:20px;
  background:linear-gradient(180deg, #17151F, #13121A);
  border:1px solid rgba(255,255,255,0.07);
  overflow:hidden;
  isolation:isolate;
}
.shop-step::after{
  content:'';
  position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .3s; pointer-events:none;
  background:radial-gradient(260px circle at var(--spot-x,50%) var(--spot-y,50%), rgba(139,92,246,0.16), transparent 70%);
}
.shop-step:hover::after{ opacity:1; }
.shop-step__num{
  position:absolute; top:14px; right:20px;
  font-size:4rem; font-weight:700; line-height:1;
  background:linear-gradient(180deg, rgba(255,79,163,0.35), transparent);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.shop-step__icon{
  width:48px; height:48px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--aw-grad);
  color:#fff;
  font-size:1.25rem;
  box-shadow:0 12px 26px -10px rgba(255,79,163,0.9);
  margin-bottom:18px;
}
.shop-step h3{ margin:0 0 8px; font-size:1.05rem; font-weight:600; color:#fff; }
.shop-step p{ margin:0; color:#C9C3DA; font-size:.88rem; line-height:1.6; }
.shop-step strong{ color:#fff; }

/* ---------- Preguntas (lista con divisores, estilo Isak) ---------- */
.shop-faq{ max-width:860px; border-top:1px solid rgba(255,255,255,0.08); }
.shop-faq details{ border-bottom:1px solid rgba(255,255,255,0.08); }
.shop-faq summary{
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:20px 4px;
  cursor:pointer;
  font-size:1.05rem;
  font-weight:500;
  color:#fff;
}
.shop-faq summary::-webkit-details-marker{ display:none; }
.shop-faq summary::after{
  content:'+';
  flex-shrink:0;
  width:32px; height:32px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.05);
  color:#FF8AC4;
  font-size:1.2rem;
  transition:transform .3s, background .3s;
}
.shop-faq details[open] summary::after{ transform:rotate(45deg); background:var(--aw-grad); color:#fff; }
.shop-faq summary:focus-visible{ outline:2px solid #FF8AC4; outline-offset:2px; border-radius:8px; }
.shop-faq details p{ margin:0; padding:0 50px 22px 4px; color:#C9C3DA; line-height:1.65; }
.shop-faq a{ color:#FF8AC4; }

/* ---------- Apoyar + footer ---------- */
.shop-support{ margin-bottom:20px; }
.shop-footer{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:70px auto 0;
  padding:28px 24px 36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,0.08);
}
.shop-footer nav{ display:flex; gap:18px; flex-wrap:wrap; }
.shop-footer a{ color:var(--aw-muted); text-decoration:none; font-size:.84rem; }
.shop-footer a:hover{ color:#fff; }
.shop-footer p{ margin:0; color:var(--aw-muted); font-size:.8rem; }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .shop-nav__pill span{ display:none; }
}
@media (max-width:960px){
  .shop-hero{ grid-template-columns:1fr; gap:36px; padding-top:48px; }
  .shop-steps{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .shop-nav{ margin:10px 12px 0; padding:6px 6px 6px 16px; }
  .shop-nav__pill{ display:none; }
  .shop-nav__ghost span{ display:none; }
  .shop-main{ padding:0 16px; }
  .shop-trust{ grid-template-columns:1fr; }
  .shop-toolbar__right, .shop-search{ width:100%; }
  .shop-search input{ width:100%; }
  .shop-sort{ width:100%; }
  .shop-grid{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:14px; }
  .product-card__body{ padding:14px; }
  .product-card__buy{ flex-direction:column; }
  .product-qty{ justify-content:space-between; }
  .product-qty input{ flex:1; }
  .shop-section{ padding-top:60px; }
  .shop-faq details p{ padding-right:4px; }
}