:root {
    --bg: #0b0f14;
    --bg-2: #121823;
    --bg-3: #1b2433;
    --txt: #e6eef8;
    --muted: #a9b4c2;
    --primary: #0d6efd;
    --accent: #66e0a3;
    --danger: #ff6b6b;
    --warning: #f7b955;
  }

  html,
  body {
    background: var(--bg);
    color: var(--txt);
  }

  .navbar {
    background: rgba(18, 24, 35, .85) !important;
    backdrop-filter: saturate(180%) blur(8px);
  }

  .navbar .nav-link,
  .navbar-brand {
    color: #e7f0ff !important;
  }

  .navbar .nav-link:hover {
    color: #fff !important;
  }

  .btn-cta {
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
  }

  .btn-cta:hover {
    background: #fff;
    color: #000;
  }

  .hero {
    background: linear-gradient(180deg, rgba(18, 24, 35, .95), rgba(18, 24, 35, .85)),
      radial-gradient(1000px 600px at 100% 0, rgba(13, 110, 253, .25), transparent 60%);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }

  .hero .lead {
    color: var(--muted);
  }

  .card-dark {
    background: var(--bg-2);
    border: 1px solid rgba(255, 255, 255, .05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .35);
  }

  .card-dark .card-title {
    color: #fff;
  }

  .card-dark .card-text {
    color: var(--muted);
  }

  .badge-offer {
    background: linear-gradient(45deg, #ff6b6b, #f7b955);
    color: #000;
  }

  .price {
    font-size: 1.05rem;
    font-weight: 600;
  }

  .price del {
    color: #9fb0c5;
    margin-left: .35rem;
  }

  .price .offer {
    color: #fff;
  }

  .card-img-top {
    height: 220px;
    object-fit: cover;
  }

  .card:hover {
    transform: translateY(-2px);
    transition: .25s ease;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
  }

  .filter-bar {
    background: var(--bg-2);
    border: 1px solid rgba(255, 255, 255, .06);
  }

  .form-control,
  .form-select {
    background: #0f1520;
    border-color: #1c2739;
    color: #eaf2ff;
  }

  .form-control:focus,
  .form-select:focus {
    border-color: #2f7afa;
    box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .25);
  }

  .badge.cat {
    background: #0f1520;
    border: 1px solid #22314a;
    color: #cfe0ff;
  }

  .badge.cat.active {
    background: #1d2a42;
    border-color: #2f7afa;
  }

  .section-title {
    color: #fff;
  }

  footer {
    background: var(--bg-2);
    border-top: 1px solid rgba(255, 255, 255, .06);
  }

  .pagination .page-link {
    background: #0f1520;
    border-color: #22314a;
    color: #d7e6ff;
  }

  .pagination .page-item.active .page-link {
    background: #2f7afa;
    border-color: #2f7afa;
  }

  .whatsapp {
    background: #25d366;
    border: none;
    color: #000;
  }

  .whatsapp:hover {
    filter: brightness(.95);
  }

  .btn-outline-light {
    border-color: rgba(255, 255, 255, .25);
  }

  .ribbon {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 2;
    padding: .2rem .5rem;
    border-radius: .35rem;
    font-size: .775rem;
    font-weight: 700;
  }

  .card .code {
    color: #9fb0c5;
    font-size: .8rem;
  }

  .category-chip {
    cursor: pointer;
  }