@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Raleway:wght@300;400;500;600&display=swap');

:root {
  --bg: #0a0a0a;
  --bg-card: rgba(18,18,18,0.6);
  --bg-card-hover: rgba(25,25,25,0.7);
  --text: #e8e8e8;
  --text-secondary: #8a8a8a;
  --text-muted: #555;
  --silver: #c0c0c4;
  --silver-bright: #d8d8dc;
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);
  --whatsapp: #25d366;
  --radius: 14px;
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }

body {
  font-family:'Raleway',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  justify-content:center;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

#bg-canvas {
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none;
}

.app {
  width:100%; max-width:1200px;
  min-height:100vh;
  padding:40px 24px 32px;
  padding-top:max(40px, env(safe-area-inset-top, 40px));
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
}

/* ── Logo ── */
.logo-container {
  width:100px; height:100px; border-radius:50%;
  border:2px solid rgba(192,192,196,0.3); padding:0;
  margin-bottom:16px; overflow:hidden;
  box-shadow:0 0 30px rgba(192,192,196,0.08);
}
.logo-container img { width:100%; height:100%; border-radius:50%; object-fit:cover; }

/* ── Brand ── */
.brand-name {
  font-family:'Playfair Display',serif;
  font-size:36px; font-weight:700; letter-spacing:5px;
  background:linear-gradient(135deg, #a8a8ac 0%, #e0e0e4 45%, #a0a0a4 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  text-align:center; line-height:1; margin-bottom:6px;
}
.tagline {
  font-size:11px; font-weight:400; color:var(--text-secondary);
  text-align:center; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:10px;
}
.trust-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(20,20,20,0.85); border:1px solid rgba(255,255,255,0.1);
  border-radius:100px; padding:6px 16px;
  font-size:10px; font-weight:500; color:var(--text-secondary);
  margin-bottom:14px; letter-spacing:0.5px;
}
.trust-badge svg { width:13px; height:13px; color:var(--silver); flex-shrink:0; }

/* ── Filter bar ── */
.filter-bar {
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin-bottom:20px; width:100%;
  position:sticky; top:0; z-index:5;
  padding:14px 0;
}
.filter-btn {
  padding:10px 20px; border-radius:100px;
  background:rgba(20,20,20,0.85); border:1px solid rgba(255,255,255,0.1);
  font-family:'Raleway',sans-serif; font-size:13px; font-weight:500;
  color:var(--text-secondary); cursor:pointer; transition:var(--transition);
  letter-spacing:0.5px; white-space:nowrap;
}
.filter-btn:hover { border-color:var(--border-hover); color:var(--text); }
.filter-btn.active {
  background:var(--silver); color:#0a0a0a;
  border-color:var(--silver); font-weight:600;
}

@media (max-width:520px) {
  .filter-bar {
    flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding:12px 4px; gap:8px;
    scrollbar-width:none;
  }
  .filter-bar::-webkit-scrollbar { display:none; }
  .filter-btn { padding:10px 18px; font-size:13px; flex-shrink:0; }
}

/* ── Product count ── */
.product-count {
  font-size:11px; color:var(--text-muted); letter-spacing:0.5px;
  margin-bottom:16px; text-align:center;
}

/* ── Product grid ── */
.product-grid {
  width:100%; display:grid;
  grid-template-columns:repeat(5, 1fr); gap:20px;
  margin-bottom:32px;
}

/* ── Responsive grid ── */
@media (max-width:1200px) {
  .product-grid { grid-template-columns:repeat(4, 1fr); gap:18px; }
}
@media (max-width:768px) {
  .product-grid { grid-template-columns:repeat(3, 1fr); gap:14px; }
}
@media (max-width:520px) {
  .product-grid { grid-template-columns:repeat(2, 1fr); gap:12px; }
}

/* ── Product card ── */
.product-card {
  background:var(--bg-card); border:1px solid rgba(255,255,255,0.04);
  border-radius:16px; overflow:hidden;
  transition:border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  contain:layout style paint;
  content-visibility:auto;
  contain-intrinsic-size:0 400px;
}
.product-card:hover {
  border-color:rgba(255,255,255,0.1);
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
  transform:translateY(-4px);
}

/* ── Image carousel ── */
.product-img {
  position:relative; width:100%; aspect-ratio:3/4.5;
  overflow:hidden; background:rgba(255,255,255,0.02);
}
.product-img img {
  position:absolute; top:0; left:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 0.4s ease, transform 0.5s ease;
}
.product-img img.img-active { opacity:1; }
.product-card:hover .product-img img.img-active { transform:scale(1.05); }

