* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --bg: #0a0f1a;
    --bg2: #101828;
    --bg3: #1a2540;
    --bg4: #1e3a5f;
    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --primary-dark: #2563eb;
    --accent: #06b6d4;
    --accent2: #8b5cf6;
    --red: #ef4444;
    --blue: #3b82f6;
    --purple: #8b5cf6;
    --text: #e8edf5;
    --text2: #94a3b8;
    --text3: #64748b;
    --border: #1e293b;
    --border2: #334155;
    --shadow: 0 4px 20px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.6);
    --glow: 0 0 20px rgba(59,130,246,0.3);
    --radius: 12px;
    --radius-lg: 20px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }

.bg-image { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 0; opacity: 0.06; filter: blur(1px); pointer-events: none; }

.bg-particles { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.bg-particles .particle { position: absolute; border-radius: 50%; opacity: 0; animation: floatParticle linear infinite; }
@keyframes floatParticle {
    0% { opacity: 0; transform: translateY(100vh) scale(0); }
    10% { opacity: 0.5; }
    90% { opacity: 0.5; }
    100% { opacity: 0; transform: translateY(-10vh) scale(1); }
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--primary-dark); border-radius: 3px; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.accent { color: var(--primary); }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--transition); font-family: inherit; text-decoration: none; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #000; }
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-light), var(--primary)); box-shadow: var(--glow); transform: translateY(-2px); }
.btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #000; }
.btn-full { width: 100%; justify-content: center; padding: 14px; }

/* === NAVBAR === */
.navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(10,10,18,0.95); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); transition: var(--transition); }
.navbar.scrolled { box-shadow: var(--shadow-lg); }
.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; height: 64px; gap: 16px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; }
.logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #000; font-size: 16px; }
.logo-text { font-family: 'Cinzel Decorative', serif; font-size: 20px; font-weight: 900; color: var(--text); letter-spacing: -0.5px; }
.nav-links { display: flex; gap: 4px; flex: 1; justify-content: center; }
.nav-links a { color: var(--text2); text-decoration: none; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; transition: var(--transition); }
.nav-links a:hover { color: var(--primary); background: rgba(59,130,246,0.1); }
.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.btn-cart { position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: none; color: var(--text2); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.btn-cart:hover { border-color: var(--primary); color: var(--primary); }
.cart-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform 0.3s cubic-bezier(0.68,-0.55,0.27,1.55); }
.cart-count.show { transform: scale(1); }
.btn-login { background: none; border: 1px solid var(--border); color: var(--text2); padding: 8px 16px; border-radius: 8px; font-size: 13px; cursor: pointer; transition: var(--transition); font-family: inherit; display: flex; align-items: center; gap: 8px; }
.btn-login:hover { border-color: var(--primary); color: var(--primary); }
.btn-register { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #000; border: none; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition); font-family: inherit; }
.btn-register:hover { box-shadow: var(--glow); }
.mobile-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; background: none; color: var(--text); cursor: pointer; font-size: 16px; }

/* === HERO === */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #0a0f1a 0%, #0d1b33 50%, #0a0f1a 100%); }
.hero-bg::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 50%, rgba(59,130,246,0.08), transparent 50%), radial-gradient(circle at 70% 50%, rgba(6,182,212,0.06), transparent 50%); animation: heroGlow 8s ease-in-out infinite alternate; }
.hero-bg::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 200px; background: linear-gradient(to top, var(--bg), transparent); }
@keyframes heroGlow { from { transform: rotate(0deg); } to { transform: rotate(10deg); } }
.hero-particles { position: absolute; inset: 0; overflow: hidden; }
.particle { position: absolute; width: 3px; height: 3px; background: var(--primary-light); border-radius: 50%; opacity: 0; animation: particleFloat 6s linear infinite; }
@keyframes particleFloat { 0% { opacity: 0; transform: translateY(100vh) scale(0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(-100px) scale(1); } }
.hero-content { position: relative; z-index: 2; padding: 20px; }
.hero-content h1 { font-family: 'Cinzel Decorative', serif; font-size: clamp(40px, 7vw, 80px); font-weight: 900; line-height: 1.1; margin-bottom: 16px; letter-spacing: -1px; }
.hero-content p { font-size: 17px; color: var(--text2); margin-bottom: 32px; max-width: 500px; margin-left: auto; margin-right: auto; }
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }
.hero-stats { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; }
.hero-stats .stat { text-align: center; }
.hero-stats .stat strong { display: block; font-size: 28px; font-weight: 800; color: var(--primary); font-family: 'Cinzel', serif; }
.hero-stats .stat span { font-size: 12px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; }

