/* ═══════════════════════════════════════════════════════════════════
TEMA HERBALIFE — Vibrante (Verde brillante + Naranja energético)
Para Lucys Club · lucys.mercadochiapas.com
───────────────────────────────────────────────────────────────────
Cargar DESPUÉS de app.css en el :
← este
No modifica app.css. Para quitar el tema, borra esta línea.
═══════════════════════════════════════════════════════════════════ */
/* ── 1. Paleta: sobrescribe las variables del :root ──────────────── */
:root {
/* Verde Herbalife brillante como primario */
--color-primary: #00a651; /* verde Herbalife */
--color-primary-dark: #00803e; /* verde profundo */
/* Naranja energético como acento */
--color-accent: #ff6b00; /* naranja vibrante */
--green: #00a651;
/* Tonos de apoyo del tema */
--hl-lime: #7ed957; /* verde lima brillante */
--hl-orange: #ff6b00;
--hl-orange-dark: #e85d00;
--hl-leaf: #00c95f;
/* Sombras con tinte de color para sensación vibrante */
--shadow-sm: 0 1px 3px rgba(0,128,62,.12);
--shadow: 0 6px 20px rgba(0,166,81,.16);
--shadow-lg: 0 14px 44px rgba(0,166,81,.22);
/* Tipografía display más fuerte (Syne ya viene cargada) */
--font-display: 'Syne', 'Inter', sans-serif;
}
/* ── 2. Topbar con degradado verde→naranja ───────────────────────── */
.topbar {
background: linear-gradient(90deg, #00803e 0%, #00a651 55%, #00c95f 100%);
color: #eafff2;
}
.topbar-links a { color: #eafff2; }
.topbar-links a:hover { color: #fff; }
/* ── 3. Logo / marca con acento verde ────────────────────────────── */
.logo, .brand, .header .logo { color: var(--color-primary) !important; }
/* ── 4. Botones primarios: degradado verde→lima con energía ──────── */
.btn-primary {
background: linear-gradient(135deg, #00a651 0%, #00c95f 100%);
color: #fff;
box-shadow: 0 4px 14px rgba(0,166,81,.35);
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary:hover {
background: linear-gradient(135deg, #00803e 0%, #00a651 100%);
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0,166,81,.45);
filter: saturate(1.1);
}
/* Botón añadir al carrito → naranja energético (llama a la acción) */
.btn-add {
background: linear-gradient(135deg, #ff6b00 0%, #ff9a3d 100%);
box-shadow: 0 4px 14px rgba(255,107,0,.32);
transition: transform .15s ease, box-shadow .15s ease;
}
.btn-add:hover {
background: linear-gradient(135deg, #e85d00 0%, #ff6b00 100%);
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(255,107,0,.42);
}
/* Botón outline en verde */
.btn-outline {
color: var(--color-primary);
border: 2px solid var(--color-primary);
}
.btn-outline:hover {
background: var(--color-primary);
color: #fff;
}
/* ── 5. Hero: overlay con tinte verde y título más impactante ────── */
.hero-overlay {
background: linear-gradient(90deg, rgba(0,128,62,.78) 0%, rgba(0,166,81,.35) 45%, transparent 75%);
}
.hero-text h1 {
font-family: var(--font-display);
letter-spacing: -.01em;
}
/* Acento naranja en palabras destacadas del hero (si usan ) */
.hero-text h1 span { color: var(--hl-lime); }
/* ── 6. Títulos de sección con subrayado degradado ───────────────── */
.section-title span { color: var(--color-primary); }
.ps-section-title,
.ps-section-head {
border-image: linear-gradient(90deg, #00a651, #7ed957) 1;
}
.ps-section-title {
border-bottom: 3px solid transparent;
border-image: linear-gradient(90deg, #00a651, #ff6b00) 1;
}
/* ── 7. Badges y etiquetas ───────────────────────────────────────── */
.product-badge.destacado {
background: linear-gradient(135deg, #ff6b00, #ff9a3d);
color: #fff;
}
.ps-flag-new { background: linear-gradient(135deg, #00a651, #00c95f); }
/* Estrellas de rating en naranja cálido */
.stars { color: var(--hl-orange); }
/* ── 8. Tarjetas de producto: hover con energía verde ────────────── */
.product-card,
.cat-card {
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0,166,81,.18);
border-color: var(--hl-leaf);
}
.cat-card:hover {
border-color: var(--color-primary);
box-shadow: 0 6px 18px rgba(0,166,81,.15);
}
/* ── 9. Iconos de acción del header (carrito, cuenta) ─────────────── */
.action-btn:hover { color: var(--color-primary); }
.cart-count, .action-btn .badge {
background: var(--hl-orange);
color: #fff;
}
/* ── 10. Banner de pago / franjas informativas ───────────────────── */
.pay-banner, .info-strip {
border-left: 4px solid var(--color-primary);
}
/* ── 11. Footer con base verde profunda ──────────────────────────── */
.footer {
background: linear-gradient(160deg, #053d22 0%, #0a5e35 100%);
}
.footer a:hover { color: var(--hl-lime); }
.footer h3, .footer h4 { color: #fff; }
/* Botón flotante WhatsApp en verde Herbalife (en vez de dorado) */
.wa-float, .whatsapp-float {
background: linear-gradient(135deg, #00a651, #00c95f) !important;
box-shadow: 0 6px 20px rgba(0,166,81,.45) !important;
}
/* ── 12. Enlaces y focos de formularios ──────────────────────────── */
input:focus, select:focus, textarea:focus {
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 3px rgba(0,166,81,.15);
}
.otp-inputs input:focus { border-color: var(--color-primary); }
/* ── 13. Detalle decorativo: borde superior de marca ─────────────── */
.header {
border-top: 3px solid;
border-image: linear-gradient(90deg, #00a651 0%, #7ed957 50%, #ff6b00 100%) 1;
}