/* ============================================================
   ChocloShop · diseño de la tienda (solo index.html)
   Se apoya en styles.css y lo pisa donde hace falta.
   ============================================================ */
body.shop {
  --corn: #ffc83d;
  --corn-deep: #e89b00;
  --corn-ink: #2a1a00;
  --husk: #3fbf6a;
  --blood: #f43f5e;
  --sheriff: #38bdf8;
  --violet: #8b5cf6;
  --ink: #05060d;
  --panel: #0c0d18;
  --panel-2: #12131f;
  --line: #1d1f33;
  --line-2: #2a2d47;
  --soft: #a3a8c9;
  --dim: #6b7099;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  font-family: 'Rubik', system-ui, sans-serif;
  background: var(--ink);
  background-image:
    radial-gradient(60rem 30rem at 85% -10%, rgba(139, 92, 246, .16), transparent 60%),
    radial-gradient(40rem 26rem at -10% 30%, rgba(255, 200, 61, .06), transparent 60%);
  background-attachment: fixed;
  color: #eef0ff;
}
body.shop::before { display: none; }

/* Patrón temático muy tenue: cuchillo, revólver y choclo */
.bg-pattern {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(20 20) rotate(-20 12 12)'%3E%3Cpath d='M20.5 3.5c-1 4.2-5.4 9-9 11.5L9 12.5c2.5-3.6 7.3-8 11.5-9zM7.5 11 13 16.5M10 13.5l-5.6 5.6a1.4 1.4 0 0 0 2 2L12 15.5'/%3E%3C/g%3E%3Cg transform='translate(110 40) rotate(15 12 12)'%3E%3Cpath d='M11 7h10.5v3H11M5.5 6.5h5.5V12H9.5l-2.5 7.5H3.5l2.5-7.5z'/%3E%3C/g%3E%3Cg transform='translate(60 115) rotate(10 12 12)'%3E%3Cpath d='M12 3c2.8 0 4.5 3.2 4.5 7.5S14.8 19 12 19s-4.5-4.2-4.5-8.5S9.2 3 12 3zM9 8h6M8.5 11.5h7M9 15h6'/%3E%3C/g%3E%3Cg transform='translate(140 125)'%3E%3Cpath d='M12 2.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6.1L12 16.1l-5.4 3 1.2-6.1-4.5-4.2 6.1-.7z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 180px 180px;
}
body.shop main, body.shop footer { position: relative; z-index: 1; }
body.shop nav { position: sticky; top: 0; z-index: 100; }

/* ── Íconos ── */
.ic { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.18em; }

/* ── Tipografía ── */
body.shop h1, body.shop h2, body.shop h3,
body.shop .section-title, body.shop .contact-hero-title, body.shop .robux-title,
body.shop .weapon-price, body.shop .offer-price-combo, body.shop .buyback-price-ars,
body.shop .cart-total-value, body.shop .price-value, body.shop .cart-item-price, body.shop .rs-val {
  font-family: 'Lilita One', 'Rubik', sans-serif;
  font-weight: 400;
  letter-spacing: .2px;
  text-transform: none;
}
body.shop button, body.shop input, body.shop select { font-family: inherit; }
body.shop .section-subtitle { font-family: inherit; color: var(--dim); font-size: .92rem; margin: .15rem 0 0; }
body.shop .input-group label { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 600; color: var(--soft); }

:focus-visible { outline: 2px solid var(--corn); outline-offset: 2px; border-radius: 6px; }