/* === SECTIONS === */
.section-header { text-align: center; margin-bottom: 40px; }
.section-header h2 { font-family: 'Cinzel', serif; font-size: 32px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 8px; }
.section-header p { color: var(--text3); font-size: 15px; }

/* === SEARCH === */
.search-bar { margin-bottom: 20px; }
.search-input-wrap { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 0 16px; transition: var(--transition); }
.search-input-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.search-input-wrap i { color: var(--text3); font-size: 16px; }
.search-input-wrap input { flex: 1; background: none; border: none; outline: none; padding: 14px 0; font-size: 15px; font-family: inherit; color: var(--text); }
.search-input-wrap input::placeholder { color: var(--text3); }

/* === FILTERS === */
.filters-row { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; align-items: flex-end; }
.filter-group { display: flex; flex-direction: column; gap: 6px; }
.filter-group label { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; }
.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-pill { padding: 6px 14px; border-radius: 50px; background: var(--bg2); border: 1px solid var(--border); color: var(--text2); font-size: 12px; font-weight: 500; cursor: pointer; transition: var(--transition); font-family: inherit; display: flex; align-items: center; gap: 5px; }
.filter-pill:hover { border-color: var(--primary); color: var(--primary); }
.filter-pill.active { background: var(--primary); color: #000; border-color: var(--primary); }
.filter-numbers { min-width: 180px; }
.number-inputs { display: flex; align-items: center; gap: 6px; }
.number-inputs input { width: 70px; padding: 8px 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--text); outline: none; transition: var(--transition); text-align: center; }
.number-inputs input:focus { border-color: var(--primary); }
.number-inputs span { color: var(--text3); font-size: 13px; }
.filters-row select { padding: 8px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--text); cursor: pointer; outline: none; transition: var(--transition); }
.filters-row select:focus { border-color: var(--primary); }
.btn-clear-filters { padding: 8px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; color: var(--text3); font-size: 12px; cursor: pointer; transition: var(--transition); font-family: inherit; display: flex; align-items: center; gap: 5px; }
.btn-clear-filters:hover { border-color: var(--red); color: var(--red); }
.items-count { font-size: 13px; color: var(--text3); margin-bottom: 16px; }

