:root {
  --bg: #0a0f0c;
  --panel: #121a16;
  --panel2: #16201b;
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .16);
  --text: #eef2ee;
  --muted: #9aa69f;
  --green: #3ddc84;
  --green2: #22b866;
  --gold: #c9a24a;
  --gold2: #e4c06a;
  --red: #e5484d;
  --stone: "Alfa Slab One", Georgia, serif;
  --r: 10px;
  --w: 1480px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--text); font-family: "Be Vietnam Pro", system-ui, sans-serif; line-height: 1.5; overflow-x: hidden;
  background:
    radial-gradient(1200px 700px at 50% 120%, rgba(61,220,132,.06), transparent 70%),
    linear-gradient(90deg, rgba(5,10,7,.9), transparent 12%, transparent 88%, rgba(5,10,7,.9)),
    #0a0f0c;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
h1, h2, h3, h4 { margin: 0; }
.wrap { max-width: var(--w); margin: 0 auto; padding-inline: clamp(16px, 3vw, 40px); }

/* ---------- mask icons ---------- */
.ic { display: inline-block; width: 18px; height: 18px; background: currentColor; flex: none;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic.big { width: 26px; height: 26px; }
.ic-home { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11h3v9h5v-6h4v6h5v-9h3z'/%3E%3C/svg%3E"); }
.ic-cart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM5.2 4l.4 2H21l-2.2 8.2a2 2 0 0 1-1.9 1.5H8.1a2 2 0 0 1-2-1.6L3.6 3H1V1h4.2Z'/%3E%3C/svg%3E"); }
.ic-dino { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M1 15c4-2 8-4 13-5 2-3 5-6 9-6h5c2 0 3 1 3 3l-2 1h-3l2 1-4 1c-2 1-3 2-3 4 0 2 1 3 2 4l-1 1-2-2-1 1v5h-3l1-4-4-1-1 5H9l1-5c-3-1-6-2-9-3Z'/%3E%3C/svg%3E"); }
.ic-palette { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0 0 20c1.4 0 2-1 2-2 0-.6-.3-1-.6-1.4-.3-.4-.5-.8-.5-1.3 0-1 .8-1.8 1.8-1.8H17a5 5 0 0 0 5-5C22 6 17.5 2 12 2ZM6.5 13a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm3-4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm3 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E"); }
.ic-crown { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m2 7 5 4 5-7 5 7 5-4-2 12H4Zm2 14h16v2H4z'/%3E%3C/svg%3E"); }
.ic-quest { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5Zm-1 14-4-4 1.4-1.4 2.6 2.6 5.6-5.6L18 9Z'/%3E%3C/svg%3E"); }
.ic-help { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a9 9 0 0 0-9 9v6a3 3 0 0 0 3 3h2v-8H5v-1a7 7 0 0 1 14 0v1h-3v8h3v1h-6v2h6a2 2 0 0 0 2-2v-9a9 9 0 0 0-9-9Z'/%3E%3C/svg%3E"); }
.ic-search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 0 1 6.3 12.9l5.4 5.4-1.4 1.4-5.4-5.4A8 8 0 1 1 10 2Zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12Z'/%3E%3C/svg%3E"); }
.ic-user { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5C21 16.5 17 14 12 14Z'/%3E%3C/svg%3E"); }
.ic-down { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E"); width: 14px; }
.ic-heart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.3C1 8 3.3 4 7.2 4c2 0 3.6 1.1 4.8 2.7C13.2 5.1 14.8 4 16.8 4 20.7 4 23 8 21.5 11.7 19.5 16.4 12 21 12 21Z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.ic-heart-f { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.3C1 8 3.3 4 7.2 4c2 0 3.6 1.1 4.8 2.7C13.2 5.1 14.8 4 16.8 4 20.7 4 23 8 21.5 11.7 19.5 16.4 12 21 12 21Z'/%3E%3C/svg%3E"); }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 18px; height: 76px;
  padding-inline: clamp(16px, 3vw, 48px); background: linear-gradient(180deg, #0b110e, #0a0f0cf2); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.logo { display: flex; align-items: center; gap: 10px; flex: none; }
.logo-rex { width: 54px; height: 46px; filter: drop-shadow(0 2px 4px #000); }
.logo-txt { display: flex; flex-direction: column; line-height: 1; }
.logo-txt b { font-family: var(--stone); font-weight: 400; font-size: 30px; letter-spacing: .02em;
  background: linear-gradient(180deg, #fafbf8, #a9b0aa 70%, #7d857f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-txt em { font-style: normal; background: linear-gradient(180deg, #8af5b6, #22b866); -webkit-background-clip: text; background-clip: text; }
.logo-txt small { font-size: 10px; letter-spacing: .5em; color: var(--muted); margin-top: 4px; text-align: center; }
.menu { display: flex; align-items: stretch; height: 100%; margin-left: 18px; }
.menu a { display: flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 14px; font-weight: 500; color: #d7ddd8; border-bottom: 2px solid transparent; transition: .2s; white-space: nowrap; }
.menu a .ic { width: 20px; height: 20px; }
.menu a:hover { color: #fff; background: rgba(255,255,255,.03); }
.menu a.on { color: #fff; border-bottom-color: var(--green); background: linear-gradient(180deg, transparent, rgba(61,220,132,.16)); box-shadow: inset 0 0 0 1px rgba(61,220,132,.18); }
.hsearch { display: flex; align-items: center; margin-left: auto; width: 230px; height: 42px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255,255,255,.03); color: #cfd6d1; }
.hsearch input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: inherit; font-size: 13px; }
.hsearch:focus-within { border-color: var(--green); }
.hcart { position: relative; padding: 8px; color: #e6ebe7; }
.hcart span { position: absolute; top: 0; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; border: 2px solid #0b110e; }
.hcart.bump { animation: bump .45s; }
@keyframes bump { 40% { transform: scale(1.2); } }
.hacc { display: flex; align-items: center; gap: 10px; text-align: left; }
.ava { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line2); background: #1b2420; color: #aab3ad; }
.acc-txt { display: flex; flex-direction: column; white-space: nowrap; line-height: 1.3; font-size: 12px; }
.acc-txt b { font-weight: 500; }
.acc-txt small { color: #cfd6d1; }
.burger { display: none; font-size: 24px; padding: 6px; }

/* ---------- buttons ---------- */
.btn-out { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.8); font-weight: 600; font-size: 14px; color: #fff; transition: .2s; background: rgba(0,0,0,.25); }
.btn-out span { transition: .2s; }
.btn-out:hover { border-color: var(--green); color: var(--green); box-shadow: 0 0 20px rgba(61,220,132,.25); }
.btn-out:hover span { transform: translateX(4px); }
.btn-out.big { padding: 13px 34px; font-size: 16px; font-weight: 800; letter-spacing: .04em; border-color: var(--green); box-shadow: 0 0 24px rgba(61,220,132,.35), inset 0 0 18px rgba(61,220,132,.15); background: rgba(6,20,12,.55); }
.btn-gold { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 10px; font-weight: 800; letter-spacing: .03em; color: #1d1405;
  background: linear-gradient(180deg, var(--gold2), var(--gold)); box-shadow: 0 6px 20px -6px rgba(228,192,106,.6); transition: .2s; }
.btn-gold:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-gold:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.wide { width: 100%; }

/* ---------- hero ---------- */
.hero { position: relative; height: clamp(360px, 30vw, 470px); overflow: hidden; display: grid; place-items: center; text-align: center; border-bottom: 1px solid var(--line); }
.hero-scene, .hero-scene svg, .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-photo { background: center / cover no-repeat; }
.hero-dino { position: absolute; bottom: 6%; pointer-events: none; }
.hero-dino.rex { left: max(-2%, calc(50% - 760px)); height: 80%; filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)) brightness(.8) contrast(1.1); animation: breathe 6s ease-in-out infinite; transform-origin: bottom center; }
.hero-dino.puerta { right: max(1%, calc(50% - 740px)); bottom: 12%; height: 62%; filter: brightness(.55) saturate(.55) contrast(.9) blur(.4px); opacity: .9; }
.hero-mist { position: absolute; left: 0; right: 0; bottom: 0; height: 32%; background: linear-gradient(0deg, rgba(10,15,12,.95), rgba(190,210,200,.10) 55%, transparent); pointer-events: none; }
@keyframes breathe { 50% { transform: scale(1.012) translateY(-2px); } }
.hero-photo.has { box-shadow: inset 0 -120px 120px -40px var(--bg); }
.falls rect { animation: fall 1.6s linear infinite; }
@keyframes fall { 50% { opacity: .65; } }
.hero-txt { position: relative; z-index: 2; padding: 0 16px; margin-top: -20px; }
.kicker { margin: 0 0 4px; font-weight: 600; letter-spacing: .12em; font-size: clamp(13px, 1.2vw, 17px); text-shadow: 0 2px 8px #000; }
.kicker i, .tagline i { font-style: normal; margin: 0 8px; }
.stone { font-family: var(--stone); font-weight: 400; font-size: clamp(38px, 7.4vw, 108px); line-height: 1; letter-spacing: .01em;
  background: linear-gradient(180deg, #ffffff 0%, #d9dcd6 30%, #8d938d 55%, #c6cac4 70%, #6f756f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 #2a2f2b) drop-shadow(0 10px 18px rgba(0,0,0,.8)); }
.stone span { background: linear-gradient(180deg, #a8ffcb 0%, #3ddc84 45%, #13924a 100%); -webkit-background-clip: text; background-clip: text; }
.hero h2 { font-size: clamp(18px, 1.9vw, 26px); font-weight: 600; letter-spacing: .04em; margin: 10px 0 8px; text-shadow: 0 2px 10px #000; }
.tagline { color: var(--green); font-size: clamp(11px, .95vw, 13px); font-weight: 600; letter-spacing: .03em; margin: 0 0 18px; text-shadow: 0 2px 6px #000; }

/* ---------- category cards ---------- */
.cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: -40px; position: relative; z-index: 3; }
.cat { position: relative; display: flex; align-items: center; gap: 14px; height: 66px; padding: 0 18px; border-radius: 8px; text-align: left;
  border: 1px solid var(--line2); background: linear-gradient(180deg, rgba(28,36,32,.92), rgba(14,19,16,.95)); transition: .2s; overflow: hidden; }
.cat:hover { border-color: rgba(61,220,132,.5); }
.cat.on { border: 2px solid var(--green); background: linear-gradient(180deg, rgba(26,64,42,.95), rgba(12,30,20,.95)); box-shadow: 0 0 24px rgba(61,220,132,.35), inset 0 0 20px rgba(61,220,132,.15); }
.cat > span:last-child { min-width: 0; white-space: nowrap; }
.cat-ic { width: 66px; height: 50px; display: grid; place-items: center; flex: none; font-size: 34px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.cat-ic .dino-svg, .cat-ic img { width: 100%; height: 100%; object-fit: contain; }
.cat b { display: block; font-size: 15px; font-weight: 600; }
.cat small { color: var(--muted); font-size: 12.5px; }

/* ---------- section head ---------- */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 26px 0 14px; flex-wrap: wrap; }
.sec-title { display: flex; align-items: center; gap: 12px; }
.flame { font-size: 30px; filter: drop-shadow(0 0 10px rgba(255,120,40,.6)); }
.sec-title h3 { font-size: 22px; font-weight: 700; }
.sec-title p { margin: 0; color: var(--muted); font-size: 13px; }
.sec-tools { display: flex; gap: 10px; align-items: center; }
select { background: #111814; border: 1px solid var(--line2); color: var(--text); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 13px; outline: none; }

/* ---------- product cards ---------- */
.grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.card { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; border: 1px solid var(--line2); background: linear-gradient(180deg, #151d19, #0f1512); transition: .25s; animation: rise .45s both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.card:hover { transform: translateY(-4px); border-color: rgba(61,220,132,.45); box-shadow: 0 14px 30px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(61,220,132,.15); }
.card-art { position: relative; aspect-ratio: 1.52; cursor: pointer; overflow: hidden; }
.card-art .dino-svg { position: absolute; left: 6%; bottom: 4%; width: 88%; transition: .35s; filter: drop-shadow(0 10px 12px rgba(0,0,0,.7)); }
.card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: .35s; }
.card-art img.cut { object-fit: contain; padding: 3% 2% 0; filter: drop-shadow(0 10px 14px rgba(0,0,0,.75)); }
.card:hover .card-art .dino-svg, .card:hover .card-art img { transform: scale(1.06); }
.tag { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 9px; border-radius: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.tag.red { background: #d93a3f; } .tag.blue { background: #3b6fe0; } .tag.green { background: #2fa55f; }
.tag.gold { background: #b8923a; } .tag.purple { background: #8146e0; } .tag.teal { background: #1f8f8a; }
.card-body { padding: 12px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.card-body h4 { font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-body .sp { color: var(--muted); font-size: 12.5px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.price { font-size: 17px; font-weight: 800; color: var(--green); margin-right: auto; line-height: 1.1; }
.price s { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.ibtn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; transition: .2s; }
.ibtn.cart { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #1d1405; }
.ibtn.cart:hover { filter: brightness(1.15); transform: translateY(-1px); }
.ibtn.cart.in { background: var(--green); }
.ibtn.heart { border: 1px solid var(--line2); color: #cfd6d1; }
.ibtn.heart:hover, .ibtn.heart.on { color: #ff5b6e; border-color: #ff5b6e55; }
.empty { text-align: center; color: var(--muted); padding: 40px; }

/* scene backdrop used behind drawn dinos */
.scene { background:
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(0,0,0,.6), transparent 70%),
    radial-gradient(circle at 70% 25%, color-mix(in srgb, var(--c2, #3ddc84) 30%, transparent), transparent 55%),
    linear-gradient(180deg, #3a4743 0%, #1f2a25 55%, #0e1512 100%); }
.scene::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: radial-gradient(ellipse 30% 60% at 8% 30%, #0a110d 60%, transparent 61%), radial-gradient(ellipse 26% 70% at 96% 20%, #0a110d 60%, transparent 61%),
              linear-gradient(0deg, rgba(220,235,228,.12), transparent 40%); }
.scene.marine { background: radial-gradient(circle at 60% 10%, rgba(160,230,255,.35), transparent 50%), linear-gradient(180deg, #1c5b74, #0d3346 55%, #06202c); }
.scene.marine::before { background: repeating-linear-gradient(100deg, rgba(255,255,255,.05) 0 2px, transparent 2px 40px); opacity: 1; }
.scene.flyer { background: radial-gradient(circle at 70% 30%, rgba(255,190,120,.35), transparent 55%), linear-gradient(180deg, #59605f, #2b3330 60%, #121916); }
.scene.card, .scene.coin { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c2) 40%, transparent), transparent 65%), linear-gradient(180deg, #232b27, #0f1512); }
.scene.card::before, .scene.coin::before { display: none; }

/* ---------- promos ---------- */
.promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.promo { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; min-height: 176px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line2); background: linear-gradient(90deg, #121915, #0d1310); }
.promo-art { position: relative; overflow: hidden; }
.promo-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 45%, #111814 98%); }
.promo-art .dino-svg { position: absolute; left: -4%; bottom: 2%; width: 118%; filter: drop-shadow(0 10px 12px rgba(0,0,0,.7)); }
.promo-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-art img.cut { object-fit: contain; padding: 8px; }
.promo-body { position: relative; z-index: 1; padding: 16px 18px 16px 4px; display: flex; flex-direction: column; }
.promo h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.promo.gold h3 { color: var(--gold2); }
.promo ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; font-size: 13px; color: #d3d9d5; }
.promo li i { font-style: normal; margin-right: 8px; font-size: 13px; filter: sepia(1) saturate(3) hue-rotate(5deg); }
.promo .btn-out { align-self: center; margin-top: auto; padding: 8px 22px; font-size: 13px; }
.promo.gold { background: linear-gradient(90deg, #15130d, #1a140a); }
.promo.gold .promo-art::after { background: linear-gradient(90deg, transparent 45%, #1a140a 98%); }
.promo.gold .btn-out { border-color: var(--gold2); }

/* ---------- trust ---------- */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; padding-block: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust div { display: flex; align-items: center; gap: 16px; justify-content: center; }
.ti { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; font-style: normal; font-size: 22px; flex: none;
  background: radial-gradient(circle, rgba(61,220,132,.25), rgba(61,220,132,.05)); box-shadow: 0 0 0 1px rgba(61,220,132,.3), 0 0 18px rgba(61,220,132,.2); }
.trust p { margin: 0; display: flex; flex-direction: column; }
.trust b { font-size: 14px; font-weight: 600; }
.trust span { font-size: 12.5px; color: var(--muted); }

/* ---------- support ---------- */
.support { padding-top: 40px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0; }
.steps div { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 8px; border: 1px solid var(--line2); background: var(--panel); }
.steps b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; flex: none; background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #1d1405; font-size: 17px; }
.steps p { margin: 0; color: var(--muted); font-size: 13.5px; }
.steps strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 2px; }
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.faq details { border: 1px solid var(--line2); border-radius: 8px; background: var(--panel); padding: 2px 16px; }
.faq summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 14px; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::after { content: "+"; color: var(--green); font-size: 18px; transition: .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--muted); margin: 0 0 14px; font-size: 13.5px; }
.foot { margin-top: 50px; border-top: 1px solid var(--line); background: #070b09; }
.foot-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 26px; color: var(--muted); font-size: 13px; }
.foot .logo-txt b { font-size: 22px; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(2,5,3,.72); backdrop-filter: blur(5px); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.modal-card { position: relative; width: min(940px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 12px; border: 1px solid var(--line2); background: linear-gradient(180deg, #141c18, #0c120f); animation: pop .22s; }
@keyframes pop { from { transform: scale(.96) translateY(10px); opacity: 0; } }
.x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line2); background: rgba(0,0,0,.45); font-size: 22px; line-height: 1; }
.product-modal { display: grid; grid-template-columns: 1.15fr 1fr; }
.pm-art { position: relative; min-height: 400px; overflow: hidden; }
.pm-art .dino-svg { position: absolute; left: 5%; bottom: 10%; width: 90%; filter: drop-shadow(0 14px 18px rgba(0,0,0,.7)); }
.pm-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm-art img.cut { object-fit: contain; padding: 30px; }
.swatches { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.swatches span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); }
.pm-body { padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 10px; }
.pm-body .tag { position: static; align-self: flex-start; }
.pm-body h2 { font-size: 30px; font-weight: 800; }
.pm-body .sp { color: var(--muted); }
.pm-body ul { margin: 4px 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14px; }
.pm-body li::before { content: "✓"; color: var(--green); font-weight: 800; margin-right: 10px; }
.pm-price { display: flex; align-items: baseline; gap: 12px; margin-top: auto; padding-top: 8px; flex-wrap: wrap; }
.pm-price .price { font-size: 28px; margin: 0; }
.pm-price small { color: var(--muted); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line2); border-radius: 8px; }
.qty button { width: 32px; height: 34px; font-size: 16px; }
.qty span { min-width: 24px; text-align: center; font-weight: 700; }

/* ---------- drawer ---------- */
.drawer-wrap { position: fixed; inset: 0; z-index: 55; }
.drawer-bg { position: absolute; inset: 0; background: rgba(2,5,3,.6); animation: fade .2s; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); display: flex; flex-direction: column; background: #0e1512; border-left: 1px solid var(--line2); animation: slide .28s; }
@keyframes slide { from { transform: translateX(100%); } }
.drawer-head { position: relative; padding: 22px; border-bottom: 1px solid var(--line); }
.drawer-items { flex: 1; overflow: auto; padding: 14px 16px; display: grid; gap: 10px; align-content: start; }
.ci { display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 8px; border: 1px solid var(--line2); background: var(--panel); }
.ci-art { position: relative; height: 54px; border-radius: 6px; overflow: hidden; }
.ci-art .dino-svg { position: absolute; left: 4%; bottom: 2%; width: 92%; }
.ci-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ci-art img.cut { object-fit: contain; }
.ci h4 { font-size: 14px; font-weight: 600; }
.ci .p { color: var(--green); font-weight: 700; font-size: 13px; }
.ci-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ci .rm { color: var(--muted); font-size: 12px; }
.ci .rm:hover { color: var(--red); }
.drawer-foot { padding: 18px 22px 22px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.total { display: flex; justify-content: space-between; align-items: baseline; }
.total b { font-size: 24px; color: var(--green); }
.cart-empty { text-align: center; color: var(--muted); padding: 60px 10px; }
.cart-empty div { font-size: 46px; margin-bottom: 6px; }

/* ---------- checkout / login ---------- */
.checkout { width: min(540px, 100%); padding: 28px; }
.checkout h2 { font-size: 24px; margin-bottom: 4px; }
.checkout .sub { color: var(--muted); margin: 0 0 18px; font-size: 14px; }
.field { display: grid; gap: 6px; margin-bottom: 13px; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field input, .field textarea { background: #0b110e; border: 1px solid var(--line2); color: var(--text); border-radius: 8px; padding: 11px 13px; font: inherit; outline: none; }
.field input:focus, .field textarea:focus { border-color: var(--green); }
.pay { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.pay label { display: flex; gap: 10px; align-items: center; padding: 13px; border-radius: 8px; border: 1px solid var(--line2); cursor: pointer; font-weight: 600; font-size: 14px; }
.pay input { accent-color: var(--green); }
.pay label:has(input:checked) { border-color: var(--green); background: rgba(61,220,132,.08); }
.pay label.off { opacity: .4; pointer-events: none; }
.err { color: var(--red); font-size: 14px; min-height: 20px; margin: 0 0 8px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 12px 0 18px; border: 1px solid var(--line2); border-radius: 10px; background: #0b110e; }
.auth-tabs button { padding: 9px; border-radius: 7px; font-weight: 700; font-size: 14px; color: var(--muted); }
.auth-tabs button.on { background: rgba(61,220,132,.12); color: var(--green); }
.g-btn { display: flex; justify-content: center; min-height: 44px; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--muted); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line2); }
.summary { border: 1px dashed var(--line2); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
.summary div { display: flex; justify-content: space-between; padding: 3px 0; color: var(--muted); }
.summary .t { color: var(--text); font-weight: 700; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.done-box { text-align: center; }
.done-box .ok { width: 70px; height: 70px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; background: rgba(61,220,132,.15); color: var(--green); }
.code { display: inline-block; font-size: 24px; font-weight: 800; letter-spacing: .1em; padding: 8px 18px; border-radius: 8px; border: 1px dashed var(--green); color: var(--green); margin: 10px 0 14px; cursor: pointer; }
.qr { width: 220px; border-radius: 10px; background: #fff; padding: 8px; margin: 4px auto 12px; display: block; }
.bank { text-align: left; border: 1px solid var(--line2); border-radius: 8px; padding: 10px 14px; font-size: 14px; margin-bottom: 16px; }
.bank div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.bank span { color: var(--muted); }

.toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 70; display: grid; gap: 8px; }
.toast { padding: 11px 20px; border-radius: 8px; background: #132019; border: 1px solid var(--green); box-shadow: 0 10px 30px rgba(0,0,0,.5); font-weight: 600; font-size: 14px; animation: pop .22s; }

/* ---------- responsive ---------- */
@media (max-width: 1640px) {
  .hdr { gap: 12px; }
  .menu { margin-left: 6px; }
  .menu a { padding: 0 11px; gap: 6px; font-size: 13.5px; }
  .hsearch { width: 190px; }
}
@media (max-width: 1460px) {
  .logo-txt b { font-size: 26px; }
}
@media (max-width: 1600px) {
  .acc-txt, .hacc .ic-down { display: none; }
}
@media (max-width: 1260px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .promos { grid-template-columns: 1fr 1fr; }
  .menu { display: none; position: absolute; top: 76px; left: 0; right: 0; height: auto; flex-direction: column; background: #0b110e; border-bottom: 1px solid var(--line2); }
  .menu.open { display: flex; }
  .menu a { padding: 14px 24px; }
  .burger { display: block; }
  .hsearch { margin-left: auto; }
}
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust { grid-template-columns: 1fr 1fr; }
  .trust div { justify-content: flex-start; }
  .promos, .steps, .faq { grid-template-columns: 1fr; }
  .product-modal { grid-template-columns: 1fr; }
  .pm-art { min-height: 260px; }
  .acc-txt, .hacc .ic-down { display: none; }
}
@media (max-width: 640px) {
  .hero-dino.puerta { display: none; }
  .hero-dino.rex { height: 52%; left: -12%; opacity: .55; }
  .hdr { gap: 10px; }
  .logo-rex { width: 40px; }
  .logo-txt b { font-size: 20px; }
  .logo-txt small { letter-spacing: .3em; font-size: 8px; }
  .hsearch { display: none; }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -24px; }
  .cat small { overflow: hidden; text-overflow: ellipsis; display: block; }
  .hero h2 { font-size: 15px; }
  .cat { padding: 0 10px; gap: 8px; }
  .cat-ic { width: 46px; font-size: 26px; }
  .trust { grid-template-columns: 1fr; }
  .pay { grid-template-columns: 1fr; }
  .card-foot .heart { display: none; }
}