:root {
      --gold: #FFB800;
      --gold-light: #FFD84D;
      --gold-dark: #CC8800;
      --orange: #FF6B00;
      --orange-light: #FF8C35;
      --red: #CC1111;
      --red-glow: #FF2222;
      --green: #00C850;
      --blue-diamond: #00BFFF;
      --purple-plat: #E040FB;
      --bg-deep: #080400;
      --bg-card: #130900;
      --bg-card2: #0D0600;
      --text: #F0D080;
      --text-main: #F0D080;
      --text-muted: #C8A86A;
      --text-dim: #A48452;
      --border: rgba(255, 184, 0, 0.18);
      --border-soft: rgba(255, 184, 0, 0.08);
      --glow-gold: 0 0 20px rgba(255, 184, 0, 0.5), 0 0 40px rgba(255, 120, 0, 0.3);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Rajdhani', sans-serif;
      background: var(--bg-deep);
      color: var(--text);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* === BACKGROUND LAYERS === */
    .bg-layer {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    .bg-layer::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 90% 50% at 50% -10%, rgba(255, 107, 0, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 50% 80% at 10% 40%, rgba(204, 17, 17, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 50% 80% at 90% 60%, rgba(255, 184, 0, 0.04) 0%, transparent 50%);
    }

    .bg-layer::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 184, 0, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 184, 0, 0.025) 1px, transparent 1px);
      background-size: 70px 70px;
    }

    /* === NAV === */
    nav {
      position: sticky;
      top: 54px;
      z-index: 150;
      background: rgba(5, 2, 0, 0.96);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(16px);
      padding: 0 2.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 68px;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }

    .nav-logo-img {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 2px solid var(--gold);
      box-shadow: 0 0 14px rgba(255, 184, 0, 0.4);
      object-fit: cover;
    }

    .nav-logo-text {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.55rem;
      letter-spacing: 4px;
      background: linear-gradient(135deg, var(--gold-light), var(--orange));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .nav-links {
      display: flex;
      gap: 2rem;
      list-style: none;
    }

    .nav-links a {
      color: var(--text-muted);
      text-decoration: none;
      font-size: 0.88rem;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      transition: color 0.2s;
    }

    .nav-links a:hover {
      color: var(--gold);
    }

    .nav-discord {
      background: linear-gradient(135deg, #5865F2, #4752C4);
      color: white !important;
      padding: 6px 16px;
      border-radius: 6px;
    }

    /* === TICKER === */
    .ticker-wrap {
      background: rgba(255, 184, 0, 0.06);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      overflow: hidden;
      padding: 11px 0;
      position: relative;
      z-index: 1;
    }

    .ticker-track {
      display: flex;
      gap: 0;
      white-space: nowrap;
      animation: ticker 30s linear infinite;
    }

    .ticker-item {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 0.9rem;
      letter-spacing: 2.5px;
      color: var(--gold);
      opacity: 0.65;
      flex-shrink: 0;
      padding: 0 30px;
    }

    .ticker-sep {
      color: var(--orange);
      opacity: 0.5;
      flex-shrink: 0;
    }

    @keyframes ticker {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    /* === HERO === */
    .hero {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 72px 2rem 56px;
    }

    .hero-badge {
      display: inline-block;
      background: rgba(255, 107, 0, 0.12);
      border: 1px solid rgba(255, 107, 0, 0.35);
      color: var(--orange-light);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      padding: 6px 20px;
      border-radius: 30px;
      margin-bottom: 22px;
    }

    .hero h1 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(4rem, 9vw, 8rem);
      letter-spacing: 8px;
      line-height: 0.95;
      background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 45%, var(--orange) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 40px rgba(255, 184, 0, 0.35));
      margin-bottom: 10px;
    }

    .hero h1 span {
      background: linear-gradient(180deg, #fff 0%, var(--gold-light) 70%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .hero-sub {
      font-size: 1rem;
      color: var(--text-muted);
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 36px;
    }

    .divider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 0 auto 40px;
    }

    .divider-line {
      width: 120px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 184, 0, 0.5));
    }

    .divider-line.r {
      background: linear-gradient(90deg, rgba(255, 184, 0, 0.5), transparent);
    }

    .div-gem {
      width: 7px;
      height: 7px;
      background: var(--gold);
      transform: rotate(45deg);
      box-shadow: 0 0 8px var(--gold);
    }

    .chips-row {
      display: flex;
      justify-content: center;
      gap: 8px;
    }

    .chip {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 3px solid rgba(255, 255, 255, 0.15);
    }

    .chip-r {
      background: radial-gradient(circle, #FF5555, #880000);
    }

    .chip-b {
      background: radial-gradient(circle, #333, #0a0a0a);
    }

    .chip-g {
      background: radial-gradient(circle, var(--gold), var(--gold-dark));
    }

    /* === STATS BAR === */
    .stats-bar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 70px;
    }

    .stat-item {
      background: var(--bg-card2);
      padding: 22px;
      text-align: center;
    }

    .stat-num {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2.2rem;
      color: var(--gold);
      text-shadow: 0 0 14px rgba(255, 184, 0, 0.35);
    }

    .stat-label {
      font-size: 0.75rem;
      color: var(--text-muted);
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-top: 4px;
    }

    /* === LAYOUT === */
    section {
      position: relative;
      z-index: 1;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 2rem 80px;
    }

    .section-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2.4rem;
      letter-spacing: 5px;
      color: var(--gold);
      text-align: center;
      margin-bottom: 6px;
      text-shadow: 0 0 24px rgba(255, 184, 0, 0.35);
    }

    .section-sub {
      text-align: center;
      color: rgba(240, 208, 128, 0.7);
      font-size: 0.95rem;
      letter-spacing: 1.5px;
      margin-bottom: 36px;
      text-transform: uppercase;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
      gap: 18px;
    }

    .grid-4 {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 18px;
    }

    /* === DELIVERY BADGES === */
    .delivery-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 20px;
      margin-bottom: 12px;
    }

    .delivery-auto {
      background: rgba(0, 200, 80, 0.15);
      border: 1px solid rgba(0, 200, 80, 0.3);
      color: var(--green);
    }

    .delivery-manual {
      background: rgba(255, 184, 0, 0.1);
      border: 1px solid rgba(255, 184, 0, 0.25);
      color: var(--gold);
    }

    .delivery-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      animation: pulse-dot 2s ease-in-out infinite;
    }

    @keyframes pulse-dot {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.4;
        transform: scale(0.7);
      }
    }

    /* === CARDS === */
    .card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 26px;
      position: relative;
      overflow: hidden;
      transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      opacity: 0;
      transition: opacity 0.3s;
    }

    .card:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 184, 0, 0.45);
      box-shadow: 0 10px 40px rgba(255, 107, 0, 0.18);
    }

    .card:hover::before {
      opacity: 1;
    }

    .card-icon {
      font-size: 2.2rem;
      margin-bottom: 12px;
      display: block;
    }

    .card-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.45rem;
      letter-spacing: 2px;
      color: var(--gold);
      margin-bottom: 8px;
    }

    .card-desc {
      font-size: 0.94rem;
      color: rgba(240, 208, 128, 0.8);
      line-height: 1.6;
      font-weight: 400;
      letter-spacing: 0.2px;
      margin-bottom: 20px;
    }

    .card-price {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2rem;
      letter-spacing: 2px;
      color: var(--orange-light);
    }

    .card-price .cur {
      font-size: 1.2rem;
      vertical-align: super;
    }

    .card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    /* === TAGS === */
    .tag {
      display: inline-block;
      padding: 3px 9px;
      border-radius: 4px;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-right: 4px;
      margin-bottom: 8px;
    }

    .tag-new {
      background: rgba(0, 200, 80, 0.18);
      color: #00C850;
      border: 1px solid rgba(0, 200, 80, 0.3);
    }

    .tag-hot {
      background: rgba(255, 107, 0, 0.18);
      color: var(--orange-light);
      border: 1px solid rgba(255, 107, 0, 0.3);
    }

    .tag-exclusive {
      background: rgba(204, 17, 17, 0.18);
      color: #FF5555;
      border: 1px solid rgba(204, 17, 17, 0.3);
    }

    .tag-popular {
      background: rgba(255, 184, 0, 0.12);
      color: var(--gold);
      border: 1px solid rgba(255, 184, 0, 0.3);
    }

    /* === BUTTONS === */
    .btn {
      display: inline-block;
      position: relative;
      overflow: hidden;
      padding: 10px 22px;
      border-radius: 6px;
      font-family: 'Rajdhani', sans-serif;
      font-weight: 700;
      font-size: 0.88rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: pointer;
      border: none;
      text-decoration: none;
      transition: all 0.25s cubic-bezier(0.22,1,0.36,1);
      text-align: center;
    }
    /* shimmer sweep on all buttons */
    .btn::before {
      content: '';
      position: absolute;
      top: 0; left: -75%;
      width: 45%; height: 100%;
      background: linear-gradient(120deg,
        transparent 0%,
        rgba(255,255,255,0.22) 50%,
        transparent 100%);
      transform: skewX(-20deg);
      transition: left 0.55s ease;
      pointer-events: none;
      z-index: 1;
    }
    .btn:hover::before { left: 135%; }

    .btn-gold {
      background: linear-gradient(135deg, var(--gold), var(--gold-dark));
      color: #1a0800;
    }

    .btn-gold:hover {
      background: linear-gradient(135deg, var(--gold-light), var(--gold));
      box-shadow: 0 6px 28px rgba(255, 184, 0, 0.55);
      transform: translateY(-2px);
    }

    .btn-orange {
      background: linear-gradient(135deg, var(--orange), #CC4400);
      color: white;
    }

    .btn-orange:hover {
      background: linear-gradient(135deg, var(--orange-light), var(--orange));
      box-shadow: 0 6px 28px rgba(255, 107, 0, 0.55);
      transform: translateY(-2px);
    }

    .btn-outline {
      background: transparent;
      border: 1px solid var(--gold);
      color: var(--gold);
    }

    .btn-outline:hover {
      background: rgba(255, 184, 0, 0.08);
    }

    .btn-ticket {
      background: linear-gradient(135deg, #CC8800, #885500);
      color: white;
    }

    .btn-ticket:hover {
      background: linear-gradient(135deg, var(--gold), #CC8800);
      box-shadow: 0 4px 20px rgba(255, 184, 0, 0.3);
    }

    /* === STEAM ID MODAL === */
    @keyframes modalIn {
      from { opacity: 0; transform: translateY(-18px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0)    scale(1);    }
    }
    @keyframes modalOut {
      from { opacity: 1; transform: scale(1); }
      to   { opacity: 0; transform: scale(0.96); }
    }
    .modal-overlay {
      display: flex;
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(0, 0, 0, 0);
      backdrop-filter: blur(0px);
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.28s ease, background 0.28s ease, backdrop-filter 0.28s ease;
    }

    .modal-overlay.open {
      opacity: 1;
      pointer-events: all;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(6px);
    }
    .modal-overlay.open .modal {
      animation: modalIn 0.32s cubic-bezier(0.22,1,0.36,1) both;
    }

    .modal {
      background: linear-gradient(160deg, #150A00, #200E00);
      border: 1px solid rgba(255, 184, 0, 0.35);
      border-radius: 16px;
      padding: 40px;
      max-width: 480px;
      width: 90%;
      position: relative;
      box-shadow: 0 20px 80px rgba(255, 107, 0, 0.25);
    }

    .modal::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }

    .modal-close {
      position: absolute;
      top: 16px;
      right: 20px;
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 1.4rem;
      cursor: pointer;
      transition: color 0.2s;
    }

    .modal-close:hover {
      color: var(--gold);
    }

    .modal-icon {
      font-size: 2.8rem;
      text-align: center;
      margin-bottom: 14px;
    }

    .modal-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.9rem;
      letter-spacing: 3px;
      color: var(--gold);
      text-align: center;
      margin-bottom: 6px;
    }

    .modal-product {
      text-align: center;
      font-size: 0.82rem;
      color: var(--text-muted);
      letter-spacing: 1px;
      margin-bottom: 24px;
    }

    .modal-product strong {
      color: var(--orange-light);
    }

    .field-label {
      display: block;
      font-size: 0.78rem;
      color: var(--text-muted);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 6px;
      font-weight: 600;
    }

    .steam-input {
      width: 100%;
      padding: 12px 16px;
      background: rgba(255, 184, 0, 0.05);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--gold);
      font-family: 'Rajdhani', sans-serif;
      font-size: 1rem;
      letter-spacing: 1px;
      outline: none;
      transition: border-color 0.2s, background 0.2s;
      margin-bottom: 8px;
    }

    .steam-input:focus {
      border-color: rgba(255, 184, 0, 0.55);
      background: rgba(255, 184, 0, 0.08);
    }

    .steam-input::placeholder {
      color: rgba(154, 122, 64, 0.4);
    }

    .steam-hint {
      font-size: 0.76rem;
      color: var(--text-dim);
      margin-bottom: 20px;
      line-height: 1.5;
    }

    .steam-hint a {
      color: var(--text-muted);
    }

    .modal-price {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2.5rem;
      color: var(--orange-light);
      text-align: center;
      margin-bottom: 18px;
    }

    .modal-confirm {
      width: 100%;
      padding: 14px;
      font-size: 1rem;
      letter-spacing: 3px;
      border-radius: 8px;
    }

    .modal-note {
      margin-top: 14px;
      font-size: 0.75rem;
      color: var(--text-dim);
      text-align: center;
      line-height: 1.5;
    }

    .modal-warning {
      background: rgba(255, 107, 0, 0.08);
      border: 1px solid rgba(255, 107, 0, 0.2);
      border-radius: 6px;
      padding: 10px 14px;
      font-size: 0.78rem;
      color: var(--orange-light);
      margin-bottom: 18px;
      line-height: 1.5;
    }

    /* === TICKET MODAL === */
    .modal-ticket {
      background: linear-gradient(160deg, #0D0800, #180C00);
      border-color: rgba(255, 184, 0, 0.3);
    }

    .ticket-steps {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 20px 0;
    }

    .ticket-step {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      background: rgba(255, 184, 0, 0.04);
      border: 1px solid rgba(255, 184, 0, 0.1);
      border-radius: 8px;
      padding: 14px;
    }

    .step-num {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold-dark), #664400);
      color: var(--bg-deep);
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1rem;
      letter-spacing: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .step-text {
      font-size: 0.84rem;
      color: var(--text-muted);
      line-height: 1.5;
    }

    .step-text strong {
      color: var(--text);
    }

    /* === CATÁLOGO CODE INPUT === */
    .code-input-wrap {
      margin-bottom: 16px;
    }

    .code-label {
      display: block;
      font-size: 0.78rem;
      color: var(--text-muted);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .code-input {
      width: 100%;
      padding: 11px 14px;
      background: rgba(255, 184, 0, 0.05);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--gold);
      font-family: 'Rajdhani', sans-serif;
      font-size: 1rem;
      letter-spacing: 2px;
      outline: none;
      transition: border-color 0.2s;
    }

    .code-input:focus {
      border-color: rgba(255, 184, 0, 0.55);
    }

    .code-input::placeholder {
      color: rgba(154, 122, 64, 0.4);
    }

    /* === CATALOG VIEW === */
    #catalogo-view {
      display: none;
      padding-top: 40px;
      min-height: 80vh;
      animation: fadeIn 0.4s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .catalog-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 25px;
      margin-top: 30px;
    }

    .catalog-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      transition: all 0.3s;
      position: relative;
    }

    .catalog-card:hover {
      transform: translateY(-8px);
      border-color: var(--gold);
      box-shadow: 0 15px 45px rgba(255, 184, 0, 0.15);
    }

    .catalog-img-container {
      width: 100%;
      height: 200px;
      background: #0a0a0a;
      position: relative;
      overflow: hidden;
    }

    .catalog-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s;
    }

    .catalog-card:hover .catalog-img {
      transform: scale(1.08);
    }

    .catalog-info {
      padding: 20px;
    }

    .catalog-tag {
      font-size: 0.65rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--gold);
      margin-bottom: 6px;
      display: block;
    }

    .catalog-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.5rem;
      letter-spacing: 1px;
      color: white;
      margin-bottom: 12px;
    }

    .catalog-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid rgba(255, 184, 0, 0.1);
      padding-top: 15px;
    }

    .catalog-code-box {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.1rem;
      color: var(--gold-light);
      background: rgba(255, 184, 0, 0.1);
      padding: 5px 12px;
      border-radius: 6px;
      border: 1px solid rgba(255, 184, 0, 0.2);
    }

    .catalog-price {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.8rem;
      color: var(--orange-light);
    }

    .btn-back {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 30px;
      color: var(--text-muted);
      text-decoration: none;
      font-weight: 600;
      transition: color 0.2s;
      cursor: pointer;
    }

    .btn-back:hover {
      color: var(--gold);
    }

    /* === SHOPPING CART === */
    @keyframes cartBounce {
      0%  { transform: scale(1); }
      30% { transform: scale(1.25) rotate(-8deg); }
      60% { transform: scale(0.95) rotate(4deg); }
      100%{ transform: scale(1) rotate(0deg); }
    }
    .cart-float {
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 500;
      background: linear-gradient(135deg, var(--gold), var(--orange));
      width: 65px;
      height: 65px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 8px 32px rgba(255, 107, 0, 0.4);
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .cart-float:hover {
      transform: scale(1.12) rotate(6deg);
      box-shadow: 0 12px 40px rgba(255, 107, 0, 0.6);
    }
    .cart-float.bounce { animation: cartBounce 0.45s cubic-bezier(0.22,1,0.36,1); }

    .cart-count {
      position: absolute;
      top: -5px;
      right: -5px;
      background: white;
      color: var(--bg-deep);
      font-weight: 800;
      font-size: 0.85rem;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--orange);
    }

    .cart-sidebar {
      position: fixed;
      top: 0;
      right: -400px;
      width: 400px;
      height: 100vh;
      background: rgba(13, 6, 0, 0.98);
      backdrop-filter: blur(20px);
      z-index: 1000;
      border-left: 1px solid var(--border);
      transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
      display: flex;
      flex-direction: column;
      box-shadow: -20px 0 50px rgba(0, 0, 0, 0.8);
    }

    .cart-sidebar.open {
      right: 0;
    }

    .cart-header {
      padding: 30px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .cart-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.8rem;
      color: var(--gold);
      letter-spacing: 2px;
    }

    .cart-close {
      font-size: 1.5rem;
      color: var(--text-muted);
      cursor: pointer;
      transition: color 0.2s;
    }

    .cart-close:hover {
      color: white;
    }

    .cart-items {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
    }

    .cart-item {
      display: flex;
      gap: 15px;
      background: rgba(255, 184, 0, 0.03);
      border: 1px solid rgba(255, 184, 0, 0.08);
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 15px;
      animation: slideInCart 0.3s ease;
    }

    @keyframes slideInCart {
      from {
        opacity: 0;
        transform: translateX(20px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .cart-item-info {
      flex: 1;
    }

    .cart-item-name {
      font-weight: 700;
      color: white;
      font-size: 0.95rem;
      margin-bottom: 4px;
    }

    .cart-item-price {
      color: var(--gold-light);
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.2rem;
    }

    .cart-item-remove {
      color: #ff4444;
      font-size: 0.8rem;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 0.2s;
    }

    .cart-item-remove:hover {
      opacity: 1;
    }

    .cart-footer {
      padding: 30px;
      border-top: 1px solid var(--border);
      background: rgba(0, 0, 0, 0.3);
    }

    .cart-total-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .cart-total-label {
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 0.8rem;
    }

    .cart-total-val {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2.2rem;
      color: var(--gold);
    }

    .btn-checkout {
      width: 100%;
      padding: 16px;
      font-size: 1rem;
      letter-spacing: 3px;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(255, 107, 0, 0.3);
    }

    .cart-empty {
      text-align: center;
      padding: 50px 20px;
      color: var(--text-dim);
    }

    .cart-empty-icon {
      font-size: 3rem;
      margin-bottom: 15px;
      opacity: 0.3;
    }

    /* === VIP SECTION === */
    .vip-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
    }

    .vip-card {
      border-radius: 14px;
      padding: 30px 24px;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .vip-card::after {
      content: '';
      position: absolute;
      top: 0; left: -80%;
      width: 50%; height: 100%;
      background: linear-gradient(120deg,
        transparent 0%,
        rgba(255,255,255,0.07) 50%,
        transparent 100%);
      transform: skewX(-15deg);
      transition: left 0.65s ease;
      pointer-events: none;
    }
    .vip-card:hover::after { left: 140%; }
    .vip-card:hover {
      transform: translateY(-6px);
    }

    .vip-plata {
      background: linear-gradient(160deg, #111120, #161626);
      border: 1px solid #666;
    }

    .vip-plata:hover {
      box-shadow: 0 12px 50px rgba(180, 180, 180, 0.25);
    }

    .vip-oro {
      background: linear-gradient(160deg, #180E00, #251500);
      border: 1px solid var(--gold);
    }

    .vip-oro:hover {
      box-shadow: 0 12px 50px rgba(255, 184, 0, 0.35);
    }

    .vip-diamante {
      background: linear-gradient(160deg, #001520, #002030);
      border: 1px solid #00BFFF;
    }

    .vip-diamante:hover {
      box-shadow: 0 12px 50px rgba(0, 191, 255, 0.35);
    }

    .vip-platino {
      background: linear-gradient(160deg, #0F0018, #180025);
      border: 1px solid #E040FB;
    }

    .vip-platino:hover {
      box-shadow: 0 12px 60px rgba(224, 64, 251, 0.45);
    }

    .vip-platino-badge {
      position: absolute;
      top: 14px;
      right: 14px;
      background: linear-gradient(135deg, #E040FB, #9C27B0);
      color: white;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 1px;
      padding: 3px 9px;
      border-radius: 10px;
    }

    .vip-tier {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.9rem;
      letter-spacing: 4px;
      margin-bottom: 4px;
    }

    .vip-plata .vip-tier {
      color: #C0C0C0;
    }

    .vip-oro .vip-tier {
      color: var(--gold);
      text-shadow: 0 0 15px rgba(255, 184, 0, 0.4);
    }

    .vip-diamante .vip-tier {
      color: #00BFFF;
    }

    .vip-platino .vip-tier {
      color: #E040FB;
    }

    .vip-renewal {
      font-size: 0.72rem;
      color: var(--text-dim);
      letter-spacing: 1px;
      margin-bottom: 14px;
    }

    .vip-price {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2.8rem;
      margin: 0 0 4px;
    }

    .vip-plata .vip-price {
      color: #C0C0C0;
    }

    .vip-oro .vip-price {
      color: var(--gold-light);
    }

    .vip-diamante .vip-price {
      color: #7DF9FF;
    }

    .vip-platino .vip-price {
      color: #F48FFF;
    }

    .vip-perks {
      list-style: none;
      text-align: left;
      margin: 18px 0 22px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .vip-perks li {
      font-size: 0.9rem;
      color: rgba(240, 208, 128, 0.85);
      display: flex;
      align-items: flex-start;
      gap: 10px;
      line-height: 1.5;
    }

    .vip-perks li::before {
      content: '◆';
      font-size: 0.5rem;
      flex-shrink: 0;
      margin-top: 5px;
    }

    .vip-plata .vip-perks li::before {
      color: #C0C0C0;
    }

    .vip-oro .vip-perks li::before {
      color: var(--gold);
    }

    .vip-diamante .vip-perks li::before {
      color: #00BFFF;
    }

    .vip-platino .vip-perks li::before {
      color: #E040FB;
    }

    .vip-btn {
      width: 100%;
      padding: 12px;
      font-size: 0.88rem;
      letter-spacing: 2px;
      border-radius: 8px;
    }

    .vip-btn-plata {
      background: linear-gradient(135deg, #777, #444);
      color: white;
    }

    .vip-btn-plata:hover {
      background: linear-gradient(135deg, #999, #777);
    }

    .vip-btn-oro {
      background: linear-gradient(135deg, var(--gold), var(--gold-dark));
      color: #1a0800;
    }

    .vip-btn-oro:hover {
      background: linear-gradient(135deg, var(--gold-light), var(--gold));
      box-shadow: 0 4px 20px rgba(255, 184, 0, 0.4);
    }

    .vip-btn-diamante {
      background: linear-gradient(135deg, #00BFFF, #0088BB);
      color: #001520;
    }

    .vip-btn-diamante:hover {
      box-shadow: 0 4px 20px rgba(0, 191, 255, 0.4);
    }

    .vip-btn-platino {
      background: linear-gradient(135deg, #E040FB, #9C27B0);
      color: white;
    }

    .vip-btn-platino:hover {
      box-shadow: 0 4px 20px rgba(224, 64, 251, 0.4);
    }

    /* === COCHES === */
    .car-header {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      border-radius: 10px;
      margin-bottom: 20px;
    }

    .car-header-public {
      background: rgba(255, 184, 0, 0.04);
      border: 1px solid var(--border);
    }

    .car-header-exclusive {
      background: rgba(204, 17, 17, 0.06);
      border: 1px solid rgba(204, 17, 17, 0.3);
    }

    .car-header-label {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.5rem;
      letter-spacing: 3px;
    }

    .car-header-label-public {
      color: var(--gold);
    }

    .car-header-label-excl {
      color: #FF5555;
    }

    .car-header-desc {
      font-size: 0.88rem;
      color: rgba(240, 208, 128, 0.75);
      margin-top: 2px;
    }

    .car-badge-excl {
      margin-left: auto;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--red), #770000);
      color: white;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 2px;
      padding: 5px 12px;
      border-radius: 20px;
      text-transform: uppercase;
    }

    /* === MAFIA === */
    .mafia-card {
      background: linear-gradient(160deg, #0D0000, #1A0505);
      border: 1px solid rgba(204, 17, 17, 0.35);
      border-radius: 16px;
      padding: 40px;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: all 0.3s;
    }

    .mafia-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(204, 17, 17, 0.12) 0%, transparent 65%);
      pointer-events: none;
    }

    .mafia-card:hover {
      border-color: rgba(204, 17, 17, 0.65);
      box-shadow: 0 12px 60px rgba(180, 0, 0, 0.25);
    }

    .mafia-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2.8rem;
      letter-spacing: 5px;
      color: var(--red-glow);
      text-shadow: 0 0 25px rgba(255, 50, 50, 0.5);
      margin-bottom: 10px;
    }

    .mafia-perks {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 14px;
      max-width: 860px;
      margin: 0 auto 32px;
      text-align: left;
    }

    .mafia-perk {
      background: rgba(204, 17, 17, 0.08);
      border: 1px solid rgba(204, 17, 17, 0.18);
      border-radius: 8px;
      padding: 18px;
    }

    .mafia-perk-icon {
      font-size: 1.4rem;
      margin-bottom: 8px;
    }

    .mafia-perk-title {
      font-weight: 700;
      color: #FF5555;
      font-size: 0.9rem;
      margin-bottom: 6px;
    }

    .mafia-perk-desc {
      font-size: 0.86rem;
      color: rgba(240, 208, 128, 0.7);
      line-height: 1.5;
    }

    /* === TEBEX SECTION === */
    .tebex-box {
      max-width: 820px;
      margin: 0 auto;
      background: linear-gradient(160deg, #100800, #1A1000);
      border: 1px solid rgba(244, 124, 32, 0.25);
      border-radius: 14px;
      padding: 40px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .tebex-box::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, #F47C20, transparent);
    }

    .methods-grid {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }

    .method-pill {
      background: rgba(255, 184, 0, 0.06);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 9px 16px;
      font-weight: 700;
      color: var(--text);
      font-size: 0.85rem;
    }

    /* === MAPEADO === */
    .mapa-card {
      max-width: 880px;
      margin: 0 auto;
      background: linear-gradient(160deg, #001800, #002200);
      border: 1px solid rgba(0, 200, 80, 0.25);
      border-radius: 14px;
      padding: 36px;
      position: relative;
      overflow: hidden;
    }

    /* === HIGHLIGHT BOX === */
    .highlight-box {
      background: rgba(255, 184, 0, 0.06);
      border: 1px solid rgba(255, 184, 0, 0.15);
      border-radius: 8px;
      padding: 4px 10px;
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 1px;
      color: var(--gold);
      text-transform: uppercase;
      display: inline-block;
      margin-bottom: 12px;
    }

    /* === FOOTER === */
    footer {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 40px 2rem;
      border-top: 1px solid var(--border);
      background: rgba(5, 2, 0, 0.85);
    }

    .footer-logo {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2rem;
      letter-spacing: 6px;
      background: linear-gradient(135deg, var(--gold-light), var(--orange));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 12px;
    }

    footer p {
      font-size: 0.88rem;
      color: rgba(240, 208, 128, 0.6);
      letter-spacing: 0.5px;
      line-height: 1.8;
    }

    /* === RESPONSIVE === */
    @media (max-width: 768px) {
      .stats-bar {
        grid-template-columns: repeat(2, 1fr);
      }

      .nav-links {
        display: none;
      }

      .modal {
        padding: 28px 22px;
      }

      .car-2col {
        grid-template-columns: 1fr !important;
      }

      .car-3col {
        grid-template-columns: 1fr !important;
      }
    }

    /* === SECTION SEPARATOR === */
    .sep {
      position: relative;
      z-index: 1;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 2rem;
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 60px;
    }

    .sep-line {
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    .sep-gem {
      width: 6px;
      height: 6px;
      background: var(--gold);
      transform: rotate(45deg);
    }

    /* === NOTICE BOX === */
    .notice {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      background: rgba(255, 184, 0, 0.06);
      border: 1px solid rgba(255, 184, 0, 0.18);
      border-radius: 8px;
      padding: 14px 18px;
      margin-bottom: 28px;
      font-size: 0.84rem;
      color: var(--text-muted);
      line-height: 1.6;
    }

    .notice-icon {
      font-size: 1.2rem;
      flex-shrink: 0;
    }

    /* === MANUAL NOTICE (ticket) === */
    .manual-notice {
      background: rgba(255, 184, 0, 0.05);
      border: 1px solid rgba(255, 184, 0, 0.2);
      border-radius: 8px;
      padding: 14px 16px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 12px;
      font-size: 0.8rem;
      color: var(--text-muted);
      line-height: 1.5;
    }

    /* =============================================
     === SIDEBAR EQUIPO (NUEVO) ===
     ============================================= */
    .sidebar-equipo {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 150;
      width: 182px;
      background: #0A0500;
      border: 1px solid rgba(255, 184, 0, 0.22);
      border-right: none;
      border-radius: 12px 0 0 12px;
      overflow-y: auto;
      overflow-x: hidden;
      max-height: calc(100vh - 76px);   /* nunca supera la pantalla menos el nav */
      overscroll-behavior: contain;
      box-shadow: -6px 0 40px rgba(0, 0, 0, 0.6), -2px 0 12px rgba(255, 184, 0, 0.06);
    }
    /* Scrollbar discreta dentro de la card */
    .sidebar-equipo::-webkit-scrollbar { width: 4px; }
    .sidebar-equipo::-webkit-scrollbar-track { background: transparent; }
    .sidebar-equipo::-webkit-scrollbar-thumb { background: rgba(255, 184, 0, 0.2); border-radius: 2px; }
    .sidebar-equipo::-webkit-scrollbar-thumb:hover { background: rgba(255, 184, 0, 0.4); }

    .sb-header {
      background: rgba(255, 184, 0, 0.08);
      border-bottom: 1px solid rgba(255, 184, 0, 0.18);
      padding: 5px 14px;
      text-align: center;
      position: sticky;
      top: 0;
      z-index: 2;
      backdrop-filter: blur(6px);
    }

    .sb-header-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 0.76rem;
      letter-spacing: 4px;
      color: var(--gold);
    }

    .sb-header-gem {
      display: inline-block;
      width: 5px;
      height: 5px;
      background: var(--gold);
      transform: rotate(45deg);
      margin: 0 6px;
      vertical-align: middle;
      opacity: 0.5;
    }

    .sb-section {
      padding: 5px 14px 6px;
      border-bottom: 1px solid rgba(255, 184, 0, 0.2);
    }

    .sb-section:last-child {
      border-bottom: none;
    }

    .sb-section-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 0.6rem;
      letter-spacing: 2.5px;
      color: rgba(255, 200, 80, 0.8);
      text-shadow: 0 0 10px rgba(255, 184, 0, 0.2);
      text-transform: uppercase;
      margin-bottom: 4px;
      padding-bottom: 3px;
      border-bottom: 1px solid rgba(255, 184, 0, 0.2);
    }

    .sb-member {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-bottom: 3px;
      padding-bottom: 3px;
      border-bottom: 1px solid rgba(255, 184, 0, 0.04);
    }

    .sb-member:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    /* Miembro clickeable → abre su Discord (se activa solo si tiene data-discord-id) */
    .sb-member.is-clickable {
      position: relative;
      cursor: pointer;
      border-radius: 7px;
      transition: background .2s ease, transform .2s ease;
    }
    /* barra dorada en el margen izquierdo (fuera del texto, no lo tapa) */
    .sb-member.is-clickable::before {
      content: "";
      position: absolute;
      left: -8px; top: 4px; bottom: 4px;
      width: 3px; border-radius: 2px;
      background: var(--gold);
      opacity: 0;
      transition: opacity .2s ease;
    }
    .sb-member.is-clickable:hover,
    .sb-member.is-clickable:focus-visible {
      background: rgba(255, 184, 0, 0.07);
      transform: translateX(2px);
      outline: none;
    }
    .sb-member.is-clickable:hover::before,
    .sb-member.is-clickable:focus-visible::before { opacity: 1; }
    .sb-member.is-clickable:hover .sb-discord,
    .sb-member.is-clickable:focus-visible .sb-discord { color: #aab4fc; }

    .sb-role-badge {
      display: inline-block;
      font-size: 0.5rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 1px 5px;
      border-radius: 3px;
      margin-bottom: 1px;
      width: fit-content;
    }

    .badge-founder {
      background: linear-gradient(135deg, #8B5CF6, #FFB800);
      color: #fff;
      border: 1px solid rgba(255, 184, 0, 0.4);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    }

    .badge-director {
      background: linear-gradient(135deg, #29C3F5, #A855F7);
      color: #fff;
      border: 1px solid rgba(168, 85, 247, 0.5);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .badge-jefe {
      background: rgba(0, 191, 255, 0.12);
      color: #00BFFF;
      border: 1px solid rgba(0, 191, 255, 0.35);
    }

    .badge-staff {
      background: linear-gradient(135deg, #E23B3B, #FCE4E4);
      color: #6E0F0F;
      border: 1px solid rgba(226, 59, 59, 0.45);
    }

    .badge-dev {
      background: linear-gradient(135deg, #06C7B0, #EAFBF8);
      color: #06403A;
      border: 1px solid rgba(6, 199, 176, 0.45);
    }

    .sb-name {
      font-size: 0.74rem;
      font-weight: 700;
      color: var(--gold-light);
      letter-spacing: 0.5px;
      margin-bottom: 0;
      line-height: 1.15;
    }

    .sb-discord {
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.62rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.85);
      letter-spacing: 0.5px;
      background: rgba(255, 184, 0, 0.05);
      padding: 0 5px;
      border-radius: 4px;
      width: fit-content;
      line-height: 1.2;
    }

    /* Ocultar en pantallas pequeñas para no tapar nada */
    @media (max-width: 1220px) {
      .sidebar-equipo {
        display: none;
      }
    }

    /* ════════════════════════════════════════════════
       RESPONSIVE — escala la card según el tamaño de pantalla
       (default = compacta para 1080p, sube en 1440p+ y 4K)
    ════════════════════════════════════════════════ */

    /* 1440p (≥2100px): escala ~1.15x — solo si hay alto suficiente para que entre completa */
    @media (min-width: 2100px) and (min-height: 1000px) {
      .sidebar-equipo { width: 198px; }
      .sb-header { padding: 6px 15px; }
      .sb-header-title { font-size: 0.84rem; letter-spacing: 4px; }
      .sb-section { padding: 6px 15px 7px; }
      .sb-section-title { font-size: 0.64rem; letter-spacing: 2.7px; margin-bottom: 5px; padding-bottom: 4px; }
      .sb-member { margin-bottom: 4px; padding-bottom: 4px; }
      .sb-role-badge { font-size: 0.54rem; padding: 1px 6px; margin-bottom: 1px; letter-spacing: 1.1px; }
      .sb-name { font-size: 0.82rem; letter-spacing: 0.6px; }
      .sb-discord { font-size: 0.68rem; padding: 1px 6px; }
    }

    /* 4K (≥2400px): escala ~1.4x — solo con alto suficiente para que no se corte */
    @media (min-width: 2400px) and (min-height: 1250px) {
      .sidebar-equipo { width: 220px; }
      .sb-header { padding: 7px 17px; }
      .sb-header-title { font-size: 0.92rem; letter-spacing: 4.5px; }
      .sb-section { padding: 7px 17px 8px; }
      .sb-section-title { font-size: 0.72rem; letter-spacing: 3.2px; margin-bottom: 6px; padding-bottom: 4px; }
      .sb-member { margin-bottom: 5px; padding-bottom: 5px; }
      .sb-role-badge { font-size: 0.58rem; padding: 2px 7px; margin-bottom: 2px; letter-spacing: 1.3px; }
      .sb-name { font-size: 0.9rem; letter-spacing: 0.7px; }
      .sb-discord { font-size: 0.74rem; padding: 1px 7px; }
    }

    /* ── Equipo: viewport de MUY POCA ALTURA — compacta extra para que los 9 entren ── */
    @media (max-height: 720px) {
      .sb-header { padding: 4px 12px; }
      .sb-header-title { font-size: 0.72rem; letter-spacing: 3px; }
      .sb-section { padding: 4px 12px 5px; }
      .sb-section-title { font-size: 0.6rem; margin-bottom: 3px; padding-bottom: 3px; letter-spacing: 2px; }
      .sb-member { margin-bottom: 2px; padding-bottom: 3px; }
      .sb-role-badge { font-size: 0.46rem; padding: 1px 5px; margin-bottom: 1px; }
      .sb-name { font-size: 0.7rem; line-height: 1.1; }
      .sb-discord { font-size: 0.58rem; padding: 0 5px; }
    }

    /* ── SITE NAV ── */
    .site-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      display: flex; align-items: center; gap: 20px;
      padding: 10px 28px;
      background: rgba(8,4,0,0.92); backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(255,184,0,0.15);
    }
    .site-nav-logo { font-family:'Bebas Neue',sans-serif; font-size:1.1rem; letter-spacing:3px; color:var(--gold); text-decoration:none; flex-shrink:0; }
    .site-nav-links { display:flex; gap:4px; flex:1; justify-content:center; }
    .site-nav-link { font-family:'Rajdhani',sans-serif; font-size:0.82rem; font-weight:600; letter-spacing:1.5px; padding:6px 14px; border-radius:6px; color:var(--text-muted); text-decoration:none; transition:background 0.2s,color 0.2s; }
    .site-nav-link:hover, .site-nav-link.active { background:rgba(255,184,0,0.1); color:var(--gold); }
    .site-nav-discord { display:flex; align-items:center; gap:6px; padding:6px 14px; background:rgba(88,101,242,0.15); border:1px solid rgba(88,101,242,0.3); border-radius:6px; color:#aab4fc; font-family:'Rajdhani',sans-serif; font-size:0.78rem; font-weight:600; letter-spacing:1px; text-decoration:none; flex-shrink:0; transition:background 0.2s; }
    .site-nav-discord:hover { background:rgba(88,101,242,0.3); color:#fff; }
    @media(max-width:600px){ .site-nav-links{display:none;} .site-nav{padding:10px 16px;} }

    /* ── REVEAL FALLBACK ── */
    @keyframes revealFallback { to { opacity:1; transform:translateY(0); } }
    .reveal-on-scroll { opacity:0; transform:translateY(28px); transition:opacity 0.6s ease,transform 0.6s ease; animation:revealFallback 0.6s ease 1.8s forwards; }
    .reveal-on-scroll.visible { opacity:1; transform:translateY(0); animation:none; }

    /* ── PISOS OVERLAY ── */
    .pisos-modal-overlay { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.82); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.25s; padding:20px; }
    .pisos-modal-overlay.open { opacity:1; pointer-events:all; }
    .pisos-modal-overlay.open > div { animation: modalIn 0.32s cubic-bezier(0.22,1,0.36,1) both; }
    .pisos-modal-overlay.closing { opacity:0; pointer-events:none; }
    .pisos-modal-panel { background:linear-gradient(160deg,#140a00,#0d0500); border:1px solid rgba(255,184,0,0.2); border-radius:18px; width:100%; max-width:820px; max-height:88vh; overflow-y:auto; padding:32px; position:relative; }
    .pisos-modal-title { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; letter-spacing:4px; color:var(--gold); margin-bottom:4px; }
    .pisos-modal-sub { font-size:0.82rem; color:var(--text-dim); margin-bottom:22px; }
    .piso-close-btn { position:absolute; top:16px; right:16px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:8px; color:var(--text-muted); font-size:1rem; width:34px; height:34px; cursor:pointer; transition:background 0.2s; display:flex; align-items:center; justify-content:center; }
    .piso-close-btn:hover { background:rgba(255,60,60,0.2); }
    .pisos-layout { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
    .piso-chip { display:flex; align-items:center; gap:12px; padding:12px 16px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,184,0,0.12); border-radius:10px; cursor:pointer; transition:all 0.2s; margin-bottom:8px; }
    .piso-chip:hover, .piso-chip.selected { background:rgba(255,184,0,0.08); border-color:rgba(255,184,0,0.4); }
    .piso-chip-icon { font-size:1.5rem; }
    .piso-chip-name { font-weight:700; font-size:0.88rem; color:var(--text-main); }
    .piso-chip-price { font-size:0.78rem; color:var(--gold); }
    .piso-chip-badge { font-family:'Bebas Neue',sans-serif; font-size:0.6rem; letter-spacing:2px; background:rgba(255,120,0,0.2); border:1px solid rgba(255,120,0,0.4); color:var(--orange); border-radius:4px; padding:2px 6px; margin-left:6px; }
    .piso-chip-arrow { margin-left:auto; color:var(--text-dim); font-size:1.1rem; }
    .piso-preview-box { background:rgba(255,255,255,0.02); border:1px solid rgba(255,184,0,0.1); border-radius:12px; padding:20px; min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
    .piso-preview-img { width:100%; height:160px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:4rem; margin-bottom:14px; }
    .piso-preview-name { font-family:'Bebas Neue',sans-serif; font-size:1.3rem; letter-spacing:3px; color:var(--gold); margin-bottom:6px; }
    .piso-preview-desc { font-size:0.8rem; color:var(--text-dim); line-height:1.5; margin-bottom:16px; }
    .piso-preview-price { font-family:'Bebas Neue',sans-serif; font-size:2rem; color:var(--gold); }
    .piso-buy-btn { width:100%; padding:13px; background:linear-gradient(135deg,var(--gold-dark),var(--gold)); color:#1a0800; font-family:'Bebas Neue',sans-serif; font-size:1rem; letter-spacing:2px; border:none; border-radius:10px; cursor:pointer; margin-top:12px; transition:opacity 0.2s; }
    .piso-buy-btn:hover { opacity:0.88; }
    @media(max-width:620px){ .pisos-layout{grid-template-columns:1fr;} }

    /* ── TAG MODAL ── */
    .tag-preview-chat { background:rgba(0,0,0,0.4); border-radius:8px; padding:12px 16px; font-size:0.9rem; color:var(--text-muted); margin:14px 0; border:1px solid rgba(255,255,255,0.07); }
    .tag-preview-badge { font-weight:800; letter-spacing:1px; }
    .color-swatches { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px; }
    .color-swatch { width:28px; height:28px; border-radius:6px; cursor:pointer; border:2px solid transparent; transition:transform 0.15s,border-color 0.15s; }
    .color-swatch:hover { transform:scale(1.15); }
    .color-swatch.selected { border-color:white; transform:scale(1.2); }

    /* ── ARMAS OVERLAY ── */

    /* ═══ GENERIC SIDE-PANEL OVERLAY ═══ */
    .side-overlay {
      position: fixed; inset: 0; z-index: 1000;
      background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
      display: flex; align-items: flex-start; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity 0.25s ease;
      padding: 20px; overflow-y: auto;
    }
    .side-overlay.open { opacity: 1; pointer-events: all; }
    .side-overlay.open > .side-panel { animation: modalIn 0.32s cubic-bezier(0.22,1,0.36,1) both; }

    .side-panel {
      width: 100%; max-width: 780px; margin: auto;
      border-radius: 18px; padding: 32px; position: relative;
    }
    .side-panel-close {
      position: absolute; top: 16px; right: 16px;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px; color: var(--text-muted); font-size: 1rem;
      width: 34px; height: 34px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s;
    }
    .side-panel-close:hover { background: rgba(255,60,60,0.2); color: #fff; }
    .side-panel-title {
      font-family: 'Bebas Neue', sans-serif; font-size: 2rem; letter-spacing: 4px;
      margin-bottom: 4px;
    }
    .side-panel-sub { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 18px; }
    .side-panel-how {
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px; padding: 14px 18px; font-size: 0.85rem;
      color: var(--text-muted); line-height: 1.6; margin-bottom: 22px;
    }

    /* Item grid (3 cols) */
    .sov-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 22px; }
    @media(max-width:600px){ .sov-grid { grid-template-columns: 1fr 1fr; } }
    .sov-card {
      background: rgba(255,255,255,0.03); border: 1px solid rgba(255,184,0,0.1);
      border-radius: 12px; padding: 18px 14px; text-align: center;
      transition: background 0.2s, border-color 0.2s, transform 0.2s;
    }
    .sov-card:hover { background: rgba(255,184,0,0.05); border-color: rgba(255,184,0,0.25); transform: translateY(-3px); }
    .sov-card-icon { font-size: 2.2rem; margin-bottom: 8px; }
    .sov-card-name { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: 2px; color: var(--gold); margin-bottom: 4px; }
    .sov-card-desc { font-size: 0.76rem; color: var(--text-dim); line-height: 1.5; }

    /* Location list (for Badulaque) */
    .sov-loc-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
    .sov-loc-item {
      display: flex; align-items: center; gap: 16px;
      background: rgba(255,255,255,0.03); border: 1px solid rgba(255,184,0,0.1);
      border-radius: 12px; padding: 14px 18px;
      transition: background 0.2s, border-color 0.2s;
    }
    .sov-loc-item:hover { background: rgba(255,184,0,0.05); border-color: rgba(255,184,0,0.2); }
    .sov-loc-icon { font-size: 2rem; flex-shrink: 0; }
    .sov-loc-name { font-weight: 700; font-size: 0.92rem; color: var(--text-main); margin-bottom: 2px; }
    .sov-loc-detail { font-size: 0.78rem; color: var(--text-dim); }
    .sov-loc-badge {
      margin-left: auto; padding: 4px 10px; border-radius: 6px;
      font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; flex-shrink: 0;
    }

    /* Radio steps */
    .sov-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
    .sov-step {
      display: flex; align-items: flex-start; gap: 14px;
      background: rgba(255,255,255,0.03); border: 1px solid rgba(255,184,0,0.1);
      border-radius: 12px; padding: 14px 18px;
    }
    .sov-step-num {
      width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Bebas Neue', sans-serif; font-size: 1rem;
      background: rgba(255,184,0,0.15); border: 1px solid rgba(255,184,0,0.3);
      color: var(--gold);
    }
    .sov-step-title { font-weight: 700; font-size: 0.9rem; color: var(--text-main); margin-bottom: 2px; }
    .sov-step-desc { font-size: 0.8rem; color: var(--text-dim); line-height: 1.5; }

    /* Panel themes */
    .side-panel-ropa { background: linear-gradient(160deg,#0a0015,#120820); border:1px solid rgba(160,80,255,0.2); }
    .side-panel-ropa .side-panel-title { color: #C084FC; }
    .side-panel-ropa .sov-card:hover { border-color: rgba(160,80,255,0.35); background: rgba(160,80,255,0.06); }
    .side-panel-ropa .sov-card-name { color: #C084FC; }

    .side-panel-badulaque { background: linear-gradient(160deg,#001a08,#002010); border:1px solid rgba(0,200,80,0.2); }
    .side-panel-badulaque .side-panel-title { color: #00C850; }
    .side-panel-badulaque .sov-loc-item:hover { border-color: rgba(0,200,80,0.3); background: rgba(0,200,80,0.05); }

    .side-panel-mapeado { background: linear-gradient(160deg,#001520,#002030); border:1px solid rgba(0,180,255,0.2); }
    .side-panel-mapeado .side-panel-title { color: #40C0FF; }
    .side-panel-mapeado .sov-card:hover { border-color: rgba(0,180,255,0.35); background: rgba(0,180,255,0.06); }
    .side-panel-mapeado .sov-card-name { color: #40C0FF; }

    .side-panel-radio { background: linear-gradient(160deg,#140a00,#0d0500); border:1px solid rgba(255,140,0,0.25); }
    .side-panel-radio .side-panel-title { color: var(--orange); }


    /* ── CART ITEM QUANTITY ── */
    .cart-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid rgba(255,184,0,0.08); }
    .cart-item-qty-ctrl { display:flex; align-items:center; gap:6px; flex-shrink:0; }
    .cart-qty-btn {
      width:24px; height:24px; border-radius:6px; border:1px solid rgba(255,184,0,0.25);
      background:rgba(255,184,0,0.08); color:var(--gold); font-size:1rem; font-weight:700;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      transition:background 0.15s;
    }
    .cart-qty-btn:hover { background:rgba(255,184,0,0.2); }
    .cart-qty-num { font-family:'Bebas Neue',sans-serif; font-size:1.1rem; color:var(--text-main); min-width:18px; text-align:center; }
    .cart-item-info { flex:1; min-width:0; }
    .cart-item-name { font-size:0.82rem; color:var(--text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .cart-item-price { font-family:'Bebas Neue',sans-serif; font-size:1rem; color:var(--gold); margin-top:1px; }

    /* ── ARMAS COUNTER BAR ── */
    .armas-counter-bar {
      position:sticky; top:0; z-index:10;
      background:linear-gradient(135deg,#1a0a00,#250e00);
      border:1px solid rgba(255,100,100,0.3);
      border-radius:12px; padding:12px 18px;
      display:flex; align-items:center; gap:14px; flex-wrap:wrap;
      margin-bottom:18px;
      transition: border-color 0.3s, background 0.3s;
    }
    .armas-counter-bar.discount-active {
      border-color:rgba(0,200,80,0.5);
      background:linear-gradient(135deg,#001a08,#002a10);
    }
    .armas-counter-count {
      font-family:'Bebas Neue',sans-serif; font-size:1.6rem; line-height:1;
      color:#FF8080;
      transition: color 0.3s;
    }
    .armas-counter-bar.discount-active .armas-counter-count { color:#00C850; }
    .armas-counter-label { font-size:0.78rem; color:var(--text-dim); }
    .armas-counter-total { font-family:'Bebas Neue',sans-serif; font-size:1.3rem; color:var(--gold); margin-left:auto; }
    .armas-counter-discount {
      font-size:0.75rem; font-weight:700; letter-spacing:1px; color:#00C850;
      padding:3px 10px; background:rgba(0,200,80,0.12); border:1px solid rgba(0,200,80,0.3);
      border-radius:6px; display:none;
    }
    .armas-counter-bar.discount-active .armas-counter-discount { display:block; }
    .armas-counter-progress {
      width:100%; height:4px; background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden;
      flex-basis:100%;
    }
    .armas-counter-progress-fill {
      height:100%; background:linear-gradient(90deg,#FF5555,#FF8080);
      border-radius:2px; transition:width 0.3s ease, background 0.3s;
    }
    .armas-counter-bar.discount-active .armas-counter-progress-fill {
      background:linear-gradient(90deg,#00C850,#44FF88);
    }
    .armas-progress-label { font-size:0.7rem; color:var(--text-dim); flex-basis:100%; text-align:right; margin-top:-4px; }


    /* ── SEARCH BAR ── */
    .search-wrap {
      position: relative; max-width: 480px; margin: 0 auto 32px; z-index: 1;
    }
    .search-input {
      width: 100%; padding: 13px 46px 13px 18px;
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,184,0,0.2);
      border-radius: 12px; color: var(--text-main); font-family: 'Rajdhani', sans-serif;
      font-size: 0.95rem; letter-spacing: 0.5px;
      outline: none; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    }
    .search-input::placeholder { color: var(--text-dim); }
    .search-input:focus {
      border-color: rgba(255,184,0,0.5); background: rgba(255,255,255,0.06);
      box-shadow: 0 0 0 3px rgba(255,184,0,0.08);
    }
    .search-icon {
      position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
      font-size: 1rem; opacity: 0.4; pointer-events: none;
    }
    .search-clear {
      position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
      font-size: 0.9rem; opacity: 0.5; cursor: pointer; display: none;
      background: none; border: none; color: var(--text-muted); padding: 2px;
    }
    .search-clear:hover { opacity: 1; color: var(--gold); }

    /* ── NO RESULTS ── */
    .search-no-results {
      display: none; text-align: center; padding: 48px 20px;
      color: var(--text-dim); font-size: 0.9rem; line-height: 1.7;
    }
    .search-no-results .snr-icon { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.5; }
    .search-no-results strong { color: var(--text-muted); }

    /* ── SECTION HIDE when no matches ── */
    .section-search-hidden { display: none !important; }
    .card.search-match { outline: 1px solid rgba(255,184,0,0.3); }

    /* ── NAV active link ── */
    .nav-links a.nav-active { color: var(--gold); border-bottom: 2px solid var(--gold); padding-bottom: 2px; }


    /* ── VIP COMPARISON TABLE ── */
    .vip-compare-wrap { margin-top: 32px; overflow-x: auto; }
    .vip-compare-toggle {
      display: flex; align-items: center; gap: 10px; cursor: pointer;
      color: var(--text-muted); font-size: 0.82rem; letter-spacing: 1px;
      background: rgba(255,255,255,0.03); border: 1px solid rgba(255,184,0,0.12);
      border-radius: 10px; padding: 10px 18px; width: fit-content;
      margin: 0 auto 0; transition: background 0.2s, border-color 0.2s;
      font-family: 'Rajdhani', sans-serif; font-weight: 600;
    }
    .vip-compare-toggle:hover { background: rgba(255,184,0,0.06); border-color: rgba(255,184,0,0.25); color: var(--gold); }
    .vip-compare-arrow { transition: transform 0.3s; }
    .vip-compare-toggle.open .vip-compare-arrow { transform: rotate(180deg); }
    .vip-compare-table-wrap { display: none; margin-top: 16px; overflow-x: auto; }
    .vip-compare-table-wrap.open { display: block; animation: modalIn 0.3s cubic-bezier(0.22,1,0.36,1) both; }
    .vip-table {
      width: 100%; border-collapse: collapse; font-size: 0.82rem;
      min-width: 580px;
    }
    .vip-table th {
      padding: 12px 16px; text-align: center; font-family: 'Bebas Neue', sans-serif;
      font-size: 1.1rem; letter-spacing: 3px; border-bottom: 1px solid rgba(255,184,0,0.15);
    }
    .vip-table th:first-child { text-align: left; color: var(--text-dim); font-size: 0.7rem; letter-spacing: 2px; }
    .vip-table td {
      padding: 10px 16px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.04);
      color: var(--text-muted); font-size: 0.82rem;
    }
    .vip-table td:first-child { text-align: left; color: var(--text-main); font-size: 0.82rem; }
    .vip-table tr:last-child td { border-bottom: none; }
    .vip-table tr:hover td { background: rgba(255,184,0,0.025); }
    .vip-check { color: #44FF88; font-size: 1rem; }
    .vip-cross { color: rgba(255,255,255,0.15); font-size: 1rem; }
    .vip-table .col-plata { color: #C0C0C0; }
    .vip-table .col-oro { color: #FFB800; }
    .vip-table .col-dia { color: #88CCFF; }
    .vip-table .col-plat { color: #C084FC; }
    .vip-table .price-row td { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; border-bottom: 1px solid rgba(255,184,0,0.12); }
    .vip-table .buy-row td { padding: 14px 16px; }
    .vip-table .buy-row td:first-child { color: transparent; }

    /* ── PRODUCT BADGES ── */
    .badge-popular {
      display: inline-block; padding: 3px 9px; border-radius: 5px;
      font-family: 'Bebas Neue', sans-serif; font-size: 0.62rem; letter-spacing: 2px;
      background: rgba(255,107,0,0.18); border: 1px solid rgba(255,107,0,0.35);
      color: var(--orange); margin-bottom: 6px;
    }
    .badge-bestseller {
      display: inline-block; padding: 3px 9px; border-radius: 5px;
      font-family: 'Bebas Neue', sans-serif; font-size: 0.62rem; letter-spacing: 2px;
      background: rgba(255,184,0,0.15); border: 1px solid rgba(255,184,0,0.35);
      color: var(--gold); margin-bottom: 6px;
    }

    /* ── FAQ SECTION ── */
    .faq-section { max-width: 800px; margin: 0 auto; }
    .faq-item {
      border: 1px solid rgba(255,184,0,0.1); border-radius: 12px;
      margin-bottom: 8px; overflow: hidden;
      transition: border-color 0.2s;
    }
    .faq-item.open { border-color: rgba(255,184,0,0.25); }
    .faq-question {
      width: 100%; text-align: left; padding: 16px 20px;
      background: rgba(255,255,255,0.02); border: none; cursor: pointer;
      color: var(--text-main); font-family: 'Rajdhani', sans-serif;
      font-size: 0.95rem; font-weight: 600; letter-spacing: 0.3px;
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      transition: background 0.2s;
    }
    .faq-question:hover { background: rgba(255,184,0,0.04); color: var(--gold); }
    .faq-item.open .faq-question { color: var(--gold); background: rgba(255,184,0,0.04); }
    .faq-arrow { font-size: 0.8rem; transition: transform 0.3s; flex-shrink: 0; opacity: 0.5; }
    .faq-item.open .faq-arrow { transform: rotate(180deg); opacity: 1; }
    .faq-answer {
      max-height: 0; overflow: hidden;
      transition: max-height 0.35s cubic-bezier(0.22,1,0.36,1), padding 0.2s;
      padding: 0 20px; font-size: 0.87rem; color: var(--text-muted); line-height: 1.7;
    }
    .faq-item.open .faq-answer { max-height: 300px; padding: 0 20px 16px; }

    .armas-overlay { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.85); backdrop-filter:blur(8px); display:flex; align-items:flex-start; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.25s; padding:20px; overflow-y:auto; }
    .armas-overlay.open { opacity:1; pointer-events:all; }
    .armas-overlay.open > div { animation: modalIn 0.32s cubic-bezier(0.22,1,0.36,1) both; }
    .armas-overlay.closing { opacity:0; pointer-events:none; }
    .armas-panel { background:linear-gradient(160deg,#140a00,#0d0500); border:1px solid rgba(255,80,80,0.2); border-radius:18px; width:100%; max-width:760px; padding:32px; position:relative; margin:auto; }
    .armas-panel-close { position:absolute; top:16px; right:16px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:8px; color:var(--text-muted); font-size:1rem; width:34px; height:34px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .armas-panel-close:hover { background:rgba(255,60,60,0.2); }
    .armas-panel-title { font-family:'Bebas Neue',sans-serif; font-size:2rem; letter-spacing:4px; color:#FF6060; margin-bottom:4px; }
    .armas-panel-sub { font-size:0.82rem; color:var(--text-dim); margin-bottom:8px; }
    .armas-how-box { background:rgba(255,184,0,0.04); border:1px solid rgba(255,184,0,0.15); border-radius:10px; padding:14px 18px; margin-bottom:24px; font-size:0.8rem; color:var(--text-muted); line-height:1.7; }
    .armas-how-box strong { color:var(--gold); }
    .armas-tier-block { margin-bottom:28px; }
    .armas-tier-header { display:flex; align-items:center; gap:12px; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.06); }
    .armas-tier-badge { font-family:'Bebas Neue',sans-serif; font-size:0.75rem; letter-spacing:2px; padding:4px 12px; border-radius:4px; }
    .armas-t1-badge { background:rgba(255,60,60,0.15); color:#FF6060; border:1px solid rgba(255,60,60,0.3); }
    .armas-t2-badge { background:rgba(255,184,0,0.1); color:var(--gold); border:1px solid rgba(255,184,0,0.25); }
    .armas-t3-badge { background:rgba(160,160,160,0.1); color:#AAAAAA; border:1px solid rgba(160,160,160,0.2); }
    .armas-tier-title { font-family:'Bebas Neue',sans-serif; font-size:1.1rem; letter-spacing:2px; color:var(--text-main); }
    .armas-tier-desc { font-size:0.75rem; color:var(--text-dim); flex:1; }
    .armas-tier-price { font-family:'Bebas Neue',sans-serif; font-size:1.3rem; color:var(--gold); flex-shrink:0; }
    .armas-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:10px; }
    .arma-card { background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:14px 10px; text-align:center; transition:all 0.2s; display:flex; flex-direction:column; align-items:center; }
    .arma-card:hover { border-color:rgba(255,184,0,0.3); background:rgba(255,184,0,0.05); transform:translateY(-2px); }
    .arma-icon { font-size:1.8rem; margin-bottom:7px; }
    .arma-name { font-weight:700; font-size:0.78rem; color:var(--text-main); margin-bottom:3px; }
    .arma-stat { font-size:0.67rem; color:var(--text-dim); margin-bottom:6px; line-height:1.4; flex:1; }
    .arma-add-btn { width:100%; padding:6px 0; font-size:0.72rem; letter-spacing:1px; border:none; border-radius:6px; cursor:pointer; font-family:'Rajdhani',sans-serif; font-weight:700; transition:opacity 0.2s; margin-top:6px; }
    .arma-add-btn:hover { opacity:0.85; }
    .arma-btn-t1 { background:linear-gradient(135deg,#8B0000,#FF4040); color:white; }
    .arma-btn-t2 { background:linear-gradient(135deg,var(--gold-dark),var(--gold)); color:#1a0800; }
    .arma-btn-t3 { background:linear-gradient(135deg,#555,#888); color:white; }
    .armas-mafia-note { margin-top:20px; padding:14px 18px; background:rgba(255,60,60,0.05); border:1px solid rgba(255,60,60,0.2); border-radius:10px; font-size:0.78rem; color:rgba(255,150,150,0.85); line-height:1.7; }
    .armas-mafia-note strong { color:#FF8080; }

    /* ── PACK MODAL ── */
    .pack-modal-overlay { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.85); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.25s; padding:20px; }
    .pack-modal-overlay.open { opacity:1; pointer-events:all; }
    .pack-modal-overlay.open > div { animation: modalIn 0.32s cubic-bezier(0.22,1,0.36,1) both; }
    .pack-modal-overlay.closing { opacity:0; pointer-events:none; }
    .pack-modal-panel { background:linear-gradient(160deg,#140a00,#0d0500); border:1px solid rgba(255,184,0,0.25); border-radius:18px; width:100%; max-width:700px; max-height:90vh; overflow-y:auto; padding:32px; position:relative; }
    .pack-modal-title { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; letter-spacing:4px; background:linear-gradient(135deg,#FFD84D,#FF6B00); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:4px; }
    .pack-modal-sub { font-size:0.82rem; color:var(--text-dim); margin-bottom:22px; }
    .pack-step { margin-bottom:22px; }
    .pack-step-label { font-family:'Bebas Neue',sans-serif; font-size:1rem; letter-spacing:3px; color:var(--text-muted); margin-bottom:10px; }
    .pack-car-pills { display:flex; flex-wrap:wrap; gap:8px; }
    .car-code-pill { padding:6px 14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:20px; font-size:0.8rem; color:var(--text-muted); cursor:pointer; transition:all 0.2s; }
    .car-code-pill:hover { border-color:rgba(255,184,0,0.4); color:var(--gold); }
    .car-code-pill.selected { background:rgba(255,184,0,0.12); border-color:var(--gold); color:var(--gold); font-weight:700; }
    .pack-summary-box { background:rgba(255,255,255,0.03); border:1px solid rgba(255,184,0,0.15); border-radius:12px; padding:18px; margin:20px 0; }
    .pack-summary-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.05); font-size:0.88rem; }
    .pack-summary-row:last-child { border-bottom:none; }
    .pack-val-pending { color:var(--text-dim); font-style:italic; }
    .pack-val-done { color:var(--gold); font-weight:700; }
    .pack-summary-total { font-family:'Bebas Neue',sans-serif; font-size:1.5rem; color:var(--gold); margin-top:4px; }
    .pack-confirm-btn { width:100%; padding:14px; background:linear-gradient(135deg,var(--gold-dark),var(--gold)); color:#1a0800; font-family:'Bebas Neue',sans-serif; font-size:1.1rem; letter-spacing:3px; border:none; border-radius:10px; cursor:pointer; transition:opacity 0.2s; }
    .pack-confirm-btn:hover { opacity:0.88; }
    .pack-close-btn { position:absolute; top:16px; right:16px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:8px; color:var(--text-muted); font-size:1rem; width:34px; height:34px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .pack-close-btn:hover { background:rgba(255,60,60,0.2); }

    /* ── GALLERY OVERLAY ── */
    .gallery-overlay { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.9); backdrop-filter:blur(10px); display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.25s; padding:20px; }
    .gallery-overlay.open { opacity:1; pointer-events:all; }
    .gallery-overlay.open > div { animation: modalIn 0.32s cubic-bezier(0.22,1,0.36,1) both; }
    .gallery-overlay.closing { opacity:0; pointer-events:none; }
    .gallery-title-bar { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:800px; margin-bottom:20px; }
    .gallery-title { font-family:'Bebas Neue',sans-serif; font-size:1.4rem; letter-spacing:3px; color:var(--gold); }
    .gallery-close-btn { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:8px; color:var(--text-muted); font-size:1rem; width:36px; height:36px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; width:100%; max-width:800px; overflow-y:auto; max-height:70vh; }
    .gallery-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:10px; overflow:hidden; cursor:pointer; transition:transform 0.2s,border-color 0.2s; }
    .gallery-card:hover { transform:translateY(-3px); border-color:rgba(255,184,0,0.4); }
    .gallery-card-img { height:130px; background:linear-gradient(135deg,#111,#222); display:flex; align-items:center; justify-content:center; font-size:2.5rem; }
    .gallery-card-info { padding:10px 12px; }
    .gallery-card-name { font-weight:700; font-size:0.85rem; color:var(--text-main); margin-bottom:2px; }
    .gallery-card-tag { font-size:0.72rem; color:var(--text-dim); }
    .gallery-card-code { font-family:'Bebas Neue',sans-serif; font-size:0.85rem; color:var(--gold); letter-spacing:2px; margin-top:4px; }
    .gallery-hint { font-size:0.78rem; color:var(--text-dim); margin-bottom:12px; }

    /* body top padding for site nav */
    body { padding-top: 54px; }
    .ticker-wrap { top: 54px; }


    /* ── PACK OFERTA SEMANAL ── */
    .starter-wrap { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start; }
    @media(max-width:860px){ .starter-wrap{ grid-template-columns:1fr; } }

    .starter-left { display:flex; flex-direction:column; gap:16px; }
    .starter-badge {
      display:inline-flex; align-items:center; gap:6px;
      padding:6px 16px; border-radius:20px;
      background:rgba(255,107,0,0.15); border:1px solid rgba(255,107,0,0.4);
      color:var(--orange); font-size:0.8rem; font-weight:700; letter-spacing:1.5px;
      width:fit-content;
    }
    .starter-title {
      font-family:'Bebas Neue',sans-serif; font-size:2rem; letter-spacing:4px;
      color:var(--gold); line-height:1.1;
    }
    .starter-subtitle { font-size:0.9rem; color:var(--text-muted); line-height:1.6; }
    .starter-includes { list-style:none; display:flex; flex-direction:column; gap:10px; }
    .starter-includes li { display:flex; align-items:center; gap:10px; font-size:0.9rem; color:rgba(240,208,128,0.85); }
    .check { color:#44FF88; font-weight:700; }
    .starter-price-row { display:flex; align-items:baseline; gap:14px; margin-top:4px; }
    .starter-price-new {
      font-family:'Bebas Neue',sans-serif; font-size:3rem; color:var(--gold);
      line-height:1;
    }
    .starter-price-old {
      font-size:1.3rem; color:var(--text-dim); text-decoration:line-through;
    }
    .starter-saving {
      font-size:0.78rem; font-weight:700; letter-spacing:1px; color:#44FF88;
      padding:3px 10px; background:rgba(0,200,80,0.1);
      border:1px solid rgba(0,200,80,0.3); border-radius:8px;
    }

    .starter-right { display:flex; flex-direction:column; gap:12px; }
    .starter-item-card {
      display:flex; align-items:center; gap:14px;
      padding:14px 18px;
      background:rgba(255,255,255,0.03);
      border:1px solid rgba(255,184,0,0.1);
      border-radius:12px;
      transition:border-color 0.2s, background 0.2s;
    }
    .starter-item-card:hover { background:rgba(255,184,0,0.04); border-color:rgba(255,184,0,0.2); }
    .starter-item-icon { font-size:1.8rem; flex-shrink:0; }
    .starter-item-info { flex:1; }
    .starter-item-name { font-size:0.9rem; font-weight:700; color:var(--text-main); letter-spacing:0.5px; }
    .starter-item-desc { font-size:0.78rem; color:var(--text-dim); margin-top:2px; }
    .starter-item-price {
      font-family:'Bebas Neue',sans-serif; font-size:1.4rem; color:var(--gold);
      flex-shrink:0;
    }

    /* ══════════════════════════════════════════════════
       MOBILE RESPONSIVE — FASE 4
    ══════════════════════════════════════════════════ */
    @media (max-width: 480px) {
      /* Base layout */
      section { padding: 40px 16px !important; }

      /* Grid 3 cols → 1 col on phone */
      .grid-3 { grid-template-columns: 1fr !important; }
      .vip-grid { grid-template-columns: 1fr !important; }
      .stats-bar { grid-template-columns: repeat(2, 1fr); }
      .mafia-perks { grid-template-columns: 1fr 1fr !important; }

      /* Cards span */
      .card[style*="grid-column: span 3"] { grid-column: 1 / -1 !important; }
      .card[style*="grid-column:span 3"] { grid-column: 1 / -1 !important; }

      /* Search bar */
      .search-wrap { margin: 0 0 24px; }
      .search-input { font-size: 0.85rem; padding: 11px 40px 11px 14px; }

      /* Nav internal */
      .nav-links { display: none; }
      nav { padding: 12px 16px; }

      /* Site nav */
      .site-nav { padding: 8px 12px; }
      .site-nav-links { gap: 2px; overflow-x: auto; }
      .site-nav-link { font-size: 0.72rem; padding: 5px 10px; white-space: nowrap; }
      .site-nav-discord span { display: none; }

      /* Cart panel */
      .cart-sidebar { width: 100vw; right: 0; border-radius: 0; }

      /* Overlays / side panels */
      .side-panel { padding: 22px 16px; border-radius: 12px; }
      .side-panel-title { font-size: 1.5rem; }
      .sov-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
      .sov-card { padding: 14px 10px; }
      .sov-card-icon { font-size: 1.8rem; }
      .armas-panel { padding: 22px 14px; }
      .armas-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
      .arma-card { padding: 12px 10px; }

      /* VIP cards */
      .vip-card { padding: 24px 18px; }
      .vip-price { font-size: 2.8rem; }
      .vip-compare-wrap { margin-top: 20px; }
      .vip-table { font-size: 0.75rem; }
      .vip-table th, .vip-table td { padding: 8px 10px; }

      /* Modals */
      .modal { padding: 22px 16px; width: calc(100vw - 32px); max-width: 100%; }
      .modal-title { font-size: 1.4rem; }

      /* Piso chips */
      .piso-chips-grid { grid-template-columns: 1fr !important; }

      /* Mafia card */
      .mafia-card { padding: 28px 18px; }
      .mafia-title { font-size: 2rem; }
      .mafia-perk { padding: 14px; }

      /* Mapeado */
      .mapa-card { padding: 24px 16px; }

      /* Starter pack */
      .starter-wrap { grid-template-columns: 1fr !important; gap: 24px; }
      .starter-price-new { font-size: 2.4rem; }

      /* FAQ */
      .faq-question { font-size: 0.87rem; padding: 14px 16px; }
      .faq-answer { font-size: 0.82rem; }

      /* Ticker */
      .ticker-wrap { display: none; }

      /* Cart float btn */
      .cart-float { width: 55px; height: 55px; bottom: 20px; right: 16px; }

      /* Section title */
      .section-title { font-size: 1.6rem; letter-spacing: 3px; }

      /* Buttons */
      .btn { padding: 10px 18px; font-size: 0.82rem; }

      /* Armas counter bar */
      .armas-counter-bar { padding: 10px 14px; gap: 10px; }
      .armas-counter-count { font-size: 1.3rem; }

      /* Gallery */
      .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }

      /* Pack modal */
      .pack-modal-panel { padding: 24px 16px; }
    }

    @media (max-width: 768px) and (min-width: 481px) {
      /* Tablet: 2-col grids */
      .grid-3 { grid-template-columns: 1fr 1fr; }
      .vip-grid { grid-template-columns: 1fr 1fr; }
      .sov-grid { grid-template-columns: 1fr 1fr 1fr; }
      .armas-grid { grid-template-columns: 1fr 1fr 1fr; }
      .cart-sidebar { width: 380px; }
      .side-panel { padding: 26px 20px; }
    }

    /* ══════════════════════════════════════════════════
       MOBILE FIXES — universal
    ══════════════════════════════════════════════════ */
    /* Evita que iOS Safari haga zoom al focar inputs (requiere >= 16px) */
    @media (max-width: 768px) {
      input, textarea, select, .dco-input, .search-input { font-size: 16px !important; }
    }
    /* Evita re-escalado raro del texto al rotar el celular */
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    /* Scroll dentro de modales no rebota la página de fondo en iOS */
    .discord-checkout-panel, .cart-sidebar, .side-panel, .modal, .pack-modal-panel { overscroll-behavior: contain; }

  
    
    /* Discord Checkout Modal — ver bloque "Tienda Checkout Modal" abajo */
    /* Tienda Checkout Modal */
    .discord-checkout-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.78);opacity:0;pointer-events:none;transition:opacity 0.25s;}
    .discord-checkout-overlay.open{opacity:1;pointer-events:all;}
    .discord-checkout-overlay.open .discord-checkout-panel{animation:modalIn 0.32s cubic-bezier(0.22,1,0.36,1) both;}
    .discord-checkout-panel{background:#0F0F14;border:1px solid rgba(255,184,0,0.2);border-radius:20px;padding:32px;width:min(500px,94vw);max-height:90vh;overflow-y:auto;}
    .dco-title{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:2px;color:var(--gold);margin-bottom:4px;}
    .dco-subtitle{font-size:0.82rem;color:#888;margin-bottom:22px;}
    .dco-items{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:14px;margin-bottom:16px;max-height:180px;overflow-y:auto;}
    .dco-item{display:flex;justify-content:space-between;font-size:0.88rem;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);}
    .dco-item:last-child{border-bottom:none;}
    .dco-item-name{color:#C8C8C8;}
    .dco-item-price{color:var(--gold);font-weight:700;}
    .dco-total{display:flex;justify-content:space-between;align-items:center;font-size:1.05rem;font-weight:700;padding:10px 0;border-top:1px solid rgba(255,184,0,0.2);margin-bottom:18px;}
    .dco-total-label{color:#aaa;}
    .dco-total-value{color:var(--gold);font-size:1.2rem;}
    .dco-label{font-size:0.78rem;font-weight:700;letter-spacing:1px;color:#777;margin-bottom:5px;text-transform:uppercase;}
    .dco-input{width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:11px 14px;color:#E8E8E8;font-family:'Rajdhani',sans-serif;font-size:0.95rem;outline:none;transition:border 0.2s;margin-bottom:14px;}
    .dco-input:focus{border-color:rgba(255,184,0,0.4);}
    .dco-input::placeholder{color:#444;}
    /* Métodos de pago */
    .dco-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
    .dco-method{padding:14px;border:2px solid rgba(255,255,255,0.08);border-radius:12px;cursor:pointer;text-align:center;transition:all 0.2s;background:rgba(255,255,255,0.03);}
    .dco-method:hover{border-color:rgba(255,184,0,0.3);}
    .dco-method.selected{border-color:var(--gold);background:rgba(255,184,0,0.08);}
    .dco-method-icon{font-size:1.4rem;display:block;margin-bottom:4px;}
    .dco-method-name{font-size:0.85rem;font-weight:700;color:#D0D0D0;}
    .dco-method-sub{font-size:0.72rem;color:#888;margin-top:2px;}
    .dco-error{background:rgba(204,17,17,0.12);border:1px solid rgba(204,17,17,0.3);border-radius:8px;padding:10px 14px;font-size:0.82rem;color:#ff7070;margin-bottom:14px;display:none;}
    .dco-btn-send{width:100%;padding:14px;background:linear-gradient(135deg,var(--gold),var(--orange));border:none;border-radius:12px;color:#000;font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:2px;cursor:pointer;transition:opacity 0.2s;}
    .dco-btn-send:hover{opacity:0.9;}
    .dco-btn-send:disabled{opacity:0.4;cursor:not-allowed;}
    /* Confirmación de pedido */
    .dco-confirm{padding:10px 0;}
    .dco-confirm-header{text-align:center;margin-bottom:24px;}
    .dco-confirm-icon{font-size:3rem;display:block;margin-bottom:10px;}
    .dco-confirm-title{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:2px;color:#00C850;}
    .dco-confirm-order{font-size:0.85rem;color:#aaa;margin-top:4px;}
    .dco-confirm-order strong{color:var(--gold);font-size:1.1rem;}
    .dco-pay-box{background:rgba(255,184,0,0.06);border:1px solid rgba(255,184,0,0.2);border-radius:14px;padding:20px;margin-bottom:14px;}
    .dco-pay-box-title{font-weight:700;color:var(--gold);margin-bottom:10px;font-size:0.9rem;letter-spacing:1px;}
    .dco-pay-detail{font-size:0.88rem;color:#C8C8C8;line-height:1.7;}
    .dco-pay-link{display:inline-block;margin-top:10px;padding:9px 20px;background:var(--gold);color:#000;font-weight:700;border-radius:8px;text-decoration:none;font-size:0.88rem;transition:opacity 0.2s;}
    .dco-pay-link:hover{opacity:0.85;}
    .dco-steps{font-size:0.82rem;color:#999;line-height:1.8;margin-bottom:20px;}
    .dco-steps strong{color:#D0D0D0;}

    /* ── Copy rows (Bizum / concepto) ── */
    .copy-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:rgba(0,0,0,0.35);border:1px solid rgba(255,184,0,0.18);border-radius:10px;margin-bottom:8px;}
    .copy-row-label{font-size:0.68rem;color:#aaa;letter-spacing:1.5px;font-weight:700;text-transform:uppercase;flex-shrink:0;width:75px;}
    .copy-row-value{flex:1;font-family:'Bebas Neue',sans-serif;font-size:1.15rem;letter-spacing:1px;color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all;}
    .copy-btn{flex-shrink:0;padding:6px 12px;background:rgba(255,184,0,0.12);border:1px solid rgba(255,184,0,0.35);border-radius:8px;color:var(--gold);font-family:'Rajdhani',sans-serif;font-size:0.75rem;font-weight:700;letter-spacing:1.5px;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:5px;}
    .copy-btn:hover{background:rgba(255,184,0,0.22);transform:translateY(-1px);}
    .copy-btn.copied{background:rgba(0,200,80,0.15);border-color:rgba(0,200,80,0.4);color:#44FF88;}

    /* ── Mini timeline de pasos ── */
    .pay-steps{display:flex;flex-direction:column;gap:10px;margin:18px 0 16px;}
    .pay-step{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.06);border-radius:10px;}
    .pay-step-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:rgba(255,184,0,0.18);border:1px solid rgba(255,184,0,0.4);color:var(--gold);font-family:'Bebas Neue',sans-serif;font-size:0.9rem;display:flex;align-items:center;justify-content:center;}
    .pay-step-text{flex:1;font-size:0.84rem;color:#bbb;line-height:1.5;padding-top:2px;}
    .pay-step-text strong{color:#fff;}
    .pay-step.done .pay-step-num{background:rgba(0,200,80,0.18);border-color:rgba(0,200,80,0.4);color:#44FF88;}

    /* ── Botón grande Discord ── */
    .discord-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px;background:linear-gradient(135deg,#5865F2,#4752c4);border:none;border-radius:12px;color:#fff;font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:3px;cursor:pointer;text-decoration:none;box-shadow:0 4px 24px rgba(88,101,242,0.35);transition:box-shadow 0.2s,transform 0.15s;margin-bottom:8px;}
    .discord-cta:hover{box-shadow:0 8px 32px rgba(88,101,242,0.5);transform:translateY(-2px);}
    .discord-cta svg{width:22px;height:22px;}

    .dco-eta{text-align:center;font-size:0.78rem;color:#888;letter-spacing:1px;margin-bottom:14px;}
    .dco-eta strong{color:#44FF88;}

    .dco-btn-cerrar{width:100%;padding:11px;background:transparent;border:1px solid rgba(255,255,255,0.1);border-radius:10px;color:#aaa;font-family:'Rajdhani',sans-serif;font-size:0.85rem;font-weight:600;letter-spacing:2px;cursor:pointer;transition:background 0.15s;}
    .dco-btn-cerrar:hover{background:rgba(255,255,255,0.04);color:#fff;}

    /* Cancelar pedido actual (botón secundario) */
    .dco-btn-cancelar-pedido{width:100%;padding:11px;background:transparent;border:1px solid rgba(204,17,17,0.35);border-radius:10px;color:#ff8080;font-family:'Rajdhani',sans-serif;font-size:0.84rem;font-weight:700;letter-spacing:2px;cursor:pointer;transition:background 0.15s;margin-bottom:8px;}
    .dco-btn-cancelar-pedido:hover{background:rgba(204,17,17,0.12);color:#ff6060;}
    .dco-btn-cancelar-pedido:disabled{opacity:0.5;cursor:wait;}

  
    /* ============================
       BIZUM INFO BOX (overlays & info modal)
       ============================ */
    .bizum-overlay-box {
      background: linear-gradient(135deg,rgba(255,184,0,0.07),rgba(255,184,0,0.03));
      border: 1px solid rgba(255,184,0,0.22);
      border-radius: 12px;
      padding: 14px 18px;
      text-align: center;
    }
    .bizum-overlay-title {
      font-size: 0.75rem;
      color: var(--text-muted);
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 5px;
    }
    .bizum-overlay-num {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2rem;
      color: var(--gold);
      letter-spacing: 4px;
      margin-bottom: 5px;
    }
    .bizum-overlay-sub {
      font-size: 0.76rem;
      color: var(--text-dim);
      line-height: 1.5;
      margin: 0;
    }

    /* ============================
       INFO PRODUCT MODAL
       ============================ */
    .modal-info-product {
      max-width: 480px;
    }
    .info-perks {
      list-style: none;
      padding: 0;
      margin: 10px 0;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .info-perks li {
      font-size: 0.87rem;
      color: rgba(240,208,128,0.82);
      padding-left: 18px;
      position: relative;
      line-height: 1.4;
    }
    .info-perks li::before {
      content: '✓';
      position: absolute;
      left: 0;
      color: var(--gold);
      font-weight: 700;
    }


/* Page enter fade */
body{animation:pageEnter 0.45s ease both;}
@keyframes pageEnter{from{opacity:0;}to{opacity:1;}}
@media(prefers-reduced-motion:reduce){body{animation:none;}}


/* Nav de categorías de la tienda (sin logo; el site-nav ya navega entre páginas) */
nav.shop-cats { justify-content: center; gap: 18px; flex-wrap: wrap; }
nav.shop-cats .nav-links { justify-content: center; flex-wrap: wrap; }
.shop-cats-label {
  font-family: 'Bebas Neue', sans-serif; letter-spacing: 3px;
  color: var(--gold-dark, #CC8800); font-size: 0.85rem; align-self: center;
}
@media (max-width: 600px) { .shop-cats-label { display: none; } }

/* === VITRINA CONCESIONARIO VIP (cinta continua de coches) === */
.vip-showcase { margin: 4px 0 50px; }
.vip-showcase-head { text-align: center; margin-bottom: 20px; }
.vip-showcase-title {
  font-family: 'Bebas Neue', sans-serif; letter-spacing: 3px;
  font-size: 1.7rem; color: var(--gold);
  text-shadow: 0 0 18px rgba(255, 184, 0, 0.25);
}
.vip-showcase-sub { font-size: 0.86rem; color: var(--text-muted); margin-top: 4px; }

.vip-marquee {
  position: relative; overflow: hidden; padding: 32px 0;
  /* fundido en los bordes: los coches aparecen y desaparecen */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.vip-track {
  display: flex; width: max-content; will-change: transform;
  /* velocidad de la cinta: subí los segundos para que vaya más lento */
  animation: vipScroll 45s linear infinite;
}
.vip-marquee:hover .vip-track { animation-play-state: paused; }
@keyframes vipScroll {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.vip-car {
  position: relative; flex: 0 0 auto;
  width: 320px; margin: 0 20px 0 0; /* margen derecho uniforme = loop sin saltos */
  border-radius: 14px; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
  transform-origin: center center;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease, border-color .4s ease;
}
.vip-car-photo { position: relative; height: 200px; overflow: hidden; }
.vip-car-photo img {
  position: absolute; top: -3%; left: -3%;
  width: 106%; height: 106%;
  object-fit: cover; background: #0a0a0a;
  transform-origin: center center;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
/* hover: la CARD crece + brilla; la IMAGEN se contra-escala para NO crecer (evita el blur) */
.vip-car:hover {
  transform: scale(1.06);
  border-color: var(--gold);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 184, 0, 0.55), 0 0 30px rgba(255, 184, 0, 0.34);
  z-index: 3;
}
.vip-car:hover .vip-car-photo img { transform: scale(0.9434); } /* 1 / 1.06 → la imagen mantiene su tamaño real */
.vip-car-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.82); border-top: 1px solid rgba(255, 184, 0, 0.28);
  padding: 9px 14px; display: flex; flex-direction: column; gap: 2px;
}
.vip-car-user {
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.6px; color: var(--gold-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vip-car-model {
  font-size: 0.74rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .vip-car { width: 260px; margin-right: 16px; }
  .vip-car-photo { height: 165px; }
  .vip-showcase-title { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vip-track { animation: none; transform: translate3d(0, 0, 0); }
}