/* === ITEMS === */
.items-section { padding: 60px 0 80px; }
.items-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.empty-state { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--text3); }
.empty-state .empty-icon { font-size: 56px; margin-bottom: 16px; opacity: 0.25; animation: emptyFloat 3s ease-in-out infinite; }
.empty-state h3 { font-family: 'Cinzel', serif; font-size: 20px; color: var(--text2); margin-bottom: 8px; }
.empty-state p { font-size: 14px; opacity: 0.6; }
@keyframes emptyFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.item-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: var(--transition); position: relative; }
.item-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: var(--primary); }
.item-img { width: 100%; height: 180px; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 48px; color: var(--primary); position: relative; overflow: hidden; }
.item-img img { width: 100%; height: 100%; object-fit: cover; }
.item-rarity { position: absolute; top: 8px; left: 8px; padding: 3px 10px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.rarity-common { background: #606070; color: #fff; }
.rarity-uncommon { background: #2ecc71; color: #fff; }
.rarity-rare { background: #3498db; color: #fff; }
.rarity-epic { background: #9b59b6; color: #fff; }
.rarity-legendary { background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: #fff; }
.item-seller { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.7); color: var(--text2); padding: 3px 8px; border-radius: 4px; font-size: 10px; display: flex; align-items: center; gap: 4px; }
.item-body { padding: 14px; }
.item-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.item-classes { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.item-cls-badge { padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; color: #fff; display: inline-block; }
.item-stats { font-size: 11px; color: var(--text3); margin-bottom: 6px; }
.item-desc { font-size: 12px; color: var(--text2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; line-height: 1.5; }
.item-footer { display: flex; align-items: center; justify-content: space-between; }
.item-price { font-size: 18px; font-weight: 800; color: var(--primary); font-family: 'Cinzel', serif; }
.item-buy { padding: 6px 14px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #000; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; transition: var(--transition); font-family: inherit; }
.item-buy:hover { box-shadow: var(--glow); transform: scale(1.05); }

/* === ACCOUNTS === */
.accounts-section { padding: 60px 0 80px; background: var(--bg2); }
.accounts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.account-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); cursor: pointer; position: relative; }
.account-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent2)); z-index: 2; }
.account-card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-3px); }
.account-img-wrap { position: relative; width: 100%; background: var(--bg3); }
.account-img { width: 100%; display: block; }
.account-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent2)); display: flex; align-items: center; justify-content: center; font-size: 20px; color: #000; flex-shrink: 0; margin: 76px auto 0; }
.account-body { padding: 16px 20px 20px; }
.account-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.account-info h3 { font-size: 16px; font-weight: 700; }
.account-info span { font-size: 12px; color: var(--text3); }
.account-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.account-stat { background: var(--bg3); padding: 8px; border-radius: 8px; text-align: center; }
.account-stat strong { display: block; font-size: 14px; color: var(--primary); }
.account-stat span { font-size: 10px; color: var(--text3); }
.account-desc { font-size: 13px; color: var(--text2); margin-bottom: 14px; }
.account-footer { display: flex; flex-direction: column; gap: 10px; }
.account-price-area { display: flex; flex-direction: column; gap: 6px; }
.account-price { font-size: 22px; font-weight: 800; color: var(--primary); font-family: 'Cinzel', serif; }
.account-gold-price { font-size: 13px; color: var(--text3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gold-pixel { font-weight: 700; color: #fbbf24; font-family: 'Press Start 2P', monospace; font-size: 11px; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; letter-spacing: 0.5px; }
.gold-r$ { color: var(--text3); font-size: 12px; }
.account-buy { width: 100%; padding: 10px; background: linear-gradient(135deg, var(--accent2), #5a1fd4); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition); font-family: inherit; text-align: center; }
.account-buy:hover { box-shadow: 0 0 20px rgba(123,47,247,0.4); }

/* === GOLD === */
.gold-section { padding: 60px 0 80px; background: var(--bg); }
.gold-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.gold-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); cursor: pointer; position: relative; }
.gold-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary), #f39c12); z-index: 2; }
.gold-card:hover { border-color: var(--primary); box-shadow: 0 8px 32px rgba(59,130,246,0.15); transform: translateY(-4px); }
.gold-img-wrap { width: 100%; height: 220px; overflow: hidden; background: var(--bg3); display: flex; align-items: center; justify-content: center; }
.gold-img { width: 100%; height: 100%; object-fit: cover; }
.gold-icon { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(59,130,246,0.05)); display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--primary); }
.gold-body { padding: 16px 20px 20px; }
.gold-amount { font-size: 20px; font-weight: 800; color: var(--primary); font-family: 'Cinzel', serif; margin-bottom: 6px; }
.pixel-text { font-family: 'Press Start 2P', monospace; font-size: 16px; color: #fbbf24; text-shadow: 3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 3px 0 #000, 3px 0 0 #000, 0 -2px 0 #000, -2px 0 0 #000; letter-spacing: 1px; }
.pixel-price { font-family: 'Press Start 2P', monospace; font-size: 14px; color: var(--primary); text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.gold-bonus { font-size: 13px; color: var(--accent); margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.gold-desc { font-size: 13px; color: var(--text2); margin-bottom: 16px; line-height: 1.6; }
.gold-footer { display: flex; align-items: center; justify-content: space-between; }
.gold-price { font-size: 22px; font-weight: 800; color: var(--primary); font-family: 'Cinzel', serif; }
.gold-buy { padding: 8px 20px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #000; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition); font-family: inherit; }
.gold-buy:hover { box-shadow: var(--glow); transform: scale(1.05); }

/* === DIAMANTE === */
.diamante-section { padding: 60px 0 80px; background: var(--bg2); }
.diamante-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.diamond-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; transition: var(--transition); cursor: pointer; position: relative; overflow: hidden; text-align: center; }
.diamond-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--accent2), #9b59b6); }
.diamond-card:hover { border-color: var(--accent2); box-shadow: 0 8px 32px rgba(123,47,247,0.15); transform: translateY(-4px); }
.diamond-icon { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, rgba(123,47,247,0.2), rgba(123,47,247,0.05)); display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--accent2); margin: 0 auto 12px; }
.diamond-body { padding: 0; }
.diamond-amount { font-size: 20px; font-weight: 800; color: var(--accent2); font-family: 'Cinzel', serif; margin-bottom: 6px; }
.diamond-bonus { font-size: 13px; color: var(--accent); margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.diamond-desc { font-size: 13px; color: var(--text2); margin-bottom: 16px; line-height: 1.6; }
.diamond-footer { display: flex; align-items: center; justify-content: space-between; }
.diamond-price { font-size: 22px; font-weight: 800; color: var(--accent2); font-family: 'Cinzel', serif; }
.diamond-buy { padding: 8px 20px; background: linear-gradient(135deg, var(--accent2), #5a1fd4); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition); font-family: inherit; }
.diamond-buy:hover { box-shadow: 0 0 20px rgba(123,47,247,0.4); transform: scale(1.05); }

/* === TREINO === */
.treino-section { padding: 60px 0; }
.treino-badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.treino-badge { display: flex; align-items: center; gap: 8px; padding: 8px 18px; background: var(--bg2); border: 1px solid var(--border); border-radius: 50px; font-size: 13px; color: var(--text2); font-weight: 500; }
.treino-badge i { color: var(--primary); font-size: 14px; }
.treino-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 32px; }
.treino-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; transition: var(--transition); position: relative; overflow: hidden; }
.treino-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.treino-card:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: 0 8px 30px rgba(59,130,246,0.15); }
.treino-card-tag { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.treino-card-tag.avulso { background: rgba(6,182,212,0.15); color: var(--accent); }
.treino-card-tag.semanal { background: rgba(59,130,246,0.15); color: var(--primary); }
.treino-card-tag.mensal { background: rgba(139,92,246,0.15); color: var(--accent2); }
.treino-card-name { font-family: 'Cinzel', serif; font-size: 20px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.treino-card-desc { font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 16px; }
.treino-card-info { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.treino-card-info span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text3); }
.treino-card-info i { color: var(--primary); width: 16px; text-align: center; }
.treino-card-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.treino-card-price .price { font-size: 28px; font-weight: 800; color: var(--primary); font-family: 'Cinzel', serif; }
.treino-card-price .period { font-size: 13px; color: var(--text3); }
.treino-card-buy { width: 100%; padding: 12px; border: none; border-radius: 10px; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: var(--transition); font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; }
.treino-card-buy:hover { background: linear-gradient(135deg, #128c7e, #075e54); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(37,211,102,0.4); }

/* Requisitos */
.treino-requisitos { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 28px; margin-bottom: 32px; }
.treino-requisitos h3 { font-family: 'Cinzel', serif; font-size: 18px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.treino-requisitos h3 i { color: var(--primary); }
.requisitos-list { display: flex; gap: 24px; flex-wrap: wrap; }
.requisito-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text2); }
.requisito-item i { color: #22c55e; }

/* Telas */
.telas-section { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 28px; }
.telas-section h3 { font-family: 'Cinzel', serif; font-size: 18px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.telas-section h3 i { color: var(--primary); }
.telas-status { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; background: var(--bg3); border-radius: 10px; }
.telas-status .telas-count { font-size: 22px; font-weight: 800; color: var(--primary); font-family: 'Cinzel', serif; }
.telas-status .telas-label { font-size: 14px; color: var(--text2); }
.telas-status .telas-count.empty { color: var(--red); }
.telas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.tela-item { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; font-weight: 600; transition: var(--transition); }
.tela-item.disponivel { border-color: #22c55e; color: #22c55e; }
.tela-item.indisponivel { border-color: var(--red); color: var(--red); opacity: 0.6; }
.tela-item i { font-size: 10px; }

/* === FEEDBACK (removed) === */

/* === FORMS === */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text2); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; color: var(--text); outline: none; transition: var(--transition); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.form-group textarea { resize: vertical; }
.form-group small { display: block; font-size: 11px; color: var(--text3); margin-top: 4px; }

/* === CART === */
.cart-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; }
.cart-overlay.active { display: block; }
.cart-sidebar { position: fixed; top: 0; right: -380px; width: 360px; height: 100vh; background: var(--bg2); border-left: 1px solid var(--border); z-index: 2001; transition: right 0.3s ease; display: flex; flex-direction: column; }
.cart-sidebar.active { right: 0; }
.cart-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.cart-header h3 { font-family: 'Cinzel', serif; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.cart-header button { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 18px; }
.cart-list { flex: 1; overflow-y: auto; padding: 12px; }
.cart-empty { text-align: center; padding: 40px 20px; color: var(--text3); }
.cart-empty i { font-size: 40px; margin-bottom: 12px; display: block; opacity: 0.5; }
.cart-item { display: flex; gap: 12px; padding: 12px; background: var(--bg); border-radius: 8px; margin-bottom: 8px; border: 1px solid var(--border); }
.cart-item-img { width: 50px; height: 50px; border-radius: 6px; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--primary); flex-shrink: 0; overflow: hidden; }
.cart-item-info { flex: 1; }
.cart-item-info strong { font-size: 13px; display: block; }
.cart-item-info span { font-size: 12px; color: var(--primary); font-weight: 700; }
.cart-item-remove { background: none; border: none; color: var(--red); cursor: pointer; font-size: 14px; padding: 4px; }
.cart-footer { padding: 16px 20px; border-top: 1px solid var(--border); }
.cart-total { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cart-total span { font-size: 14px; color: var(--text2); }
.cart-total strong { font-size: 22px; color: var(--primary); font-family: 'Cinzel', serif; }

/* === MODALS === */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 3000; backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.active { display: flex; }
.modal { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-height: 90vh; overflow-y: auto; position: relative; animation: modalIn 0.3s ease; }
.item-detail-modal { max-width: 700px; }
.auth-modal { max-width: 440px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--bg3); border: none; cursor: pointer; font-size: 14px; color: var(--text3); display: flex; align-items: center; justify-content: center; z-index: 10; transition: var(--transition); }
.modal-close:hover { background: var(--red); color: #fff; }
.modal-body { padding: 28px; }
.auth-header { text-align: center; margin-bottom: 24px; }
.auth-header i { font-size: 40px; color: var(--primary); margin-bottom: 10px; display: block; }
.auth-header h2 { font-family: 'Cinzel', serif; font-size: 22px; margin-bottom: 4px; }
.auth-header p { font-size: 13px; color: var(--text3); }
.auth-switch { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text3); }
.auth-switch a { color: var(--primary); text-decoration: none; font-weight: 600; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--text3); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.btn-google { width: 100%; padding: 12px; background: #fff; color: #333; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--transition); font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-google:hover { background: #f0f0f0; transform: translateY(-1px); }
.btn-google i { color: #4285f4; }
.auth-info { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.3); border-radius: 8px; padding: 14px; margin-bottom: 16px; text-align: center; }
.auth-info i { font-size: 24px; color: var(--primary); margin-bottom: 8px; display: block; }
.auth-info p { font-size: 13px; color: var(--text2); }
.auth-info strong { color: var(--primary); }
.auth-success { text-align: center; padding: 20px 0; }
.auth-success i { font-size: 56px; color: var(--accent); margin-bottom: 12px; display: block; }
.auth-success h3 { font-family: 'Cinzel', serif; font-size: 20px; margin-bottom: 4px; }
.auth-success p { font-size: 13px; color: var(--text3); }
.btn-resend { width: 100%; padding: 10px; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text3); font-size: 13px; cursor: pointer; margin-top: 10px; transition: var(--transition); font-family: inherit; }
.btn-resend:hover { border-color: var(--primary); color: var(--primary); }

/* === PROFILE === */
.profile-modal { max-width: 520px; }
.profile-header { text-align: center; margin-bottom: 24px; }
.profile-pic { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); margin-bottom: 12px; }
.profile-header h2 { font-family: 'Cinzel', serif; font-size: 22px; margin-bottom: 2px; }
.profile-header p { font-size: 13px; color: var(--text3); }
.profile-badge { display: inline-block; margin-top: 8px; padding: 4px 12px; background: rgba(0,212,170,0.15); color: var(--accent); border-radius: 50px; font-size: 11px; font-weight: 600; }
.profile-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; }
.profile-stat-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 14px 8px; text-align: center; transition: var(--transition); }
.profile-stat-card:hover { border-color: var(--primary); background: rgba(59,130,246,0.08); }
.profile-stat-card i { font-size: 18px; color: var(--primary); margin-bottom: 6px; display: block; }
.profile-stat-card strong { display: block; font-size: 16px; font-weight: 800; color: var(--text); }
.profile-stat-card span { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; }
.profile-history { margin-bottom: 20px; }
.profile-history h3 { font-family: 'Cinzel', serif; font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; color: var(--text2); }
.profile-purchase-list { max-height: 200px; overflow-y: auto; }
.profile-purchase-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg3); border-radius: 8px; margin-bottom: 6px; }
.profile-purchase-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(59,130,246,0.15); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 14px; flex-shrink: 0; }
.profile-purchase-info { flex: 1; }
.profile-purchase-info strong { font-size: 13px; display: block; }
.profile-purchase-info span { font-size: 11px; color: var(--text3); }
.profile-purchase-price { font-size: 14px; font-weight: 700; color: var(--primary); font-family: 'Cinzel', serif; }
.profile-empty { text-align: center; padding: 24px; color: var(--text3); }
.profile-empty i { font-size: 32px; margin-bottom: 8px; display: block; opacity: 0.4; }
.btn-logout { background: rgba(231,76,60,0.15); border: 1px solid rgba(231,76,60,0.3); color: var(--red); margin-top: 8px; }
.btn-logout:hover { background: var(--red); color: #fff; }

/* === FOOTER === */
.footer { background: var(--bg2); border-top: 1px solid var(--border); padding: 48px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.footer-col p { color: var(--text3); font-size: 14px; margin: 12px 0; max-width: 280px; }
.footer-col h4 { font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700; margin-bottom: 12px; color: var(--primary); }
.footer-col a { display: block; color: var(--text3); text-decoration: none; font-size: 13px; padding: 3px 0; transition: var(--transition); }
.footer-col a:hover { color: var(--primary); }
.social-links { display: flex; gap: 8px; margin-top: 12px; }
.social-links a { width: 36px; height: 36px; border-radius: 8px; background: var(--bg3); display: flex !important; align-items: center; justify-content: center !important; color: var(--text3) !important; transition: var(--transition); font-size: 15px; }
.social-links a:hover { background: var(--primary); color: #000 !important; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text3); }

/* === TOAST === */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 5000; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 8px; padding: 12px 18px; min-width: 260px; box-shadow: var(--shadow-lg); animation: toastIn 0.3s ease, toastOut 0.3s ease 2.5s forwards; }
.toast i { font-size: 16px; color: var(--accent); }
.toast.error { border-left-color: var(--red); }
.toast.error i { color: var(--red); }
.toast span { font-size: 13px; font-weight: 500; }
@keyframes toastIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { to { transform: translateX(100px); opacity: 0; } }

/* === REVEAL === */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].revealed { opacity: 1; transform: translateY(0); }

/* === MICRO-INTERACTIONS === */
.btn { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.btn:active { transform: scale(0.96); }

.item-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.item-card:hover { box-shadow: 0 8px 32px rgba(59,130,246,0.15); transform: translateY(-6px) scale(1.01); }
.item-card:active { transform: translateY(-2px) scale(0.99); }

.item-buy { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.item-buy:hover { box-shadow: 0 4px 16px rgba(59,130,246,0.4); transform: scale(1.08); }
.item-buy:active { transform: scale(0.95); }

.account-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.account-card:hover { box-shadow: 0 8px 32px rgba(123,47,247,0.15); transform: translateY(-4px); }
.account-card:active { transform: translateY(-1px); }

.account-buy { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.account-buy:hover { box-shadow: 0 4px 16px rgba(123,47,247,0.4); transform: scale(1.05); }
.account-buy:active { transform: scale(0.95); }

.gold-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.gold-card:hover { box-shadow: 0 8px 32px rgba(59,130,246,0.15); transform: translateY(-6px) scale(1.01); }
.gold-card:active { transform: translateY(-2px) scale(0.99); }

.gold-buy { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.gold-buy:hover { box-shadow: 0 4px 16px rgba(59,130,246,0.4); transform: scale(1.08); }
.gold-buy:active { transform: scale(0.95); }

.diamond-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.diamond-card:hover { box-shadow: 0 8px 32px rgba(123,47,247,0.15); transform: translateY(-6px) scale(1.01); }
.diamond-card:active { transform: translateY(-2px) scale(0.99); }

.diamond-buy { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.diamond-buy:hover { box-shadow: 0 4px 16px rgba(123,47,247,0.4); transform: scale(1.08); }
.diamond-buy:active { transform: scale(0.95); }

.feedback-card { transition: all 0.3s ease; }
.feedback-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }

.filter-pill { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.filter-pill:active { transform: scale(0.93); }
.filter-pill.active { animation: pillPop 0.3s cubic-bezier(0.68,-0.55,0.27,1.55); }
@keyframes pillPop { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }

.btn-cart { transition: all 0.25s ease; }
.btn-cart:active { transform: scale(0.9); }
.cart-count.show { animation: countBounce 0.4s cubic-bezier(0.68,-0.55,0.27,1.55); }
@keyframes countBounce { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

.logo { transition: transform 0.3s ease; }
.logo:hover { transform: scale(1.03); }

.nav-links a { transition: all 0.2s ease; }
.nav-links a:active { transform: scale(0.95); }

.modal { animation: modalIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

.modal-close { transition: all 0.2s ease; }
.modal-close:hover { transform: rotate(90deg) scale(1.1); }
.modal-close:active { transform: rotate(90deg) scale(0.9); }

.hero-content h1 { animation: titleGlow 3s ease-in-out infinite alternate; }
@keyframes titleGlow { from { text-shadow: 0 0 20px rgba(59,130,246,0.2); } to { text-shadow: 0 0 40px rgba(59,130,246,0.4); } }

.search-input-wrap { transition: all 0.3s ease; }

.social-links a { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.social-links a:hover { transform: translateY(-3px) scale(1.1); }
.social-links a:active { transform: scale(0.9); }

.btn-login, .btn-register { transition: all 0.25s ease; }
.btn-login:active, .btn-register:active { transform: scale(0.95); }

/* === PAGE TRANSITION === */
body { animation: pageIn 0.4s ease; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* === LOADING SKELETON === */
.skeleton { background: linear-gradient(90deg, var(--bg3) 25%, var(--border) 50%, var(--bg3) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* === FOCUS RING === */
input:focus, select:focus, textarea:focus { animation: focusPulse 0.3s ease; }
@keyframes focusPulse { 0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.4); } 100% { box-shadow: 0 0 0 3px rgba(59,130,246,0.15); } }

/* === COUPON BAR === */
.coupon-bar{background:linear-gradient(135deg,var(--bg3),var(--bg4));border:1px solid var(--border);border-radius:var(--radius);padding:14px 24px;margin-bottom:40px}
.coupon-bar-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.coupon-bar-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;color:#000;font-size:18px;flex-shrink:0}
.coupon-bar-text{flex:1;min-width:0}
.coupon-bar-title{font-size:14px;font-weight:700;color:var(--primary);margin-bottom:6px;display:block}
.coupon-codes{display:flex;gap:8px;flex-wrap:wrap}
.coupon-code{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg);border:1px dashed var(--primary);border-radius:8px;font-size:12px;font-weight:600;color:var(--primary);cursor:pointer;transition:var(--transition);font-family:'Courier New',monospace}
.coupon-code:hover{background:var(--primary);color:#000;border-style:solid}
.coupon-code small{font-size:10px;font-weight:400;color:var(--text2);font-family:'Inter',sans-serif}
.coupon-code:hover small{color:#000}

/* === PROMO BANNER === */
.promo-banner{padding:60px 0;background:linear-gradient(180deg,var(--bg),var(--bg2),var(--bg))}
.promo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.promo-card{position:relative;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 20px 20px;text-align:center;cursor:pointer;transition:var(--transition);overflow:hidden}
.promo-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--accent2));opacity:0;transition:var(--transition)}
.promo-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:var(--glow)}
.promo-card:hover::before{opacity:1}
.promo-badge{position:absolute;top:12px;right:12px;padding:4px 10px;border-radius:20px;font-size:10px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.5px}
.promo-icon{font-size:36px;color:var(--primary);margin-bottom:12px}
.promo-discount{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700}
.promo-name{font-family:'Cinzel',serif;font-size:16px;font-weight:700;margin-bottom:8px;color:var(--text)}
.promo-desc{font-size:13px;color:var(--text2);margin-bottom:16px;line-height:1.5}
.promo-prices{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px}
.promo-old{font-size:14px;color:var(--text3);text-decoration:line-through}
.promo-new{font-size:22px;font-weight:800;color:var(--accent);font-family:'Cinzel',serif}
.promo-buy{width:100%;padding:12px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#000;font-size:14px;font-weight:700;cursor:pointer;transition:var(--transition);font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px}
.promo-buy:hover{box-shadow:var(--glow);transform:translateY(-2px)}

/* === FAVORITE BUTTON === */
.item-fav{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:none;background:rgba(10,10,18,0.7);backdrop-filter:blur(8px);color:var(--text3);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);z-index:2}
.item-fav:hover{background:rgba(231,76,60,0.2);color:var(--red);transform:scale(1.1)}
.item-fav.active{background:var(--red);color:#fff}
.item-fav.active:hover{background:#c0392b}

/* === RATINGS === */
.item-rating{display:flex;align-items:center;gap:2px;margin-bottom:6px}
.item-rating i{font-size:12px;color:var(--text3);transition:var(--transition)}
.item-rating i:hover{transform:scale(1.2)}

/* === WHATSAPP BUTTONS === */
.btn-whatsapp{background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.btn-whatsapp:hover{background:linear-gradient(135deg,#128c7e,#075e54);transform:translateY(-2px);box-shadow:0 4px 20px rgba(37,211,102,0.4)}
.item-buy,.account-buy,.gold-buy,.diamond-buy{background:linear-gradient(135deg,#25d366,#128c7e) !important;color:#fff !important;border:none !important}
.item-buy:hover,.account-buy:hover,.gold-buy:hover,.diamond-buy:hover{background:linear-gradient(135deg,#128c7e,#075e54) !important;box-shadow:0 4px 15px rgba(37,211,102,0.4) !important}
.promo-buy{background:linear-gradient(135deg,#25d366,#128c7e) !important;color:#fff !important}
.promo-buy:hover{background:linear-gradient(135deg,#128c7e,#075e54) !important;box-shadow:0 4px 15px rgba(37,211,102,0.4) !important}

/* === SOLD STATUS === */
.item-sold{opacity:0.65;pointer-events:none;position:relative}
.item-sold .item-img{position:relative}
.sold-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.55);display:flex;align-items:center;justify-content:center;z-index:5;border-radius:var(--radius) var(--radius) 0 0}
.sold-badge{background:var(--red);color:#fff;padding:8px 20px;border-radius:8px;font-size:14px;font-weight:800;letter-spacing:2px;text-transform:uppercase;display:flex;align-items:center;gap:8px;box-shadow:0 4px 20px rgba(231,76,60,0.5)}
.sold-text{color:var(--red) !important;font-weight:700;font-size:14px !important;display:flex;align-items:center;gap:6px}
.sold-badge-account{background:var(--red);color:#fff;padding:4px 12px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-left:auto}

/* === WHATSAPP FLOAT === */
.whatsapp-float { position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px; background: #25d366; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 4px 20px rgba(37,211,102,0.4); z-index: 999; transition: var(--transition); text-decoration: none; animation: wpPulse 2s ease-in-out infinite; }
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(37,211,102,0.6); color: #fff; }
@keyframes wpPulse { 0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); } 50% { box-shadow: 0 4px 30px rgba(37,211,102,0.7), 0 0 0 8px rgba(37,211,102,0.15); } }

/* === CREATOR CREDIT === */
.creator-credit { text-align: center; padding: 24px 0 8px; margin-top: 8px; }
.creator-line { width: 60px; height: 2px; background: linear-gradient(90deg, transparent, var(--primary), transparent); margin: 0 auto 16px; border-radius: 2px; }
.creator-info { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.creator-name { font-size: 13px; color: var(--text3); letter-spacing: 0.5px; }
.creator-name i { color: var(--primary); margin-right: 4px; }
.creator-name strong { color: var(--primary); font-weight: 700; position: relative; }
.creator-phone { font-size: 13px; color: var(--text3); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); transition: var(--transition); }
.creator-phone i { color: #25d366; }
.creator-phone:hover { border-color: #25d366; color: #25d366; box-shadow: 0 0 12px rgba(37,211,102,0.15); }

.typewriter { display: inline-block; overflow: hidden; white-space: nowrap; border-right: 2px solid var(--primary); width: 0; animation: typeReveal 0.8s steps(7) 1s forwards, blinkCursor 0.6s step-end infinite; }
@keyframes typeReveal { from { width: 0; } to { width: 7ch; } }
@keyframes blinkCursor { 50% { border-color: transparent; } }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .items-grid { grid-template-columns: repeat(3, 1fr); }
    .accounts-grid { grid-template-columns: repeat(2, 1fr); }
    .gold-grid { grid-template-columns: repeat(2, 1fr); }
    .diamante-grid { grid-template-columns: repeat(2, 1fr); }
    .promo-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-actions .btn-login, .nav-actions .btn-register { display: none; }
    .mobile-toggle { display: flex; align-items: center; justify-content: center; }
    .items-grid { grid-template-columns: repeat(2, 1fr); }
    .accounts-grid { grid-template-columns: 1fr; }
    .gold-grid { grid-template-columns: 1fr; }
    .diamante-grid { grid-template-columns: 1fr; }
    .promo-grid { grid-template-columns: 1fr; }
    .profile-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
    .cart-sidebar { width: 100%; right: -100%; }
    .filters-row { gap: 12px; }
    .filter-numbers { min-width: 140px; }
    .coupon-bar-inner { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
    .items-grid { grid-template-columns: 1fr; }
    .hero-stats { gap: 20px; }
    .hero-content h1 { font-size: 32px; }
    .filter-pills { flex-wrap: wrap; }
    .whatsapp-float { bottom: 16px; left: 16px; width: 50px; height: 50px; font-size: 24px; }
}

/* === OFFLINE BAR === */
.offline-bar {
    position: fixed; top: 0; left: 0; width: 100%;
    background: var(--red); color: #fff;
    text-align: center; padding: 8px; font-size: 12px; font-weight: 600;
    z-index: 99999; display: flex; align-items: center; justify-content: center; gap: 6px;
    animation: slideDown 0.3s ease;
}
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }