/* ======================================================
   XPYME Design System — Extensión Multi-Brand
   ====================================================== */

/* Ocultar botones extra si se requiere limpiar Navbar */
.navbar-links li { list-style: none; }

/* ── 1. MERCADO LIBRE ── */
.brand-meli .hero { background: linear-gradient(135deg, #1c1a00 0%, #000000 100%); }
.brand-meli .hero::before { background: radial-gradient(ellipse, rgba(255,230,0,0.1) 0%, transparent 60%); }
.brand-meli h1 .highlight { background: linear-gradient(90deg, #FFE600, #ffef5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.brand-meli .btn-brand { background-color: #FFE600; color: #333; font-weight: 700; box-shadow: 0 4px 15px rgba(255,230,0,0.2); border: none; }
.brand-meli .btn-brand:hover { background-color: #e5cf00; }
.brand-meli .hero-mockup-header { background: #FFE600; color: #333; }

/* ── 2. WOOCOMMERCE ── */
.brand-woo .hero { background: linear-gradient(135deg, #442a42 0%, #1e131d 100%); }
.brand-woo .hero::before { background: radial-gradient(ellipse, rgba(150,88,138,0.2) 0%, transparent 60%); }
.brand-woo h1 .highlight { background: linear-gradient(90deg, #96588a, #c678b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.brand-woo .btn-brand { background-color: #96588a; color: #fff; font-weight: 700; box-shadow: 0 4px 15px rgba(150,88,138,0.3); border: none; transition: background 0.3s; }
.brand-woo .btn-brand:hover { background-color: #7b4772; }
.brand-woo .hero-mockup-header { background: #96588a; color: #fff; }

/* ── 3. SHOPIFY ── */
.brand-shopify .hero { background: linear-gradient(135deg, #001f19 0%, #000000 100%); }
.brand-shopify .hero::before { background: radial-gradient(ellipse, rgba(149,191,71,0.15) 0%, transparent 60%); }
.brand-shopify h1 .highlight { background: linear-gradient(90deg, #95BF47, #b2e255); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.brand-shopify .btn-brand { background-color: #95BF47; color: #000; font-weight: 700; box-shadow: 0 4px 15px rgba(149,191,71,0.2); border: none; }
.brand-shopify .btn-brand:hover { background-color: #83aa3d; }
.brand-shopify .hero-mockup-header { background: #95BF47; color: #000; }

/* ── 4. GOOGLE MERCHANT CENTER ── */
.brand-merchant .hero { background: linear-gradient(135deg, #ffffff 0%, #f1f3f5 100%); color: var(--text-main); }
.brand-merchant .hero::before { background: radial-gradient(ellipse, rgba(66,133,244,0.08) 0%, transparent 60%); }
.brand-merchant h1 { color: var(--text-main); }
/* El degradado de Google usando sus 4 colores */
.brand-merchant h1 .highlight { background: linear-gradient(90deg, #4285F4, #EA4335, #FBBC05, #34A853); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.brand-merchant .btn-brand { background-color: #4285F4; color: #fff; font-weight: 700; box-shadow: 0 4px 15px rgba(66,133,244,0.3); border: none; }
.brand-merchant .btn-brand:hover { background-color: #3367d6; }
.brand-merchant .hero-mockup-header { background: #FFFFFF; color: #333; border-bottom: 3px solid #EA4335; border-radius: var(--rounded-lg) var(--rounded-lg) 0 0;}
.brand-merchant .hero-badge { color: #333; border: 1px solid rgba(0,0,0,0.1); background: rgba(0,0,0,0.05); }
.brand-merchant .hero p { color: var(--text-muted); }
.brand-merchant .btn-outline { color: var(--color-primary-base); border-color: rgba(0,0,0,0.2); }