:root {
  color-scheme: dark;
  --page: #080d1a;
  --surface: rgba(17, 21, 35, .94);
  --surface-raised: rgba(25, 30, 48, .97);
  --border: #303750;
  --text: #f1f1f3;
  --muted: #9698a2;
  --accent: #8b7cf6;
  --accent-hover: #a195ff;
  --whatsapp: #67cc8d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--page); }
body {
  min-width: 320px;
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.catalog-page { position: relative; isolation: isolate; background: linear-gradient(180deg, #080a11 0%, #05070c 55%, #04060b 100%); background-attachment: fixed; background-repeat: no-repeat; }
body.catalog-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body.catalog-page::after {
  background:
    radial-gradient(ellipse 48% 68% at 50% 48%, rgba(5, 7, 12, .64), rgba(5, 7, 12, .38) 48%, transparent 90%),
    radial-gradient(ellipse 52% 100% at 0% 34%, rgba(185, 0, 56, .34), transparent 76%),
    radial-gradient(ellipse 38% 70% at 0% 100%, rgba(113, 0, 56, .17), transparent 78%),
    radial-gradient(ellipse 52% 100% at 100% 35%, rgba(0, 123, 168, .35), transparent 76%),
    radial-gradient(ellipse 38% 72% at 100% 100%, rgba(0, 95, 135, .18), transparent 78%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  animation: ambient-glow 18s ease-in-out infinite alternate;
}
.catalog-page > * { position: relative; z-index: 1; }
body.catalog-page > #network-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.topbar {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1480px;
  padding: 0 32px;
  margin: 0 auto;
  border-bottom: 1px solid #ffffff0d;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .03em; }
.brand-mark {
  width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center;
}
.brand-mark img { width: 100%; height: 100%; display: block; }
.nav { display: flex; align-items: center; gap: 28px; color: #b9bac2; font-size: 12px; }
.nav a:hover, .footer a:hover { color: var(--text); }
.nav .nav-active { color: #c9c0ff; }
.nav-admin { color: #ccc7ff; }
.nav-contact { padding: 9px 13px; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: inherit; }

.catalog { width: min(1680px, calc(100% - 32px)); min-height: calc(100vh - 130px); padding: 12px clamp(16px, 2vw, 32px) 76px; margin: 0 auto; }
.catalog-hero { width: min(1680px, calc(100% - 32px)); padding: 28px clamp(16px, 2vw, 32px) 22px; margin: 0 auto; }
.hero-copy { max-width: 680px; }
.eyebrow { margin: 0 0 10px; color: #a99cff; font-size: 10px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(42px, 5.3vw, 64px); line-height: 1.06; letter-spacing: -.05em; }
.gradient-text { background: linear-gradient(100deg, #b5a8ff 5%, #7d8bff 55%, #64c9d0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-description { max-width: 610px; margin: 14px 0 0; color: #a3a5b0; font-size: 13px; line-height: 1.75; }
.catalog-tools { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 0 0 14px; padding: 14px 0; border-top: 1px solid #a8b6ff18; border-bottom: 1px solid #a8b6ff18; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filter {
  padding: 10px 16px; border: 1px solid #414863; border-radius: 999px;
  background: #11182bdc; color: #c4c8d8; font-size: 12px; cursor: pointer; transition: .18s ease;
}
.filter:hover { border-color: #6257b3; color: var(--text); }
.filter.active { border-color: #8878f2; background: linear-gradient(110deg, #39315e, #293356); color: #f0edff; box-shadow: inset 0 0 0 1px #a69aff30, 0 0 18px #7764de30; }
.tools-meta { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.count { flex: 0 0 auto; color: #b1b8ca; font-size: 12px; white-space: nowrap; }
.search-box {
  width: 270px; display: flex; align-items: center; gap: 10px; padding: 0 13px;
  border: 1px solid #414863; border-radius: 9px; background: #11182be8;
}
.search-icon { color: var(--muted); font-size: 21px; line-height: 1; transform: rotate(-20deg); }
.search-box input { width: 100%; height: 42px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; }
.search-box input::placeholder { color: #777983; }
.search-box:focus-within { border-color: var(--accent); }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: 24px; }
.card {
  width: 100%; min-width: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid transparent; border-radius: 14px;
  background: linear-gradient(155deg, #0c101df7, #080c15fa) padding-box, linear-gradient(135deg, #6889d66e, #7772c04d 52%, #455b9466) border-box;
  backdrop-filter: blur(8px); box-shadow: 0 10px 32px #02061138, inset 0 1px #ffffff08; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  animation: appear .3s ease both;
}
.card:hover { transform: translateY(-4px); background: linear-gradient(155deg, #0e1322fa, #090e19fa) padding-box, linear-gradient(135deg, #87a8f0a8, #a096ec82 52%, #586fae99) border-box; box-shadow: 0 16px 38px #0006, 0 0 24px #7773d51f; }
.photo { height: auto; aspect-ratio: 1.06 / 1; flex: 0 0 auto; position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, #141d2e, #0a0e19 78%); }
.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, #09090d55); pointer-events: none; }
.photo img { width: 100%; height: 100%; display: block; object-fit: contain; padding: 7px; }
.placeholder { color: #b9b2ee; font-size: 54px; font-weight: 700; opacity: .65; }
.tag { position: absolute; z-index: 1; left: 12px; top: 12px; max-width: calc(100% - 24px); overflow: hidden; padding: 6px 9px; border: 1px solid #ffffff1b; border-radius: 999px; background: #111218e8; color: #dedbe9; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.card-body { min-height: 218px; display: flex; flex: 1; flex-direction: column; padding: 21px; }
.card-top { width: 100%; display: flex; align-items: stretch; flex-direction: column; gap: 8px; }
.card h2 { width: 100%; height: 2.8em; display: -webkit-box; overflow: hidden; margin: 0; font-size: 16px; font-weight: 620; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.price { min-height: 1.2em; flex: 0 0 auto; color: #c6b7ff; font-size: 23px; font-weight: 760; letter-spacing: -.025em; line-height: 1.2; white-space: nowrap; text-shadow: 0 0 18px #9684ff30; }
.description { height: 4.8em; display: -webkit-box; overflow: hidden; margin: 12px 0 21px; color: #b4bbce; font-size: 12px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.wa {
  width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: auto;
  border: 1px solid #3b9c60; border-radius: 8px; background: linear-gradient(180deg, #267546, #1d6038); color: #e0ffea;
  box-shadow: inset 0 1px #ffffff16, 0 5px 14px #102f1d66; font-size: 11px; font-weight: 720; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.wa:hover { border-color: #71ce8c; background: linear-gradient(180deg, #2d8750, #226d40); box-shadow: inset 0 1px #ffffff24, 0 7px 18px #102f1d88; }
.wa:disabled { cursor: not-allowed; opacity: .55; }
.wa svg { width: 15px; height: 15px; fill: currentColor; }
.empty-state { grid-column: 1 / -1; padding: 48px 20px; border: 1px dashed var(--border); border-radius: 9px; color: var(--muted); text-align: center; font-size: 13px; }
.card[tabindex] { cursor: pointer; }
.card:focus-visible { outline: 2px solid #a195ff; outline-offset: 3px; }
.product-modal { width: min(940px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); padding: 0; overflow: visible; border: 1px solid #6875a880; border-radius: 18px; background: transparent; color: var(--text); box-shadow: 0 28px 100px #0009, 0 0 35px #7469de24; }
.product-modal::backdrop { background: #030611c9; backdrop-filter: blur(8px); }
.modal-panel { position: relative; max-height: calc(100vh - 34px); overflow: auto; border-radius: inherit; background: linear-gradient(145deg, #1a2238, #101624 68%, #111827); }
.modal-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #ffffff25; border-radius: 50%; background: #0c1220df; color: #f4f2ff; font-size: 25px; line-height: 1; cursor: pointer; }
.modal-close:hover { border-color: #a195ff; background: #282442; }
.modal-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); min-height: 490px; }
.modal-image-wrap { min-height: 490px; display: grid; place-items: center; overflow: hidden; border-right: 1px solid #ffffff12; background: radial-gradient(ellipse at 50% 42%, #2a3857, #121a2b 76%); }
.modal-image-wrap img { width: 100%; height: 100%; max-height: 620px; object-fit: contain; padding: 28px; }
.modal-placeholder { color: #b9b2ee; font-size: 100px; font-weight: 700; opacity: .7; }
.modal-details { align-self: center; padding: 54px 38px 40px; }
.modal-category { display: inline-flex; margin-bottom: 15px; padding: 6px 11px; border: 1px solid #7770b66b; border-radius: 999px; background: #282541a8; color: #c9c0ff; font-size: 11px; }
.modal-details h2 { margin: 0; color: #f4f2ff; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; overflow-wrap: anywhere; }
.modal-price { margin: 14px 0 0; color: #c6b7ff; font-size: 28px; font-weight: 750; }
.modal-description { max-height: 36vh; overflow-y: auto; margin: 22px 0 0; color: #c0c6d5; font-size: 14px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.modal-whatsapp { width: fit-content; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; margin: 23px auto 0; border: 1px solid #3b9c60; border-radius: 9px; background: linear-gradient(180deg, #267546, #1d6038); color: #e0ffea; box-shadow: inset 0 1px #ffffff16, 0 5px 14px #102f1d66; font-size: 12px; font-weight: 700; text-align: center; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.modal-whatsapp:hover { transform: translateY(-2px); background: linear-gradient(180deg, #2d8750, #226d40); box-shadow: inset 0 1px #ffffff24, 0 7px 18px #102f1d88; }
.modal-whatsapp svg { width: 22px; height: 22px; fill: currentColor; }
.modal-whatsapp[hidden] { display: none; }
.footer { max-width: 1480px; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 48px; margin: auto; border-top: 1px solid #ffffff0d; color: #9a9eaf; font-size: 11px; }
.footer strong { color: #c4c5cc; font-weight: 600; }
.footer a { color: #aaaab3; }

@keyframes appear { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ambient-glow {
  from { filter: saturate(.92); }
  to { filter: saturate(1.12); }
}
@media (max-width: 1200px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .catalog-tools { align-items: flex-start; flex-direction: column; }
  .tools-meta { width: 100%; justify-content: space-between; }
}
@media (max-width: 768px) {
  .topbar { padding: 0 16px; }
  .nav { gap: 10px; }
  .nav a:first-child { display: none; }
  .catalog { width: calc(100% - 24px); padding: 10px 12px 56px; }
  .catalog-hero { width: calc(100% - 24px); padding: 24px 12px 18px; }
  .catalog-tools { align-items: stretch; flex-direction: column; gap: 13px; }
  .tools-meta { justify-content: space-between; }
  .search-box { width: min(60%, 270px); }
  .grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 16px; }
  .footer { align-items: flex-start; flex-direction: column; padding: 17px 20px; }
}
@media (max-width: 600px) {
  body.catalog-page::after {
    background:
      radial-gradient(ellipse 62% 72% at 50% 48%, rgba(5, 7, 12, .68), rgba(5, 7, 12, .42) 45%, transparent 88%),
      radial-gradient(ellipse 74% 82% at -14% 24%, rgba(185, 0, 56, .32), transparent 78%),
      radial-gradient(ellipse 70% 70% at -18% 100%, rgba(113, 0, 56, .14), transparent 78%),
      radial-gradient(ellipse 74% 82% at 114% 30%, rgba(0, 123, 168, .33), transparent 78%),
      radial-gradient(ellipse 70% 70% at 118% 100%, rgba(0, 95, 135, .15), transparent 78%);
    background-attachment: fixed;
    background-repeat: no-repeat;
  }
  .topbar { height: auto; min-height: 60px; gap: 10px; padding: 10px 14px; }
  .brand { gap: 7px; font-size: 12px; }
  .brand-mark { width: 28px; height: 28px; }
  .nav { gap: 8px; font-size: 10px; }
  .nav a[href="#categorias"] { display: none; }
  .nav-contact { padding: 7px 9px; }
  .catalog-hero { padding-top: 12px; padding-bottom: 12px; }
  .section-description { margin-top: 11px; font-size: 12px; line-height: 1.65; }
  .catalog-tools { margin-bottom: 18px; padding: 14px 0; }
  .filters { gap: 7px; }
  .filter { padding: 9px 12px; font-size: 11px; }
  .count { font-size: 11px; }
  .search-box { width: 100%; }
  .card-body { min-height: 0; padding: 18px; }
  .card h2 { font-size: 15px; }
  .price { font-size: 22px; }
  .description { margin: 10px 0 17px; font-size: 12px; }
  .wa { min-height: 46px; font-size: 12px; }
  .footer { padding-right: 16px; padding-left: 16px; line-height: 1.6; }
}
@media (max-width: 460px) {
  .nav { gap: 9px; font-size: 11px; }
  .nav-contact { padding: 8px 10px; }
  .catalog { width: calc(100% - 16px); padding-right: 8px; padding-left: 8px; }
  .catalog-hero { width: calc(100% - 16px); padding: 24px 8px 28px; }
  h1 { font-size: clamp(32px, 9vw, 40px); }
  .tools-meta { align-items: flex-start; flex-direction: column; gap: 9px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .photo { aspect-ratio: 1.12 / 1; }
}
@media (max-width: 700px) {
  .product-modal { width: calc(100% - 24px); }
  .modal-layout { grid-template-columns: 1fr; min-height: 0; }
  .modal-image-wrap { min-height: 0; aspect-ratio: 1.15 / 1; border-right: 0; border-bottom: 1px solid #ffffff12; }
  .modal-image-wrap img { max-height: 42vh; padding: 18px; }
  .modal-details { padding: 25px 23px 28px; }
  .modal-category { margin-bottom: 11px; }
  .modal-description { max-height: 26vh; margin-top: 16px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}