.product-badge {
  position:absolute; top:10px; left:10px;
  background:rgba(0,0,0,0.45); color:rgba(255,255,255,0.55);
  font-size:7px; font-weight:500; letter-spacing:1.8px;
  padding:3px 8px; border-radius:3px; text-transform:uppercase;
  z-index:3;
}
.product-tags {
  position:absolute; top:28px; left:10px;
  display:flex; gap:4px; z-index:3;
}
.product-tag {
  background:rgba(0,0,0,0.45); color:rgba(255,255,255,0.75);
  font-size:9px; font-weight:600; letter-spacing:0.5px;
  padding:3px 8px; border-radius:3px;
  font-family:'Raleway',sans-serif;
}
.sold-badge {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.85); color:rgba(255,255,255,0.8);
  font-size:10px; font-weight:600; letter-spacing:2px;
  padding:8px 20px; border-radius:4px; text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.1);
  z-index:3;
}

/* ── Carousel dots ── */
.carousel-dots {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:4px; z-index:3;
}
.carousel-dot {
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,0.25);
  transition:all 0.3s ease;
}
.carousel-dot.active { background:rgba(255,255,255,0.8); width:14px; border-radius:3px; }

/* ── Product info ── */
.product-info { padding:14px 14px 16px; }
.product-name {
  font-family:'Raleway',sans-serif; font-size:12px; font-weight:500;
  color:rgba(232,232,232,0.85); margin-bottom:8px; line-height:1.4;
  letter-spacing:0.2px;
}
.product-price {
  font-family:'Raleway',sans-serif; font-size:19px; font-weight:700;
  background:linear-gradient(135deg, #c0c0c4 0%, #e8e8ec 50%, #b0b0b4 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:10px;
}

.product-wa-btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; padding:10px 8px;
  background:rgba(37,211,102,0.12); border:1px solid rgba(37,211,102,0.2);
  border-radius:10px; color:var(--text);
  font-family:'Raleway',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:0.5px; text-decoration:none;
  transition:all 0.3s ease; cursor:pointer;
}
.product-wa-btn svg { width:15px; height:15px; color:var(--whatsapp); flex-shrink:0; }
.product-wa-btn:hover {
  background:rgba(37,211,102,0.22); border-color:rgba(37,211,102,0.4);
}

/* ── Sold/inactive state ── */
.product-card.vendido { pointer-events:auto; }
.product-card.vendido .product-wa-btn { display:none; }
.product-card.vendido .product-img::after {
  content:''; position:absolute; inset:0;
  background:rgba(0,0,0,0.15); z-index:2;
}

/* ── Loading / Error / Empty ── */
.loading-container {
  width:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:48px 0; gap:16px; grid-column:1/-1;
}
.loading-spinner {
  width:28px; height:28px; border:2px solid var(--border);
  border-top-color:var(--silver); border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { font-size:12px; color:var(--text-secondary); }
.no-products {
  width:100%; text-align:center; padding:36px 20px;
  font-size:13px; color:var(--text-muted); line-height:1.6;
  grid-column:1/-1;
}
.error-msg {
  width:100%; text-align:center; padding:32px 20px;
  font-size:13px; color:var(--text-secondary); line-height:1.6;
  grid-column:1/-1;
}
.error-msg a { color:var(--silver); text-decoration:underline; }

/* ── Social ── */
.social-links { display:flex; gap:14px; justify-content:center; padding-top:4px; margin-bottom:28px; }
.social-link {
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  background:rgba(30,30,30,0.9); border:1px solid rgba(255,255,255,0.15);
  color:#c0c0c4; transition:all 0.3s ease; text-decoration:none;
}
.social-link:hover { transform:translateY(-3px); }
.social-link:nth-child(1):hover { background:rgba(225,48,108,0.2); border-color:rgba(225,48,108,0.5); color:#e1306c; }
.social-link:nth-child(2):hover { background:rgba(24,119,242,0.2); border-color:rgba(24,119,242,0.5); color:#1877f2; }
.social-link:nth-child(3):hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.3); color:#fff; }
.social-link:nth-child(4):hover { background:rgba(255,0,0,0.2); border-color:rgba(255,0,0,0.5); color:#ff0000; }
.social-link svg { width:20px; height:20px; }

.footer { margin-top:20px; font-size:9px; color:var(--text-muted); text-align:center; letter-spacing:1px; text-transform:uppercase; }

/* ── Responsive ── */
@media (max-width:480px) {
  .app { padding:32px 14px 24px; padding-top:max(32px, env(safe-area-inset-top, 32px)); }
  .brand-name { font-size:30px; letter-spacing:4px; }
  .logo-container { width:85px; height:85px; }
  .product-name { font-size:12px; }
}