/* ── Botones ── */
.btn-corn, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  border-radius: 999px; padding: .85rem 1.5rem; font-weight: 700; font-size: .98rem;
  cursor: pointer; transition: transform .25s var(--ease-spring), box-shadow .25s, background .2s, border-color .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn-corn {
  background: linear-gradient(180deg, #ffd96a, var(--corn) 45%, var(--corn-deep));
  color: var(--corn-ink); border: none;
  box-shadow: 0 6px 0 #a86c00, 0 14px 30px rgba(255, 200, 61, .22);
}
.btn-corn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #a86c00, 0 18px 36px rgba(255, 200, 61, .3); }
.btn-corn:active { transform: translateY(4px); box-shadow: 0 2px 0 #a86c00, 0 8px 18px rgba(255, 200, 61, .2); }
.btn-ghost { background: rgba(255, 255, 255, .04); color: #eef0ff; border: 1.5px solid var(--line-2); }
.btn-ghost:hover { border-color: var(--corn); color: var(--corn); transform: translateY(-2px); }
.btn-block { width: 100%; }

body.shop .btn-whatsapp, body.shop .btn-gmail { border-radius: 999px; text-transform: none; letter-spacing: 0; font-family: inherit; }
body.shop .back-btn { font-family: inherit; color: var(--soft); gap: .4rem; }
body.shop .back-btn:hover { color: var(--corn); }

/* ── Navegación ── */
body.shop nav {
  height: 68px; padding: 0 1.5rem;
  background: rgba(5, 6, 13, .78);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.nav-logo { gap: .55rem !important; text-transform: none !important; }
.nav-logo-mark { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; transition: transform .45s var(--ease-spring); }
.nav-logo:hover .nav-logo-mark { transform: rotate(-12deg) scale(1.08); }
.nav-logo-text { font-family: 'Lilita One', sans-serif; font-size: 1.45rem; letter-spacing: .3px; color: #fff; }
.nav-logo-text b { font-weight: 400; color: var(--corn); }
body.shop .nav-links { gap: .15rem; }
body.shop .nav-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 500;
  color: var(--dim); padding: .5rem .8rem; border-radius: 999px; position: relative;
}
body.shop .nav-btn:hover { color: #fff; background: rgba(255, 255, 255, .05); }
body.shop .nav-btn.active { color: var(--corn-ink); background: var(--corn); font-weight: 700; }
body.shop .cart-btn {
  border-radius: 999px; text-transform: none; font-size: .9rem; gap: .5rem; padding: .5rem .95rem;
  background: rgba(255, 200, 61, .1); border: 1.5px solid rgba(255, 200, 61, .35); color: var(--corn);
}
body.shop .cart-btn:hover { background: rgba(255, 200, 61, .18); border-color: var(--corn); box-shadow: 0 0 24px rgba(255, 200, 61, .2); }
body.shop .cart-badge { background: var(--corn); color: var(--corn-ink); box-shadow: none; font-size: .72rem; min-width: 20px; padding: 1px 6px; }
.cart-btn.bump { animation: cartBump .5s var(--ease-spring); }
@keyframes cartBump { 0% { transform: scale(1); } 35% { transform: scale(1.18) rotate(-6deg); } 100% { transform: scale(1); } }

/* ── Transición entre secciones ── */
body.shop .page.active { animation: pageIn .45s var(--ease-out); }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ═══════════ INICIO ═══════════ */
.hero2 {
  max-width: 1180px; margin: 0 auto; padding: 4.5rem 2rem 3rem;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items: center;
}
.hero2-title {
  font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: .98; margin-bottom: 1.2rem;
  color: #fff; max-width: 13ch;
  text-shadow: 0 4px 0 rgba(0, 0, 0, .35);
}
.hero2-lead { color: var(--soft); font-size: 1.12rem; line-height: 1.6; max-width: 44ch; margin-bottom: 2rem; }
.hero2-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.hero2-facts { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem 1.4rem; color: var(--soft); font-size: .9rem; }
.hero2-facts li { display: inline-flex; align-items: center; gap: .45rem; }
.hero2-facts .ic { color: var(--husk); }

.hero2-stage { position: relative; aspect-ratio: 1 / 1; max-width: 480px; justify-self: center; width: 100%; }
.stage-glow {
  position: absolute; inset: 8% 8% 4%; border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(255, 200, 61, .32), rgba(139, 92, 246, .18) 45%, transparent 70%);
  filter: blur(8px);
}
.mascot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent 100%); mask-image: radial-gradient(closest-side, #000 80%, transparent 100%); animation: mascotIdle 4.5s ease-in-out infinite 1.2s; transition: scale .5s var(--ease-spring); }
.hero2-stage:hover .mascot { scale: 1.04; }
@keyframes mascotIdle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-1.5deg); } }

.stage-prop { position: absolute; width: 22%; height: 22%; stroke-width: 1.6; }
.stage-knife { color: var(--blood); right: -4%; top: 60%; z-index: 2; filter: drop-shadow(0 0 14px rgba(244, 63, 94, .55)); animation: propFloat 6s ease-in-out infinite 1.4s; --rot: 12deg; }
.stage-gun { color: var(--sheriff); left: -6%; top: 44%; z-index: 2; filter: drop-shadow(0 0 14px rgba(56, 189, 248, .55)); animation: propFloat 6.5s ease-in-out infinite 1.6s; --rot: -14deg; transform: scaleX(-1); }
@keyframes propFloat { 0%, 100% { translate: 0 0; rotate: var(--rot); } 50% { translate: 0 -12px; rotate: calc(var(--rot) * -0.4); } }

.stage-kernels { position: absolute; inset: 0; pointer-events: none; }
.kernel { position: absolute; width: 16px; height: 16px; opacity: 0; animation: kernelFloat var(--d, 7s) ease-in-out infinite var(--delay, 0s); }
@keyframes kernelFloat {
  0% { opacity: 0; transform: translateY(20px) rotate(0); }
  15% { opacity: .9; }
  85% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-120px) rotate(var(--spin, 160deg)); }
}

/* Entrada orquestada del inicio (solo la primera vez) */
.intro .hero2-title, .intro .hero2-lead, .intro .hero2-actions, .intro .hero2-facts { animation: rise .7s var(--ease-out) both; }
.intro .hero2-lead { animation-delay: .08s; }
.intro .hero2-actions { animation-delay: .16s; }
.intro .hero2-facts { animation-delay: .24s; }
.intro .mascot { animation: mascotIn .9s var(--ease-spring) both .15s; }
.intro .stage-knife { animation: propIn .8s var(--ease-spring) both .45s, propFloat 6s ease-in-out infinite 1.4s; }
.intro .stage-gun { animation: propIn .8s var(--ease-spring) both .55s, propFloat 6.5s ease-in-out infinite 1.6s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mascotIn { from { opacity: 0; transform: translateY(40px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes propIn { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }

.home-block { max-width: 1180px; margin: 0 auto; padding: 1rem 2rem 2.5rem; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.block-title { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.6rem; color: #fff; }
.block-title .ic { color: var(--corn); }
.link-more { background: none; border: none; color: var(--corn); font-weight: 600; cursor: pointer; font-size: .92rem; }
.link-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.featured-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

body.shop .home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; max-width: none; padding: 0; margin: 0; }
body.shop .home-card {
  display: flex; gap: .9rem; align-items: flex-start; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.15rem 1.2rem;
}
.home-card-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; font-size: 1.4rem; background: rgba(255, 200, 61, .1); color: var(--corn); }
.home-card-icon .ic { width: 24px; height: 24px; }
body.shop .home-card-title { font-weight: 700; margin: .1rem 0 .2rem; color: #fff; }
body.shop .home-card-desc { color: var(--dim); font-size: .88rem; line-height: 1.45; }

/* ═══════════ ENCABEZADO DE SECCIÓN ═══════════ */
.page-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; }
.page-head-icon {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(160deg, rgba(255, 200, 61, .22), rgba(255, 200, 61, .06)); color: var(--corn);
  border: 1px solid rgba(255, 200, 61, .25);
}
.page-head-icon .ic { width: 26px; height: 26px; }
body.shop .section-title { font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.05; margin: 0; color: #fff; }

/* ── Filtros y buscador ── */
body.shop .filters { gap: .45rem; margin-bottom: 1rem; }
body.shop .filter-btn {
  text-transform: none; letter-spacing: 0; font-size: .86rem; font-weight: 500; padding: .45rem 1rem;
  background: var(--panel); border-color: var(--line); color: var(--soft);
}
body.shop .filter-btn:hover { color: #fff; border-color: var(--line-2); }
body.shop .filter-btn.active { background: var(--corn); border-color: var(--corn); color: var(--corn-ink); font-weight: 700; box-shadow: 0 0 18px rgba(255, 200, 61, .25); }
.toolbar { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.search-field {
  flex: 1; min-width: 200px; display: flex; align-items: center; gap: .6rem;
  background: var(--panel); border: 1.5px solid var(--line); border-radius: 999px; padding: 0 1rem; color: var(--dim);
  transition: border-color .2s, box-shadow .2s;
}
.search-field:focus-within { border-color: var(--corn); box-shadow: 0 0 0 4px rgba(255, 200, 61, .1); color: var(--corn); }
body.shop .search-field .search-input { border: none; background: none; padding: .75rem 0; box-shadow: none; font-size: .95rem; }
.search-bar-wrap::before { display: none; }
.select-field {
  background: var(--panel); border: 1.5px solid var(--line); color: #eef0ff; border-radius: 999px;
  padding: .7rem 1.1rem; font-size: .9rem; cursor: pointer; outline: none;
}
.select-field:focus { border-color: var(--corn); }

/* ═══════════ TARJETAS DE ARMAS ═══════════ */
body.shop .weapon-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.1rem; }
body.shop .weapon-card {
  --rc: #64748b;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .35s var(--ease-out), border-color .25s, box-shadow .35s;
  transform-style: preserve-3d; will-change: transform;
}
body.shop .weapon-card::before { display: none; }
body.shop .weapon-img-wrap {
  margin: .5rem .5rem 0; border-radius: calc(var(--r-lg) - 6px);
  background:
    radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--rc) 34%, transparent), transparent 66%),
    linear-gradient(160deg, var(--panel-2), #0a0b14);
}
body.shop .weapon-img-wrap::after { background: none; }
body.shop .weapon-img-wrap img { padding: 1rem; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); transition: transform .45s var(--ease-spring); }
.weapon-ph { width: 46%; height: 46%; color: color-mix(in srgb, var(--rc) 70%, #fff); opacity: .8; }
.weapon-tags { position: absolute; top: .55rem; left: .55rem; display: flex; gap: .3rem; z-index: 2; }
.wtag { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; background: rgba(5, 6, 13, .72); backdrop-filter: blur(6px); color: #fff; }
.wtag .ic { width: 12px; height: 12px; }
.wtag-low { color: #ffb4c0; }
.wtag-set { color: var(--corn); }
body.shop .weapon-info { padding: .9rem 1rem .35rem; }
body.shop .weapon-name { font-size: 1rem; font-weight: 700; color: #fff; }
body.shop .weapon-rarity { font-family: inherit; font-size: .78rem; text-transform: none; letter-spacing: 0; font-weight: 600; margin: .15rem 0 0; }
.weapon-parts { color: var(--dim); font-size: .76rem; margin-top: .25rem; line-height: 1.35; }
body.shop .stock-badge { font-size: .74rem; color: var(--dim); margin: .35rem 0 0; }
body.shop .weapon-bottom { padding: .5rem 1rem 1rem; align-items: flex-end; }
body.shop .weapon-price { font-size: 1.35rem; color: var(--corn); line-height: 1; }
body.shop .weapon-price span { font-family: 'Rubik', sans-serif; font-size: .7rem; color: var(--dim); }
.bundle-hint { font-size: .72rem; color: var(--husk); margin-top: .3rem; }
.weapon-actions { display: flex; gap: .35rem; }
body.shop .btn-add-cart, body.shop .btn-buy-now {
  display: inline-grid; place-items: center; height: 38px; border-radius: 12px; text-transform: none; letter-spacing: 0;
  font-size: .85rem; font-weight: 700; transition: transform .2s var(--ease-spring), background .2s, color .2s;
}
body.shop .btn-add-cart { width: 38px; padding: 0; background: rgba(255, 255, 255, .05); border: 1.5px solid var(--line-2); color: var(--soft); }
body.shop .btn-add-cart:hover { background: rgba(255, 200, 61, .14); border-color: var(--corn); color: var(--corn); }
body.shop .btn-add-cart .ic { width: 18px; height: 18px; }
body.shop .btn-add-cart.popped { animation: pop .45s var(--ease-spring); }
@keyframes pop { 40% { transform: scale(1.25); background: var(--corn); color: var(--corn-ink); } }
body.shop .btn-buy-now { padding: 0 .95rem; background: var(--corn); color: var(--corn-ink); border: none; }
body.shop .btn-buy-now:hover { background: #ffd96a; transform: translateY(-1px); }
body.shop .out-of-stock { opacity: .4; filter: grayscale(.6); }

@media (hover: hover) and (pointer: fine) {
  body.shop .weapon-card:hover {
    border-color: color-mix(in srgb, var(--rc) 55%, transparent);
    box-shadow: 0 22px 50px -18px color-mix(in srgb, var(--rc) 55%, transparent);
  }
  body.shop .weapon-card:hover .weapon-img-wrap img { transform: scale(1.08) translateZ(30px); }
}

/* Aparición escalonada de la grilla (solo al entrar a la sección) */
.reveal-in { animation: cardIn .55s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

/* Chroma: mantiene el borde arcoíris con las nuevas esquinas */
body.shop .chroma-card::after { background: var(--panel); border-radius: calc(var(--r-lg) - 2px); }
body.shop .chroma-label { font-size: .7rem; letter-spacing: .5px; text-transform: none; }

/* Grano que vuela al carrito */
.fly-kernel { position: fixed; width: 22px; height: 22px; z-index: 400; pointer-events: none; }

/* ── Loader ── */
.loader-corn { display: inline-block; width: 22px; height: 22px; margin-right: .5rem; vertical-align: -5px; animation: spin 1s var(--ease-spring) infinite; }
.loader-corn svg { width: 100%; height: 100%; }
@keyframes spin { to { transform: rotate(360deg); } }
body.shop .no-items { color: var(--dim); display: flex; flex-direction: column; align-items: center; gap: .6rem; }
body.shop .no-items .ic { width: 34px; height: 34px; color: var(--line-2); }

/* ═══════════ OFERTAS Y VENTA ═══════════ */
body.shop .offer-card, body.shop .buyback-card { background: var(--panel); border-color: var(--line); border-radius: var(--r-lg); }
body.shop .offer-card:hover { border-color: rgba(255, 200, 61, .5); box-shadow: 0 20px 44px -20px rgba(255, 200, 61, .45); background: var(--panel); }
body.shop .offer-badge, body.shop .buyback-badge { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .74rem; }
body.shop .offer-badge { background: var(--corn); color: var(--corn-ink); }
body.shop .buyback-badge { background: var(--husk); color: #04220f; }
body.shop .offer-weapons-strip { background: linear-gradient(160deg, var(--panel-2), #0a0b14); }
body.shop .offer-weapon-thumb { border-radius: 12px; background: rgba(255, 255, 255, .04); }
body.shop .offer-weapon-thumb .ic { width: 22px; height: 22px; color: var(--sheriff); }
body.shop .offer-name { font-family: 'Lilita One', sans-serif; font-weight: 400; text-transform: none; font-size: 1.15rem; }
body.shop .offer-price-combo { color: var(--corn); }
body.shop .buyback-card:hover { border-color: rgba(63, 191, 106, .5); box-shadow: 0 20px 44px -20px rgba(63, 191, 106, .4); background: var(--panel); }
body.shop .buyback-rarity { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .78rem; }
body.shop .buyback-price-ars { color: var(--husk); }
body.shop .buyback-price-robux { color: var(--sheriff); }
body.shop .buyback-price-robux .ic { width: 14px; height: 14px; }
body.shop .buyback-robux-note {
  display: flex; gap: .8rem; align-items: flex-start;
  background: rgba(63, 191, 106, .07); border-color: rgba(63, 191, 106, .22); border-radius: var(--r-md); font-size: .9rem;
}
body.shop .buyback-robux-note > .ic { color: var(--husk); width: 22px; height: 22px; margin-top: 1px; }
body.shop .buyback-robux-note a { color: var(--husk); }
body.shop .buyback-sell-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border-radius: 12px; }

/* ═══════════ ROBUX ═══════════ */
body.shop .robux-card, body.shop .payment-card, body.shop .account-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.robux-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.robux-gem {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #7dd3fc, #0284c7 70%); color: #fff;
  box-shadow: 0 10px 30px rgba(56, 189, 248, .35); animation: gemFloat 4s ease-in-out infinite;
}
.robux-gem .ic { width: 32px; height: 32px; stroke-width: 2.2; }
@keyframes gemFloat { 50% { transform: translateY(-4px) rotate(4deg); } }
.robux-title { font-size: 2rem; color: #fff; }
.robux-rate { color: var(--soft); margin-top: .1rem; }
.robux-rate .robux-rate-text { color: var(--corn); font-weight: 700; }
body.shop .robux-notice { display: flex; gap: .7rem; align-items: flex-start; border-radius: var(--r-md); background: rgba(56, 189, 248, .07); border-color: rgba(56, 189, 248, .22); font-size: .88rem; }
body.shop .robux-notice > .ic { color: var(--sheriff); width: 20px; height: 20px; }
body.shop .robux-stock-bar { border-radius: var(--r-md); }
body.shop .rs-val { color: var(--corn); }
body.shop .quick-btn { border-radius: 999px; font-family: inherit; font-weight: 600; padding: .55rem; }
body.shop .quick-btn:hover { border-color: var(--corn); color: var(--corn); background: rgba(255, 200, 61, .08); }
body.shop .price-display { border-radius: var(--r-md); border-color: rgba(255, 200, 61, .22); }
body.shop .price-value { font-size: 2.8rem; color: var(--corn); letter-spacing: 0; }
.price-original { font-size: .85rem; color: var(--dim); text-decoration: line-through; min-height: 1.2em; }
.price-detail { font-size: .8rem; color: var(--dim); }
body.shop .robux-tiers { border-radius: var(--r-md); }
body.shop .robux-discount-badge { align-items: center; gap: .35rem; }
body.shop .robux-discount-badge .ic { width: 14px; height: 14px; }

/* ═══════════ CARRITO Y PAGO ═══════════ */
body.shop .cart-item { background: var(--panel); border-color: var(--line); border-radius: var(--r-md); animation: rise .35s var(--ease-out); }
body.shop .cart-item-thumb { border-radius: 12px; background: var(--panel-2); }
body.shop .cart-item-thumb .ic { color: var(--soft); }
body.shop .qty-btn { border-radius: 8px; width: 28px; height: 28px; }
body.shop .qty-btn .ic { width: 14px; height: 14px; }
body.shop .qty-value { font-family: inherit; }
body.shop .cart-item-price { color: var(--corn); font-size: 1.15rem; }
body.shop .cart-item-remove { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; }
body.shop .cart-item-remove:hover { background: rgba(244, 63, 94, .12); }
body.shop .cart-total { border-radius: var(--r-md); background: var(--panel-2); }
body.shop .cart-total-value { color: var(--corn); font-size: 1.8rem; }
body.shop .cart-empty { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.cart-empty-mark { width: 110px; height: 110px; border-radius: 28px; animation: mascotIdle 4.5s ease-in-out infinite; }

body.shop .payment-row .value.alias { font-family: 'Lilita One', sans-serif; font-weight: 400; color: var(--corn); }
body.shop .payment-row .value.total { font-family: 'Lilita One', sans-serif; font-weight: 400; color: var(--corn); font-size: 1.2rem; }
body.shop .payment-steps { list-style: none; counter-reset: step; display: grid; gap: .55rem; background: none; border: none; padding: 0; margin: 0 0 1.2rem; font-size: .92rem; }
body.shop .payment-steps li { counter-increment: step; display: flex; gap: .7rem; align-items: center; color: var(--soft); }
body.shop .payment-steps li::before {
  content: counter(step); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: rgba(255, 200, 61, .14); color: var(--corn); font-weight: 700; font-size: .82rem;
}
body.shop .payment-user-box { border-radius: var(--r-md); background: rgba(255, 200, 61, .05); border-color: rgba(255, 200, 61, .2); }
body.shop .payment-actions { flex-direction: row; flex-wrap: wrap; }
body.shop .payment-actions > * { flex: 1; min-width: 180px; }
.payment-foot { display: flex; align-items: center; justify-content: center; gap: .4rem; color: var(--dim); font-size: .82rem; margin-top: 1rem; }
.payment-foot .ic { color: var(--husk); }

/* ═══════════ CUENTA ═══════════ */
body.shop .account-card h2, body.shop .account-card h3 { font-size: 1.35rem; color: #fff; }
body.shop .input-group input, body.shop .input-group select { border-radius: 12px; border-width: 1.5px; }
body.shop .input-group input:focus { border-color: var(--corn); box-shadow: 0 0 0 4px rgba(255, 200, 61, .1); }
body.shop .pill-status { text-transform: none; letter-spacing: 0; font-size: .74rem; }

/* ═══════════ CONTACTO ═══════════ */
body.shop .contact-page-wrapper { padding-top: 3rem; }
.contact-mark { width: 120px; height: 120px; border-radius: 30px; display: block; margin: 0 auto 1rem; animation: mascotIdle 4.5s ease-in-out infinite; }
body.shop .contact-hero-title { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; text-transform: none; }
body.shop .contact-card-new { text-decoration: none; color: inherit; padding: 1.1rem 1.2rem; border-radius: var(--r-md); background: var(--panel); }
body.shop .contact-card-title { font-family: 'Lilita One', sans-serif; font-weight: 400; text-transform: none; letter-spacing: .2px; font-size: 1.15rem; }
body.shop .contact-card-detail { font-family: inherit; }
body.shop .contact-card-icon { border-radius: 14px; }
body.shop .contact-card-icon .ic { width: 24px; height: 24px; }
body.shop .contact-icon-roblox { color: var(--corn); }
body.shop .contact-icon-grupo { color: var(--sheriff); }

/* ── Pie ── */
.site-foot { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 3rem 1rem 2.5rem; color: var(--dim); font-size: .8rem; text-align: center; }
.foot-mark { width: 40px; height: 40px; border-radius: 12px; opacity: .8; }

/* ── Toast ── */
body.shop .toast {
  display: flex; align-items: center; gap: .6rem; font-family: inherit; font-weight: 500;
  border-radius: 999px; padding: .75rem 1.2rem .75rem .8rem; background: #15172a; border-width: 1.5px;
  transform: translateY(16px) scale(.96); transition: transform .35s var(--ease-spring), opacity .25s;
}
body.shop .toast.show { transform: none; }
body.shop .toast .ic { width: 22px; height: 22px; padding: 3px; border-radius: 50%; }
body.shop .toast.success .ic { background: var(--husk); color: #04220f; }
body.shop .toast.error .ic { background: var(--blood); color: #fff; }

/* ═══════════ CELULAR ═══════════ */
@media (max-width: 900px) {
  .hero2 { grid-template-columns: 1fr; padding: 1.5rem 1.25rem 2rem; text-align: center; gap: .5rem; }
  .hero2-stage { order: -1; max-width: 300px; }
  .hero2-title { margin-left: auto; margin-right: auto; }
  .hero2-lead { margin-left: auto; margin-right: auto; }
  .hero2-actions, .hero2-facts { justify-content: center; }
  .featured-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  body.shop nav { height: auto; padding: .6rem .9rem 0; }
  .nav-logo-mark { width: 34px; height: 34px; }
  .nav-logo-text { font-size: 1.25rem; }
  body.shop .nav-btn { font-size: .82rem; padding: .45rem .7rem; }
  .cart-btn-label { display: none; }
  .home-block { padding: .5rem 1rem 2rem; }
  body.shop .weapon-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  body.shop .weapon-info { padding: .7rem .75rem .25rem; }
  body.shop .weapon-name { font-size: .9rem; }
  body.shop .weapon-bottom { padding: .4rem .75rem .8rem; }
  body.shop .weapon-price { font-size: 1.15rem; }
  .weapon-actions { width: 100%; }
  body.shop .btn-buy-now { flex: 1; }
  .page-head-icon { width: 44px; height: 44px; border-radius: 14px; }
  .btn-corn, .btn-ghost { padding: .8rem 1.25rem; font-size: .95rem; }
}
@media (max-width: 380px) {
  .hero2-actions > * { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .kernel, .stage-kernels { display: none; }
  .mascot { animation: none !important; }
}

/* Escritorio: logo a la izquierda, secciones y carrito a la derecha */
@media (min-width: 769px) {
  body.shop .nav-links { order: 2; margin-left: auto; }
  body.shop .cart-btn { order: 3; margin-left: .75rem; }
}

/* Precio arriba y botones en su propia fila: entra en cualquier ancho de tarjeta */
body.shop .weapon-bottom { flex-direction: column; align-items: stretch; gap: .65rem; padding: .4rem 1rem 1rem; }
body.shop .weapon-price { white-space: nowrap; }
body.shop .weapon-actions { width: 100%; }
body.shop .btn-buy-now { flex: 1; }
/* Color de rareza más legible sobre fondo oscuro */
body.shop .weapon-rarity { color: color-mix(in srgb, var(--rc) 70%, #fff); }

/* Botones alineados: el pie de cada tarjeta queda siempre abajo, a la misma altura */
body.shop .weapon-card { display: flex; flex-direction: column; }
body.shop .weapon-info { flex: 1; }
body.shop .btn-add-cart { flex: 0 0 42px; width: 42px; height: 42px; }
body.shop .btn-buy-now { flex: 1; height: 42px; }
body.shop .offer-card .btn-primary, body.shop .buyback-sell-btn { margin-top: auto; }
/* Botones del inicio con el mismo alto y el mismo "relieve" */
.btn-ghost { box-shadow: 0 6px 0 #1a1c2e; }
.btn-ghost:active { transform: translateY(4px); box-shadow: 0 2px 0 #1a1c2e; }

/* Chroma: el fondo de la imagen recorre todos los colores lentamente (el arma no cambia de color) */
body.shop .chroma-card .weapon-img-wrap { background: linear-gradient(160deg, var(--panel-2), #0a0b14); isolation: isolate; }
body.shop .chroma-card .weapon-img-wrap::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 30, 90, .95) 0%, rgba(255, 30, 90, .55) 38%, rgba(255, 30, 90, .12) 68%, transparent 80%);
  animation: chromaShift 9s linear infinite;
}
@keyframes chromaShift { from { filter: hue-rotate(0deg) saturate(1.3); } to { filter: hue-rotate(360deg) saturate(1.3); } }
@media (prefers-reduced-motion: reduce) { body.shop .chroma-card .weapon-img-wrap::before { animation: none; } }

/* Nombres más legibles: misma fuente, menos brillo y un poco más de aire entre letras */
body.shop .weapon-name, body.shop .offer-name, body.shop .contact-card-title, body.shop .buyback-name {
  font-family: 'Lilita One', 'Rubik', sans-serif; font-weight: 400;
  color: #d6d9ee; letter-spacing: .5px; line-height: 1.2;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-shadow: none;
}
body.shop .weapon-name { font-size: 1.05rem; }

/* ── Descuentos por arma ── */
.wtag-sale { background: var(--blood); color: #fff; }
.price-old { font-size: .8rem; color: var(--dim); text-decoration: line-through; margin-top: .15rem; }
.sub-title { font-size: 1.3rem; margin: .5rem 0 1rem; }
#sales-block { margin-bottom: 2.25rem; }

/* ── Carrito lateral ── */
.drawer-overlay { position: fixed; inset: 0; z-index: 250; background: rgba(3, 4, 10, .6); backdrop-filter: blur(4px); animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 260; width: min(420px, 100vw);
  display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .5);
  transform: translateX(105%); transition: transform .4s var(--ease-out); visibility: hidden;
}
body.cart-open .cart-drawer { transform: none; visibility: visible; }
body.cart-open { overflow: hidden; }
.cart-drawer:focus { outline: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); }
.drawer-head h2 { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.45rem; color: #fff; }
.drawer-head h2 .ic { color: var(--corn); }
.drawer-close { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); color: var(--soft); cursor: pointer; transition: background .2s, color .2s; }
.drawer-close:hover { background: rgba(244, 63, 94, .14); color: #fff; }
.drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; overscroll-behavior: contain; }
.drawer-foot { padding: 1rem 1.25rem 1.6rem; border-top: 1px solid var(--line); background: var(--panel); display: grid; gap: .8rem; }
.drawer-foot .cart-total { margin: 0; }
body.shop .cart-drawer .cart-item { padding: .75rem .8rem; }
body.shop .cart-drawer .cart-empty { padding: 3rem 1rem; }
@media (prefers-reduced-motion: reduce) { .cart-drawer { transition: none; } }

/* ── Botón flotante de WhatsApp ── */
.wa-float {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 200;
  display: inline-flex; align-items: center; gap: .55rem; height: 56px; padding: 0 1.2rem 0 1rem;
  border-radius: 999px; background: #25d366; color: #052e16; font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 30px rgba(37, 211, 102, .35); transition: transform .3s var(--ease-spring), box-shadow .3s;
}
.wa-float .ic { width: 26px; height: 26px; }
.wa-float:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 36px rgba(37, 211, 102, .45); }
body.cart-open .wa-float { opacity: 0; pointer-events: none; }
@media (max-width: 768px) {
  .wa-float { width: 56px; padding: 0; justify-content: center; right: 1rem; bottom: 1rem; }
  .wa-float-label { display: none; }
}

/* El aviso va abajo al centro para no tapar el botón de WhatsApp */
body.shop .toast { left: 50%; right: auto; bottom: 1.5rem; transform: translate(-50%, 16px) scale(.96); }
body.shop .toast.show { transform: translate(-50%, 0); }
@media (max-width: 768px) { body.shop .toast { bottom: 5.5rem; max-width: calc(100vw - 2rem); } }

/* Lo marcado como oculto siempre se oculta, aunque tenga display propio */
body.shop [hidden] { display: none !important; }

/* Pantallas medianas: la barra entra en una sola línea */
@media (min-width: 769px) and (max-width: 1080px) {
  body.shop nav { padding: 0 1rem; }
  .nav-logo-text { font-size: 1.25rem; }
  body.shop .nav-btn { padding: .45rem .55rem; font-size: .82rem; gap: .3rem; }
  .cart-btn-label { display: none; }
}

/* Con el carrito abierto, el aviso va arriba para no tapar el total */
body.shop.cart-open .toast { top: 1rem; bottom: auto; z-index: 300; }

/* ═══ Celular: menú fijo abajo con todas las secciones a la vista ═══ */
@media (max-width: 768px) {
  /* el desenfoque de la barra de arriba atrapa a los elementos fijos: se saca en celular */
  body.shop nav { padding: .6rem .9rem; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5, 6, 13, .96); }
  body.shop .nav-top-row { padding-bottom: 0; }
  body.shop .nav-links {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; overflow: visible;
    padding: .35rem .3rem calc(.35rem + env(safe-area-inset-bottom));
    background: rgba(8, 9, 18, .97); border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
  }
  body.shop .nav-btn {
    flex-direction: column; justify-content: center; gap: 3px; min-width: 0;
    padding: .4rem 0 .3rem; border-radius: 12px; font-size: .62rem; font-weight: 600; letter-spacing: 0;
    color: var(--dim); background: none;
  }
  body.shop .nav-btn .ic { width: 22px; height: 22px; }
  body.shop .nav-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  body.shop .nav-btn.active { color: var(--corn); background: rgba(255, 200, 61, .1); font-weight: 700; }
  body.shop .nav-btn.active .ic { filter: drop-shadow(0 0 6px rgba(255, 200, 61, .5)); }
  body.shop .nav-btn:hover { background: rgba(255, 255, 255, .04); }
  /* espacio para que la barra no tape el final de la página */
  body.shop { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .wa-float { bottom: calc(78px + env(safe-area-inset-bottom)); }
  body.shop .toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
}
@media (max-width: 768px) {
  .wa-float { width: 50px; height: 50px; right: .75rem; }
  .wa-float .ic { width: 24px; height: 24px; }
}