/* ═══════════════════════════════════════════════════════════ VISUAL THEMES — Design Tokens (Sprint 2) Cada theme se aplica con data-theme="..." en Los merchants pueden elegir su theme en admin → Diseño ═══════════════════════════════════════════════════════════ */ /* Defaults (= Aurora Emerald) */ :root { --theme-primary: #10b981; --theme-primary-dark: #059669; --theme-accent: #6366f1; --theme-bg: #f9fafb; --theme-surface: #ffffff; --theme-text: #111827; --theme-text-muted: #6b7280; --theme-border: #e5e7eb; --theme-radius-card: 16px; --theme-radius-button: 12px; --theme-shadow-card: 0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px 0 rgb(0 0 0 / .04); --theme-shadow-hover: 0 10px 25px -5px rgb(0 0 0 / .1), 0 4px 10px -3px rgb(0 0 0 / .04); --theme-font-heading: 'Inter', sans-serif; --theme-font-body: 'Inter', sans-serif; --theme-effect-aurora: 1; --theme-effect-glassmorphism: 1; --theme-effect-particles: 0; --theme-card-style: rounded; /* rounded | sharp | minimal */ --theme-button-weight: 700; --theme-letter-spacing: -0.01em; } /* ═══════ THEME 1: Aurora Emerald (default actual mejorado) ═══════ */ [data-theme="aurora-emerald"] { --theme-primary: #10b981; --theme-primary-dark: #059669; --theme-accent: #34d399; --theme-bg: #f0fdf4; --theme-surface: #ffffff; --theme-effect-aurora: 1; --theme-effect-glassmorphism: 1; --theme-effect-particles: 0; --theme-font-heading: 'Inter', sans-serif; --theme-font-body: 'Inter', sans-serif; --theme-radius-card: 16px; } [data-theme="aurora-emerald"] body { background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 50%, #ecfdf5 100%); } /* ═══════ THEME 2: Sunset Boutique (moda, cosméticos) ═══════ */ [data-theme="sunset-boutique"] { --theme-primary: #ec4899; --theme-primary-dark: #db2777; --theme-accent: #f59e0b; --theme-bg: #fffbeb; --theme-surface: #ffffff; --theme-effect-aurora: 0; --theme-effect-glassmorphism: 0; --theme-font-heading: 'Playfair Display', 'Georgia', serif; --theme-font-body: 'Inter', sans-serif; --theme-radius-card: 24px; --theme-letter-spacing: -0.02em; --theme-shadow-card: 0 4px 12px -2px rgb(236 72 153 / .08); --theme-shadow-hover: 0 20px 40px -10px rgb(236 72 153 / .15); } [data-theme="sunset-boutique"] body { background: linear-gradient(135deg, #fff7ed 0%, #fce7f3 50%, #fef3c7 100%); } [data-theme="sunset-boutique"] h1, [data-theme="sunset-boutique"] h2 { letter-spacing: -0.03em; } /* ═══════ THEME 3: Dark Neon (streetwear, gaming) ═══════ */ [data-theme="dark-neon"] { --theme-primary: #06b6d4; --theme-primary-dark: #0891b2; --theme-accent: #d946ef; --theme-bg: #0a0a0f; --theme-surface: #18181b; --theme-text: #f5f5f5; --theme-text-muted: #a1a1aa; --theme-border: #27272a; --theme-effect-aurora: 1; --theme-effect-particles: 1; --theme-font-heading: 'Inter', sans-serif; --theme-font-body: 'Inter', sans-serif; --theme-radius-card: 8px; --theme-shadow-card: 0 0 0 1px rgb(6 182 212 / .15); --theme-shadow-hover: 0 0 30px -5px rgb(6 182 212 / .4); } [data-theme="dark-neon"] body { background: linear-gradient(180deg, #0a0a0f 0%, #18181b 100%); color: #f5f5f5; } [data-theme="dark-neon"] .bg-white { background: #18181b !important; color: #f5f5f5; } [data-theme="dark-neon"] .text-gray-900 { color: #f5f5f5 !important; } [data-theme="dark-neon"] .text-gray-700 { color: #d4d4d8 !important; } [data-theme="dark-neon"] .text-gray-500, [data-theme="dark-neon"] .text-gray-400 { color: #a1a1aa !important; } [data-theme="dark-neon"] .border-gray-100, [data-theme="dark-neon"] .border-gray-200 { border-color: #27272a !important; } [data-theme="dark-neon"] .bg-gray-50, [data-theme="dark-neon"] .bg-gray-100 { background: #27272a !important; color: #f5f5f5; } /* ═══════ THEME 4: Minimal Beige (decoración, libros, bienestar) ═══════ */ [data-theme="minimal-beige"] { --theme-primary: #18181b; --theme-primary-dark: #000000; --theme-accent: #b08968; --theme-bg: #faf8f5; --theme-surface: #ffffff; --theme-text: #18181b; --theme-text-muted: #78716c; --theme-border: #e7e5e4; --theme-effect-aurora: 0; --theme-effect-glassmorphism: 0; --theme-font-heading: 'EB Garamond', 'Georgia', serif; --theme-font-body: 'Inter', sans-serif; --theme-radius-card: 4px; --theme-button-weight: 500; --theme-shadow-card: 0 1px 2px 0 rgb(0 0 0 / .04); --theme-shadow-hover: 0 4px 12px -2px rgb(0 0 0 / .08); } [data-theme="minimal-beige"] body { background: #faf8f5; } /* ═══════ THEME 5: Tropical Vibes (comida rápida, helados, smoothies) ═══════ */ [data-theme="tropical-vibes"] { --theme-primary: #f97316; --theme-primary-dark: #ea580c; --theme-accent: #14b8a6; --theme-bg: #fff7ed; --theme-surface: #ffffff; --theme-effect-aurora: 1; --theme-effect-glassmorphism: 1; --theme-font-heading: 'Inter', sans-serif; --theme-font-body: 'Inter', sans-serif; --theme-radius-card: 28px; --theme-shadow-card: 0 4px 12px -2px rgb(249 115 22 / .12); --theme-shadow-hover: 0 16px 32px -8px rgb(249 115 22 / .25); } [data-theme="tropical-vibes"] body { background: linear-gradient(135deg, #fff7ed 0%, #ccfbf1 50%, #fef9c3 100%); } /* ═══════ EFFECTS GLOBALES (opt-in via theme) ═══════ */ /* Aurora background animado */ [data-theme] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: calc(var(--theme-effect-aurora, 0) * .35); background: radial-gradient(900px circle at 10% 0%, var(--theme-primary), transparent 60%), radial-gradient(700px circle at 90% 30%, var(--theme-accent), transparent 60%), radial-gradient(800px circle at 50% 100%, var(--theme-primary-dark), transparent 60%); filter: blur(60px); animation: auroraDrift 20s ease-in-out infinite alternate; } @keyframes auroraDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-3%, 2%, 0) scale(1.05); } } /* Glassmorphism cards */ [data-theme] .glass-card, [data-theme] [data-glass="true"] { backdrop-filter: blur(calc(var(--theme-effect-glassmorphism, 0) * 14px)); -webkit-backdrop-filter: blur(calc(var(--theme-effect-glassmorphism, 0) * 14px)); background: rgba(255,255,255, calc(0.6 + var(--theme-effect-glassmorphism, 0) * 0.2)); border: 1px solid rgba(255,255,255, calc(0.2 + var(--theme-effect-glassmorphism, 0) * 0.3)); } /* Particles (opt-in en themes específicos) */ [data-theme] .particles-bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.05) 1px, transparent 1px), radial-gradient(circle at 80% 60%, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 50px 50px; opacity: var(--theme-effect-particles, 0); } /* Tarjetas de productos respetan los tokens */ [data-theme] .product-card, [data-theme] [data-card="product"] { border-radius: var(--theme-radius-card); box-shadow: var(--theme-shadow-card); transition: all 0.3s ease; } [data-theme] .product-card:hover, [data-theme] [data-card="product"]:hover { box-shadow: var(--theme-shadow-hover); transform: translateY(-2px); } /* Headings respetan tipografía del theme */ [data-theme] h1, [data-theme] h2, [data-theme] h3 { font-family: var(--theme-font-heading); letter-spacing: var(--theme-letter-spacing); } [data-theme] body { font-family: var(--theme-font-body); } /* ═══════ OVERRIDE GLOBAL: aplicar themes a TODOS los elementos Tailwind ═══════ */ /* Cuando hay un theme activo, los colores hardcoded de Tailwind se reemplazan por las variables del theme */ [data-theme] .text-primary, [data-theme] .text-emerald-500, [data-theme] .text-emerald-600, [data-theme] .text-green-500, [data-theme] .text-green-600 { color: var(--theme-primary) !important; } [data-theme] .text-emerald-700, [data-theme] .text-green-700 { color: var(--theme-primary-dark) !important; } [data-theme] .bg-primary, [data-theme] .bg-emerald-500, [data-theme] .bg-emerald-600, [data-theme] .bg-green-500, [data-theme] .bg-green-600 { background-color: var(--theme-primary) !important; color: #fff; } [data-theme] .bg-emerald-700, [data-theme] .bg-green-700 { background-color: var(--theme-primary-dark) !important; color: #fff; } [data-theme] .hover\:bg-emerald-600:hover, [data-theme] .hover\:bg-emerald-700:hover, [data-theme] .hover\:bg-green-600:hover, [data-theme] .hover\:bg-green-700:hover { background-color: var(--theme-primary-dark) !important; } [data-theme] .border-primary, [data-theme] .border-emerald-500, [data-theme] .border-emerald-600, [data-theme] .border-green-500, [data-theme] .border-green-600 { border-color: var(--theme-primary) !important; } [data-theme] .ring-emerald-400, [data-theme] .ring-emerald-500, [data-theme] .focus\:ring-primary-400:focus, [data-theme] .focus\:border-primary:focus { --tw-ring-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; } [data-theme] .from-emerald-500, [data-theme] .from-emerald-600, [data-theme] .from-green-500, [data-theme] .from-green-600 { --tw-gradient-from: var(--theme-primary) !important; } [data-theme] .to-emerald-600, [data-theme] .to-emerald-700, [data-theme] .to-green-600, [data-theme] .to-green-700 { --tw-gradient-to: var(--theme-primary-dark) !important; } /* Bordes y radios respetan el theme */ [data-theme] .rounded-2xl { border-radius: var(--theme-radius-card) !important; } [data-theme] .rounded-xl { border-radius: calc(var(--theme-radius-card) * 0.75) !important; } /* Botones grandes: peso de fuente del theme */ [data-theme] .font-bold, [data-theme] .font-black { font-weight: var(--theme-button-weight, 700) !important; } /* Header del storefront: aplicar surface del theme */ [data-theme] header.bg-white, [data-theme] header[class*="bg-"] { background-color: var(--theme-surface) !important; } /* Cards en general */ [data-theme] .bg-white { background-color: var(--theme-surface); } [data-theme] .text-gray-900, [data-theme] .text-gray-800 { color: var(--theme-text); } [data-theme] .text-gray-600, [data-theme] .text-gray-500 { color: var(--theme-text-muted); } [data-theme] .border-gray-100, [data-theme] .border-gray-200 { border-color: var(--theme-border); } /* ═══════ HERO VARIANTS (Sprint 2) ═══════ */ /* hero=classic: slider de banners (default actual) — sin estilos extra */ /* hero=magazine: hero grande tipo revista */ [data-hero="magazine"] #banner-csv-wrap, [data-layout="magazine"]:not([data-hero]) #banner-csv-wrap, [data-layout="lookbook"]:not([data-hero]) #banner-csv-wrap, [data-layout="luxury"]:not([data-hero]) #banner-csv-wrap { aspect-ratio: 16/8; border-radius: var(--theme-radius-card, 32px); position: relative; } [data-hero="magazine"] #banner-csv-wrap::after, [data-layout="magazine"]:not([data-hero]) #banner-csv-wrap::after, [data-layout="lookbook"]:not([data-hero]) #banner-csv-wrap::after, [data-layout="luxury"]:not([data-hero]) #banner-csv-wrap::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.4) 100%); } /* hero=showcase: carrusel infinito */ [data-hero="showcase"] #banner-csv-wrap, [data-layout="showcase"]:not([data-hero]) #banner-csv-wrap, [data-layout="streetwear"]:not([data-hero]) #banner-csv-wrap, [data-layout="fitness"]:not([data-hero]) #banner-csv-wrap { aspect-ratio: 21/9; border-radius: 0; } [data-hero="showcase"] #banner-csv-wrap .slider-track, [data-layout="showcase"]:not([data-hero]) #banner-csv-wrap .slider-track, [data-layout="streetwear"]:not([data-hero]) #banner-csv-wrap .slider-track, [data-layout="fitness"]:not([data-hero]) #banner-csv-wrap .slider-track { scroll-snap-type: x proximity; } /* ═══════════════════════════════════════════════════════════════════ PLANTILLAS DE LAYOUT — Sprint 2 v2 (14 plantillas) Cada una mapea a tokens compartidos del sistema de themes. ═══════════════════════════════════════════════════════════════════ */ /* ── Boutique Magazine (moda, joyería, cosméticos) ── */ [data-theme="boutique-magazine"] { --theme-primary: #1f1f1f; --theme-primary-dark: #000000; --theme-accent: #c9a567; --theme-bg: #fffbf5; --theme-surface: #ffffff; --theme-text: #111827; --theme-text-muted: #737373; --theme-border: #f2ecd9; --theme-effect-aurora: 0; --theme-effect-glassmorphism: 0; --theme-font-heading: 'Playfair Display', 'Georgia', serif; --theme-font-body: 'Inter', sans-serif; --theme-radius-card: 4px; --theme-letter-spacing: -0.02em; --theme-shadow-card: 0 1px 3px 0 rgb(0 0 0 / .04); } [data-theme="boutique-magazine"] body { background: #fffbf5; } [data-theme="boutique-magazine"] h1, [data-theme="boutique-magazine"] h2 { letter-spacing: -0.03em; font-weight: 400; } /* ── Tech Showcase (gadgets, accesorios) ── */ [data-theme="tech-showcase"] { --theme-primary: #0ea5e9; --theme-primary-dark: #0284c7; --theme-accent: #8b5cf6; --theme-bg: #f8fafc; --theme-surface: #ffffff; --theme-text: #0f172a; --theme-text-muted: #64748b; --theme-border: #e2e8f0; --theme-effect-aurora: 1; --theme-effect-glassmorphism: 1; --theme-font-heading: 'Inter', sans-serif; --theme-font-body: 'Inter', sans-serif; --theme-radius-card: 12px; --theme-shadow-card: 0 4px 12px -2px rgb(14 165 233 / .08); --theme-shadow-hover: 0 16px 40px -10px rgb(14 165 233 / .25); } [data-theme="tech-showcase"] body { background: linear-gradient(135deg,#f8fafc 0%,#dbeafe 100%); } /* ── Restaurant Menu (comida, bebidas) ── */ [data-theme="restaurant-menu"] { --theme-primary: #dc2626; --theme-primary-dark: #991b1b; --theme-accent: #f59e0b; --theme-bg: #fff8e7; --theme-surface: #ffffff; --theme-text: #1f2937; --theme-text-muted: #6b7280; --theme-border: #fde6c8; --theme-effect-aurora: 0; --theme-effect-glassmorphism: 0; --theme-font-heading: 'Inter', sans-serif; --theme-font-body: 'Inter', sans-serif; --theme-radius-card: 20px; --theme-shadow-card: 0 4px 12px -2px rgb(220 38 38 / .08); --theme-shadow-hover: 0 16px 32px -8px rgb(220 38 38 / .2); } [data-theme="restaurant-menu"] body { background: #fff8e7; } /* ── Streetwear Drop (urbano, gaming) — DARK + NEÓN ── */ [data-theme="streetwear-drop"] { --theme-primary: #06b6d4; --theme-primary-dark: #0891b2; --theme-accent: #d946ef; --theme-bg: #0a0a0f; --theme-surface: #18181b; --theme-text: #f5f5f5; --theme-text-muted: #a1a1aa; --theme-border: #27272a; --theme-effect-aurora: 1; --theme-effect-particles: 1; --theme-font-heading: 'Inter', sans-serif; --theme-font-body: 'Inter', sans-serif; --theme-radius-card: 6px; --theme-button-weight: 900; --theme-shadow-card: 0 0 0 1px rgb(6 182 212 / .15); --theme-shadow-hover: 0 0 30px -5px rgb(6 182 212 / .4); } [data-theme="streetwear-drop"] body { background: linear-gradient(180deg,#0a0a0f 0%,#18181b 100%); color: #f5f5f5; } [data-theme="streetwear-drop"] .bg-white { background: #18181b !important; color: #f5f5f5; } [data-theme="streetwear-drop"] .text-gray-900, [data-theme="streetwear-drop"] .text-gray-800 { color: #f5f5f5 !important; } [data-theme="streetwear-drop"] .text-gray-700 { color: #d4d4d8 !important; } [data-theme="streetwear-drop"] .text-gray-500, [data-theme="streetwear-drop"] .text-gray-400 { color: #a1a1aa !important; } [data-theme="streetwear-drop"] .border-gray-100, [data-theme="streetwear-drop"] .border-gray-200 { border-color: #27272a !important; } [data-theme="streetwear-drop"] .bg-gray-50, [data-theme="streetwear-drop"] .bg-gray-100 { background: #27272a !important; color: #f5f5f5; } /* ── Minimal Lookbook (decoración, libros) ── */ [data-theme="minimal-lookbook"] { --theme-primary: #1f1f1f; --theme-primary-dark: #000000; --theme-accent: #a8a29e; --theme-bg: #faf8f5; --theme-surface: #ffffff; --theme-text: #1f1f1f; --theme-text-muted: #78716c; --theme-border: #e7e5e4; --theme-effect-aurora: 0; --theme-effect-glassmorphism: 0; --theme-font-heading: 'EB Garamond', 'Georgia', serif; --theme-font-body: 'Inter', sans-serif; --theme-radius-card: 0px; --theme-button-weight: 500; --theme-shadow-card: 0 1px 2px 0 rgb(0 0 0 / .04); } [data-theme="minimal-lookbook"] body { background: #faf8f5; } [data-theme="minimal-lookbook"] h1, [data-theme="minimal-lookbook"] h2 { font-weight: 400; font-style: italic; } /* ── Beauty Glow (cosméticos, skincare) ── */ [data-theme="beauty-glow"] { --theme-primary: #e11d48; --theme-primary-dark: #be123c; --theme-accent: #fbbf24; --theme-bg: #fef3f9; --theme-surface: #ffffff; --theme-text: #1f2937; --theme-text-muted: #9ca3af; --theme-border: #fce7f3; --theme-effect-aurora: 1; --theme-effect-glassmorphism: 1; --theme-font-heading: 'Playfair Display', 'Georgia', serif; --theme-font-body: 'Inter', sans-serif; --theme-radius-card: 24px; --theme-shadow-card: 0 4px 16px -4px rgb(225 29 72 / .12); --theme-shadow-hover: 0 20px 40px -10px rgb(225 29 72 / .25); } [data-theme="beauty-glow"] body { background: linear-gradient(135deg,#fef3f9 0%,#fff5e9 100%); } [data-theme="beauty-glow"] h1, [data-theme="beauty-glow"] h2 { font-weight: 400; } /* ── Fitness Power (gym, suplementos) — DARK ── */ [data-theme="fitness-power"] { --theme-primary: #f59e0b; --theme-primary-dark: #d97706; --theme-accent: #22d3ee; --theme-bg: #0f172a; --theme-surface: #1e293b; --theme-text: #f1f5f9; --theme-text-muted: #94a3b8; --theme-border: #334155; --theme-effect-aurora: 0; --theme-effect-particles: 0; --theme-font-heading: 'Inter', sans-serif; --theme-font-body: 'Inter', sans-serif; --theme-radius-card: 8px; --theme-button-weight: 900; --theme-letter-spacing: 0.01em; --theme-shadow-card: 0 0 0 1px rgb(245 158 11 / .15); --theme-shadow-hover: 0 8px 24px -4px rgb(245 158 11 / .3); } [data-theme="fitness-power"] body { background: linear-gradient(180deg,#1e293b 0%,#0f172a 100%); color: #f1f5f9; } [data-theme="fitness-power"] .bg-white { background: #1e293b !important; color: #f1f5f9; } [data-theme="fitness-power"] .text-gray-900, [data-theme="fitness-power"] .text-gray-800 { color: #f1f5f9 !important; } [data-theme="fitness-power"] .text-gray-700 { color: #cbd5e1 !important; } [data-theme="fitness-power"] .text-gray-500, [data-theme="fitness-power"] .text-gray-400 { color: #94a3b8 !important; } [data-theme="fitness-power"] .border-gray-100, [data-theme="fitness-power"] .border-gray-200 { border-color: #334155 !important; } [data-theme="fitness-power"] .bg-gray-50, [data-theme="fitness-power"] .bg-gray-100 { background: #334155 !important; color: #f1f5f9; } [data-theme="fitness-power"] h1, [data-theme="fitness-power"] h2 { text-transform: uppercase; } /* ── Kids & Fun (juguetes, ropa infantil) ── */ [data-theme="kids-fun"] { --theme-primary: #8b5cf6; --theme-primary-dark: #7c3aed; --theme-accent: #f59e0b; --theme-bg: #fef9c3; --theme-surface: #ffffff; --theme-text: #1f2937; --theme-text-muted: #6b7280; --theme-border: #fde68a; --theme-effect-aurora: 1; --theme-effect-glassmorphism: 0; --theme-font-heading: 'Quicksand', 'Comic Sans MS', sans-serif; --theme-font-body: 'Quicksand', 'Inter', sans-serif; --theme-radius-card: 32px; --theme-button-weight: 800; --theme-shadow-card: 0 4px 12px -2px rgb(139 92 246 / .15); --theme-shadow-hover: 0 16px 40px -10px rgb(139 92 246 / .3); } [data-theme="kids-fun"] body { background: linear-gradient(135deg,#fef9c3 0%,#fce7f3 50%,#dbeafe 100%); } /* ── Jewelry Luxe (lujo) — DARK ── */ [data-theme="jewelry-luxe"] { --theme-primary: #d4a574; --theme-primary-dark: #a87b4f; --theme-accent: #fde68a; --theme-bg: #0f0f10; --theme-surface: #1c1c1d; --theme-text: #fafaf9; --theme-text-muted: #a8a29e; --theme-border: #292524; --theme-effect-aurora: 0; --theme-effect-glassmorphism: 0; --theme-font-heading: 'Playfair Display', 'Georgia', serif; --theme-font-body: 'Inter', sans-serif; --theme-radius-card: 0px; --theme-button-weight: 400; --theme-letter-spacing: 0.05em; --theme-shadow-card: 0 1px 0 0 rgb(212 165 116 / .2); --theme-shadow-hover: 0 8px 24px -4px rgb(212 165 116 / .25); } [data-theme="jewelry-luxe"] body { background: #0f0f10; color: #fafaf9; } [data-theme="jewelry-luxe"] .bg-white { background: #1c1c1d !important; color: #fafaf9; } [data-theme="jewelry-luxe"] .text-gray-900, [data-theme="jewelry-luxe"] .text-gray-800 { color: #fafaf9 !important; } [data-theme="jewelry-luxe"] .text-gray-700 { color: #e7e5e4 !important; } [data-theme="jewelry-luxe"] .text-gray-500, [data-theme="jewelry-luxe"] .text-gray-400 { color: #a8a29e !important; } [data-theme="jewelry-luxe"] .border-gray-100, [data-theme="jewelry-luxe"] .border-gray-200 { border-color: #292524 !important; } [data-theme="jewelry-luxe"] .bg-gray-50, [data-theme="jewelry-luxe"] .bg-gray-100 { background: #292524 !important; color: #fafaf9; } [data-theme="jewelry-luxe"] h1, [data-theme="jewelry-luxe"] h2 { font-weight: 400; font-style: italic; } /* ── Florist Garden (floristería, eventos) ── */ [data-theme="florist-pastel"] { --theme-primary: #e879b9; --theme-primary-dark: #be185d; --theme-accent: #86efac; --theme-bg: #fff7f3; --theme-surface: #ffffff; --theme-text: #374151; --theme-text-muted: #9ca3af; --theme-border: #fce7f3; --theme-effect-aurora: 1; --theme-effect-glassmorphism: 0; --theme-font-heading: 'Cormorant Garamond', 'Georgia', serif; --theme-font-body: 'Inter', sans-serif; --theme-radius-card: 28px; --theme-shadow-card: 0 4px 16px -4px rgb(232 121 185 / .12); --theme-shadow-hover: 0 20px 40px -10px rgb(232 121 185 / .25); } [data-theme="florist-pastel"] body { background: linear-gradient(180deg,#fff7f3 0%,#fce7f3 100%); } [data-theme="florist-pastel"] h1, [data-theme="florist-pastel"] h2 { font-weight: 400; font-style: italic; } /* ── Bakery Warmth (panadería, café) ── */ [data-theme="bakery-warm"] { --theme-primary: #92400e; --theme-primary-dark: #78350f; --theme-accent: #dc2626; --theme-bg: #fdf6e3; --theme-surface: #ffffff; --theme-text: #1c1917; --theme-text-muted: #78716c; --theme-border: #fde68a; --theme-effect-aurora: 0; --theme-effect-glassmorphism: 0; --theme-font-heading: 'Lora', 'Georgia', serif; --theme-font-body: 'Inter', sans-serif; --theme-radius-card: 16px; --theme-shadow-card: 0 2px 8px -1px rgb(146 64 14 / .1); --theme-shadow-hover: 0 12px 24px -4px rgb(146 64 14 / .2); } [data-theme="bakery-warm"] body { background: #fdf6e3; } [data-theme="bakery-warm"] h1, [data-theme="bakery-warm"] h2 { font-style: italic; font-weight: 700; } /* ── Pet Friendly (mascotas) ── */ [data-theme="pet-friendly"] { --theme-primary: #0891b2; --theme-primary-dark: #0e7490; --theme-accent: #fbbf24; --theme-bg: #ecfeff; --theme-surface: #ffffff; --theme-text: #1f2937; --theme-text-muted: #6b7280; --theme-border: #cffafe; --theme-effect-aurora: 1; --theme-effect-glassmorphism: 0; --theme-font-heading: 'Nunito', 'Inter', sans-serif; --theme-font-body: 'Nunito', 'Inter', sans-serif; --theme-radius-card: 24px; --theme-button-weight: 800; --theme-shadow-card: 0 4px 12px -2px rgb(8 145 178 / .12); --theme-shadow-hover: 0 16px 32px -8px rgb(8 145 178 / .25); } [data-theme="pet-friendly"] body { background: linear-gradient(135deg,#ecfeff 0%,#dbeafe 100%); } /* ── Real Estate Pro (inmobiliaria) ── */ [data-theme="realestate-pro"] { --theme-primary: #1e40af; --theme-primary-dark: #1e3a8a; --theme-accent: #10b981; --theme-bg: #f9fafb; --theme-surface: #ffffff; --theme-text: #111827; --theme-text-muted: #6b7280; --theme-border: #e5e7eb; --theme-effect-aurora: 0; --theme-effect-glassmorphism: 0; --theme-font-heading: 'Manrope', 'Inter', sans-serif; --theme-font-body: 'Manrope', 'Inter', sans-serif; --theme-radius-card: 8px; --theme-button-weight: 700; --theme-shadow-card: 0 1px 3px 0 rgb(30 64 175 / .06); --theme-shadow-hover: 0 12px 24px -4px rgb(30 64 175 / .15); } [data-theme="realestate-pro"] body { background: #f9fafb; } /* ═══════════════════════════════════════════════════════════════════ AJUSTES POR LAYOUT (estructura del storefront) Aplican siempre que [data-layout=...] esté presente. ═══════════════════════════════════════════════════════════════════ */ /* Layout: menu — tarjetas de producto en grid 2 cols incluso desktop, hero corto */ [data-layout="menu"] #banner-csv-wrap { aspect-ratio: 16/6; border-radius: var(--theme-radius-card); } [data-layout="menu"] #products-grid { gap: 0.5rem !important; } /* Layout: streetwear — corners cuadrados, mayúsculas en headings */ [data-layout="streetwear"] .product-card, [data-layout="streetwear"] [data-card="product"] { border-radius: 6px !important; } [data-layout="streetwear"] h2, [data-layout="streetwear"] .section-title { text-transform: uppercase; letter-spacing: 0.1em; } /* Layout: lookbook / luxury — sin radius, fonts serif, espaciado generoso */ [data-layout="lookbook"] .product-card, [data-layout="lookbook"] [data-card="product"], [data-layout="luxury"] .product-card, [data-layout="luxury"] [data-card="product"] { border-radius: 0 !important; box-shadow: none !important; } [data-layout="lookbook"] h2, [data-layout="luxury"] h2 { font-weight: 400; font-style: italic; letter-spacing: -0.01em; } /* Layout: kids — corners extra redondeados */ [data-layout="kids"] .product-card, [data-layout="kids"] [data-card="product"] { border-radius: 32px !important; } [data-layout="kids"] button { border-radius: 999px !important; } /* Layout: fitness — corners cuadrados + uppercase */ [data-layout="fitness"] .product-card, [data-layout="fitness"] [data-card="product"] { border-radius: 8px !important; } [data-layout="fitness"] h2 { text-transform: uppercase; letter-spacing: 0.05em; } /* Layout: realestate — corners pequeños, listas de specs */ [data-layout="realestate"] .product-card, [data-layout="realestate"] [data-card="product"] { border-radius: 8px !important; } /* Layout: bakery, florist, beauty, pet — corners cálidos */ [data-layout="bakery"] .product-card, [data-layout="bakery"] [data-card="product"] { border-radius: 16px !important; } [data-layout="florist"] .product-card, [data-layout="florist"] [data-card="product"] { border-radius: 28px !important; } [data-layout="beauty"] .product-card, [data-layout="beauty"] [data-card="product"] { border-radius: 24px !important; } [data-layout="pet"] .product-card, [data-layout="pet"] [data-card="product"] { border-radius: 24px !important; } /* ═══════════════════════════════════════════════════════════════════ DARK MODE — refuerzo de visibilidad de textos Aplica a TODOS los themes con fondo oscuro: streetwear-drop, fitness-power, jewelry-luxe y dark-neon. Cubre TODAS las clases de Tailwind que pueden producir texto invisible (slate, zinc, neutral, stone, gray, black, body). ═══════════════════════════════════════════════════════════════════ */ [data-theme="streetwear-drop"], [data-theme="fitness-power"], [data-theme="jewelry-luxe"], [data-theme="dark-neon"] { color-scheme: dark; } [data-theme="streetwear-drop"] body, [data-theme="fitness-power"] body, [data-theme="jewelry-luxe"] body, [data-theme="dark-neon"] body { color: var(--theme-text) !important; } /* Cualquier elemento body sin override explícito hereda — pero las clases Tailwind .text-slate-800 etc. tienen mayor especificidad. Las cubrimos: */ [data-theme="streetwear-drop"] .text-slate-700, [data-theme="streetwear-drop"] .text-slate-800, [data-theme="streetwear-drop"] .text-slate-900, [data-theme="fitness-power"] .text-slate-700, [data-theme="fitness-power"] .text-slate-800, [data-theme="fitness-power"] .text-slate-900, [data-theme="jewelry-luxe"] .text-slate-700, [data-theme="jewelry-luxe"] .text-slate-800, [data-theme="jewelry-luxe"] .text-slate-900, [data-theme="dark-neon"] .text-slate-700, [data-theme="dark-neon"] .text-slate-800, [data-theme="dark-neon"] .text-slate-900, [data-theme="streetwear-drop"] .text-zinc-700, [data-theme="streetwear-drop"] .text-zinc-800, [data-theme="streetwear-drop"] .text-zinc-900, [data-theme="fitness-power"] .text-zinc-700, [data-theme="fitness-power"] .text-zinc-800, [data-theme="fitness-power"] .text-zinc-900, [data-theme="jewelry-luxe"] .text-zinc-700, [data-theme="jewelry-luxe"] .text-zinc-800, [data-theme="jewelry-luxe"] .text-zinc-900, [data-theme="dark-neon"] .text-zinc-700, [data-theme="dark-neon"] .text-zinc-800, [data-theme="dark-neon"] .text-zinc-900, [data-theme="streetwear-drop"] .text-neutral-700,[data-theme="streetwear-drop"] .text-neutral-800,[data-theme="streetwear-drop"] .text-neutral-900, [data-theme="fitness-power"] .text-neutral-700,[data-theme="fitness-power"] .text-neutral-800,[data-theme="fitness-power"] .text-neutral-900, [data-theme="jewelry-luxe"] .text-neutral-700,[data-theme="jewelry-luxe"] .text-neutral-800,[data-theme="jewelry-luxe"] .text-neutral-900, [data-theme="dark-neon"] .text-neutral-700,[data-theme="dark-neon"] .text-neutral-800,[data-theme="dark-neon"] .text-neutral-900, [data-theme="streetwear-drop"] .text-stone-700, [data-theme="streetwear-drop"] .text-stone-800, [data-theme="streetwear-drop"] .text-stone-900, [data-theme="fitness-power"] .text-stone-700, [data-theme="fitness-power"] .text-stone-800, [data-theme="fitness-power"] .text-stone-900, [data-theme="jewelry-luxe"] .text-stone-700, [data-theme="jewelry-luxe"] .text-stone-800, [data-theme="jewelry-luxe"] .text-stone-900, [data-theme="dark-neon"] .text-stone-700, [data-theme="dark-neon"] .text-stone-800, [data-theme="dark-neon"] .text-stone-900, [data-theme="streetwear-drop"] .text-black, [data-theme="fitness-power"] .text-black, [data-theme="jewelry-luxe"] .text-black, [data-theme="dark-neon"] .text-black { color: var(--theme-text) !important; } /* Header / aside / footer: TODOS los descendientes texto sin clase explícita heredan --theme-text (al ser children directos, no Tailwind interfiere) */ [data-theme="streetwear-drop"] header *, [data-theme="streetwear-drop"] aside *, [data-theme="streetwear-drop"] footer *, [data-theme="fitness-power"] header *, [data-theme="fitness-power"] aside *, [data-theme="fitness-power"] footer *, [data-theme="jewelry-luxe"] header *, [data-theme="jewelry-luxe"] aside *, [data-theme="jewelry-luxe"] footer *, [data-theme="dark-neon"] header *, [data-theme="dark-neon"] aside *, [data-theme="dark-neon"] footer * { /* Nada aquí — ver reglas específicas abajo */ } /* Botones del header (Contactar, Cómo llegar, Reservar) — usan solo `border` sin -gray-X, así que necesitan reglas explícitas para borde y texto */ [data-theme="streetwear-drop"] header a, [data-theme="streetwear-drop"] header button:not(.bg-gray-900):not(.bg-emerald-500):not(.bg-emerald-600), [data-theme="fitness-power"] header a, [data-theme="fitness-power"] header button:not(.bg-gray-900):not(.bg-emerald-500):not(.bg-emerald-600), [data-theme="jewelry-luxe"] header a, [data-theme="jewelry-luxe"] header button:not(.bg-gray-900):not(.bg-emerald-500):not(.bg-emerald-600), [data-theme="dark-neon"] header a, [data-theme="dark-neon"] header button:not(.bg-gray-900):not(.bg-emerald-500):not(.bg-emerald-600) { color: var(--theme-text) !important; border-color: var(--theme-border) !important; } [data-theme="streetwear-drop"] header a:hover, [data-theme="streetwear-drop"] header button:hover:not(.bg-gray-900), [data-theme="fitness-power"] header a:hover, [data-theme="fitness-power"] header button:hover:not(.bg-gray-900), [data-theme="jewelry-luxe"] header a:hover, [data-theme="jewelry-luxe"] header button:hover:not(.bg-gray-900), [data-theme="dark-neon"] header a:hover, [data-theme="dark-neon"] header button:hover:not(.bg-gray-900) { color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; background-color: transparent !important; } /* hover:bg-gray-50/100 en header — en dark queda visible como surface */ [data-theme="streetwear-drop"] header .hover\:bg-gray-50:hover, [data-theme="streetwear-drop"] header .hover\:bg-gray-100:hover, [data-theme="fitness-power"] header .hover\:bg-gray-50:hover, [data-theme="fitness-power"] header .hover\:bg-gray-100:hover, [data-theme="jewelry-luxe"] header .hover\:bg-gray-50:hover, [data-theme="jewelry-luxe"] header .hover\:bg-gray-100:hover, [data-theme="dark-neon"] header .hover\:bg-gray-50:hover, [data-theme="dark-neon"] header .hover\:bg-gray-100:hover { background-color: var(--theme-border) !important; } /* ID-based fixes: máxima especificidad para botones del header en CUALQUIER theme. Garantiza visibilidad en todos los 18 themes. */ [data-theme] #btn-contact-header, [data-theme] #btn-maps-global, [data-theme] #btn-nav-reservations, [data-theme] #contact-label, [data-theme] #label-maps-global { color: var(--theme-text); } [data-theme] #btn-contact-header { border-color: var(--theme-primary) !important; color: var(--theme-primary) !important; } [data-theme] #btn-contact-header:hover { background-color: var(--theme-primary) !important; color: #fff !important; border-color: var(--theme-primary) !important; } [data-theme] #btn-maps-global { border-color: var(--theme-border) !important; color: var(--theme-text) !important; } [data-theme] #btn-maps-global:hover { background-color: var(--theme-border) !important; color: var(--theme-text) !important; } [data-theme] #btn-nav-reservations { background-color: var(--theme-primary) !important; color: #fff !important; } /* Cart sidebar — header "Tu Pedido", labels y links como Vaciar */ [data-theme] #cart-sidebar h2, [data-theme] #cart-sidebar h3, [data-theme] #cart-sidebar p, [data-theme] #cart-sidebar span:not([class*="bg-"]):not([class*="text-red"]) { color: var(--theme-text); } [data-theme] #cart-empty-msg { color: var(--theme-text-muted); } /* Inputs de filtros y búsqueda en TODO theme — color y borde correctos */ [data-theme] #search-input, [data-theme] #filter-category, [data-theme] #filter-subcategory, [data-theme] [id^="sel-f"] { background-color: var(--theme-surface); color: var(--theme-text); border-color: var(--theme-border); } [data-theme] #search-input::placeholder { color: var(--theme-text-muted); opacity: .65; } /* Sticky filters bar — el contenedor `bg-white/80 backdrop-blur` */ [data-theme] .sticky.bg-white\/80 { background: color-mix(in srgb, var(--theme-surface) 80%, transparent) !important; } /* Empty state grid */ [data-theme] #product-grid > div.col-span-full { color: var(--theme-text-muted) !important; } /* Modal de detalle del producto — necesita textos visibles también */ [data-theme="streetwear-drop"] #detail-modal .bg-white, [data-theme="fitness-power"] #detail-modal .bg-white, [data-theme="jewelry-luxe"] #detail-modal .bg-white, [data-theme="dark-neon"] #detail-modal .bg-white { background: var(--theme-surface) !important; color: var(--theme-text) !important; } /* Texto que viaja con `text-slate-800 / text-slate-700` desde body — refuerzo por si Tailwind CDN se carga después y pisa nuestras reglas */ [data-theme="streetwear-drop"] body.text-slate-800, [data-theme="fitness-power"] body.text-slate-800, [data-theme="jewelry-luxe"] body.text-slate-800, [data-theme="dark-neon"] body.text-slate-800 { color: var(--theme-text) !important; } /* Inputs/selects/textarea — fondo oscuro y texto claro */ [data-theme="streetwear-drop"] input, [data-theme="streetwear-drop"] select, [data-theme="streetwear-drop"] textarea, [data-theme="fitness-power"] input, [data-theme="fitness-power"] select, [data-theme="fitness-power"] textarea, [data-theme="jewelry-luxe"] input, [data-theme="jewelry-luxe"] select, [data-theme="jewelry-luxe"] textarea, [data-theme="dark-neon"] input, [data-theme="dark-neon"] select, [data-theme="dark-neon"] textarea { background-color: var(--theme-surface) !important; color: var(--theme-text) !important; border-color: var(--theme-border) !important; } [data-theme="streetwear-drop"] ::placeholder, [data-theme="fitness-power"] ::placeholder, [data-theme="jewelry-luxe"] ::placeholder, [data-theme="dark-neon"] ::placeholder { color: var(--theme-text-muted) !important; opacity: .7; } /* Headers, secciones con backdrop-blur, footers */ [data-theme="streetwear-drop"] header, [data-theme="streetwear-drop"] aside, [data-theme="streetwear-drop"] footer, [data-theme="fitness-power"] header, [data-theme="fitness-power"] aside, [data-theme="fitness-power"] footer, [data-theme="jewelry-luxe"] header, [data-theme="jewelry-luxe"] aside, [data-theme="jewelry-luxe"] footer, [data-theme="dark-neon"] header, [data-theme="dark-neon"] aside, [data-theme="dark-neon"] footer { background-color: var(--theme-surface) !important; color: var(--theme-text); border-color: var(--theme-border) !important; } /* Botones gray-900 (CTAs principales) — mantienen alto contraste */ [data-theme="streetwear-drop"] .bg-gray-900, [data-theme="fitness-power"] .bg-gray-900, [data-theme="jewelry-luxe"] .bg-gray-900, [data-theme="dark-neon"] .bg-gray-900 { background-color: var(--theme-primary) !important; color: #000 !important; } [data-theme="streetwear-drop"] .hover\:bg-black:hover, [data-theme="fitness-power"] .hover\:bg-black:hover, [data-theme="jewelry-luxe"] .hover\:bg-black:hover, [data-theme="dark-neon"] .hover\:bg-black:hover { background-color: var(--theme-primary-dark) !important; } /* Cubrir más utilidades de Tailwind para texto */ [data-theme="streetwear-drop"] .text-gray-600, [data-theme="streetwear-drop"] .text-gray-700, [data-theme="streetwear-drop"] .text-gray-800, [data-theme="fitness-power"] .text-gray-600, [data-theme="fitness-power"] .text-gray-700, [data-theme="fitness-power"] .text-gray-800, [data-theme="jewelry-luxe"] .text-gray-600, [data-theme="jewelry-luxe"] .text-gray-700, [data-theme="jewelry-luxe"] .text-gray-800 { color: var(--theme-text) !important; } [data-theme="streetwear-drop"] .border-gray-300, [data-theme="streetwear-drop"] .border-gray-400, [data-theme="fitness-power"] .border-gray-300, [data-theme="fitness-power"] .border-gray-400, [data-theme="jewelry-luxe"] .border-gray-300, [data-theme="jewelry-luxe"] .border-gray-400, [data-theme="dark-neon"] .border-gray-300, [data-theme="dark-neon"] .border-gray-400 { border-color: var(--theme-border) !important; } /* Heading de la tienda (logo text) — siempre legible */ [data-theme] #store-name { color: var(--theme-text) !important; } /* Tu Pedido / cart heading */ [data-theme] aside h2, [data-theme] aside h3 { color: var(--theme-text); } /* ═══════════════════════════════════════════════════════════════════ MOTION EFFECTS — efectos por theme (data-motion=...) Se asignan automáticamente desde script.js según el theme: kenburns | parallax | glitch | shimmer | bounce | fade ═══════════════════════════════════════════════════════════════════ */ /* MOTION: kenburns — zoom lento al hero/banner (cinematográfico) */ [data-motion="kenburns"] #banner-csv-wrap .media-cover { animation: themeKenburns 22s ease-in-out infinite alternate; transform-origin: center; } @keyframes themeKenburns { 0% { transform: scale(1) translate(0,0); } 50% { transform: scale(1.08) translate(-1%,-1%); } 100% { transform: scale(1.15) translate(-2%,1%); } } /* MOTION: parallax — banner pegado en bg, productos flotan */ [data-motion="parallax"] #banner-csv-wrap .media-cover { animation: themeFloat 6s ease-in-out infinite alternate; } @keyframes themeFloat { 0% { transform: scale(1.04) translateY(0); } 100% { transform: scale(1.04) translateY(-2%); } } [data-motion="parallax"] .product-card { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; } [data-motion="parallax"] .product-card:hover { transform: translateY(-8px) scale(1.02); } /* MOTION: glitch — flicker neón en headers (streetwear, neón) */ [data-motion="glitch"] header #store-name, [data-motion="glitch"] h1.hero-headline { position: relative; animation: themeGlitch 6s steps(1) infinite; text-shadow: 0 0 8px var(--theme-primary); } @keyframes themeGlitch { 0%, 92%, 100% { text-shadow: 0 0 8px var(--theme-primary); transform: translate(0); } 93% { text-shadow: -2px 0 var(--theme-accent), 2px 0 var(--theme-primary); transform: translate(-1px); } 94% { text-shadow: 2px 0 var(--theme-accent), -2px 0 var(--theme-primary); transform: translate(1px); } 95% { text-shadow: 0 0 8px var(--theme-primary); transform: translate(0); } } [data-motion="glitch"] #banner-csv-wrap::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient(0deg, rgba(255,255,255,0) 0 2px, rgba(255,255,255,.04) 2px 4px); mix-blend-mode: overlay; animation: themeScanline 4s linear infinite; } @keyframes themeScanline { 0% { transform: translateY(0); } 100% { transform: translateY(8px); } } /* MOTION: shimmer — barrido dorado en headings (luxe, beauty) */ [data-motion="shimmer"] header #store-name, [data-motion="shimmer"] h1.hero-headline, [data-motion="shimmer"] .product-card h3 { background: linear-gradient(90deg, var(--theme-text) 0%, var(--theme-primary) 50%, var(--theme-text) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: themeShimmer 4s linear infinite; } @keyframes themeShimmer { 0% { background-position: -150% 0; } 100% { background-position: 150% 0; } } /* MOTION: bounce — micro-rebote hover en kids/pet */ [data-motion="bounce"] .product-card { transition: transform .3s cubic-bezier(.34,1.56,.64,1); } [data-motion="bounce"] .product-card:hover { transform: translateY(-6px) rotate(-0.5deg); } [data-motion="bounce"] .product-card:active { animation: themeBounce .4s ease; } @keyframes themeBounce { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 70% { transform: translateY(-4px); } } /* MOTION: fade — entrada suave editorial */ [data-motion="fade"] .product-card { animation: themeFadeUp .9s cubic-bezier(.2,.8,.2,1) backwards; } [data-motion="fade"] .product-card:nth-child(1) { animation-delay: .05s; } [data-motion="fade"] .product-card:nth-child(2) { animation-delay: .15s; } [data-motion="fade"] .product-card:nth-child(3) { animation-delay: .25s; } [data-motion="fade"] .product-card:nth-child(4) { animation-delay: .35s; } [data-motion="fade"] .product-card:nth-child(n+5){ animation-delay: .45s; } @keyframes themeFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* Respeta prefers-reduced-motion (accesibilidad) */ @media (prefers-reduced-motion: reduce) { [data-motion] *, [data-motion] *::before, [data-motion] *::after { animation: none !important; transition: none !important; } } /* ═══════════════════════════════════════════════════════════════════ HOVER EFFECTS GLOBALES POR THEME (sutiles) ═══════════════════════════════════════════════════════════════════ */ [data-theme] .product-card { will-change: transform; } [data-theme] .product-card:hover .media-cover { transform: scale(1.04); } [data-theme] .media-cover { transition: transform .6s ease; } /* Glow neón en cards de themes oscuros con neón */ [data-theme="dark-neon"] .product-card:hover, [data-theme="streetwear-drop"] .product-card:hover { box-shadow: 0 0 0 1px var(--theme-primary), 0 0 30px -8px var(--theme-primary) !important; } /* Brillo sutil en cards de themes claros premium */ [data-theme="beauty-glow"] .product-card, [data-theme="boutique-magazine"] .product-card, [data-theme="florist-pastel"] .product-card { position: relative; overflow: hidden; } [data-theme="beauty-glow"] .product-card::after, [data-theme="boutique-magazine"] .product-card::after, [data-theme="florist-pastel"] .product-card::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); pointer-events: none; transition: left .8s ease; } [data-theme="beauty-glow"] .product-card:hover::after, [data-theme="boutique-magazine"] .product-card:hover::after, [data-theme="florist-pastel"] .product-card:hover::after { left: 130%; } /* Banner con auto-overlay sutil en themes claros (mejora legibilidad sobre fotos) */ [data-theme] #banner-csv-wrap::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.25) 100%); z-index: 1; } /* ═══════════════════════════════════════════════════════════════════ MOTION EFFECTS GLOBALES (Sprint 2 v3) — independientes del theme - scroll-reveal: fade-up de cards al entrar al viewport - 3D tilt: viene desde JS (transform inline) - cart bump: rebote del icono/badge al agregar - scroll progress bar: barra fina arriba ═══════════════════════════════════════════════════════════════════ */ /* SCROLL-REVEAL: estado inicial — invisible y desplazado abajo */ .scroll-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); will-change: opacity, transform; } .scroll-reveal.reveal-visible { opacity: 1; transform: translateY(0); } /* Stagger: cuando varias cards entran al mismo tiempo, se escalonan */ #product-grid > .scroll-reveal:nth-child(1) { transition-delay: 0s; } #product-grid > .scroll-reveal:nth-child(2) { transition-delay: .05s; } #product-grid > .scroll-reveal:nth-child(3) { transition-delay: .10s; } #product-grid > .scroll-reveal:nth-child(4) { transition-delay: .15s; } #product-grid > .scroll-reveal:nth-child(5) { transition-delay: .18s; } #product-grid > .scroll-reveal:nth-child(6) { transition-delay: .22s; } #product-grid > .scroll-reveal:nth-child(7) { transition-delay: .25s; } #product-grid > .scroll-reveal:nth-child(n+8) { transition-delay: .28s; } /* 3D TILT: la transición fina se aplica desde JS, pero damos un perspective base */ .product-card { transform-style: preserve-3d; backface-visibility: hidden; } /* Mientras se hace tilt, sombra ligeramente acentuada */ .product-card[style*="perspective"] { box-shadow: 0 20px 40px -12px rgba(0,0,0,.18), 0 8px 16px -8px rgba(0,0,0,.12); } /* CART BUMP: animación cuando se agrega un producto */ @keyframes cartBump { 0% { transform: scale(1) rotate(0); } 20% { transform: scale(1.25) rotate(-12deg); } 45% { transform: scale(.92) rotate(8deg); } 70% { transform: scale(1.10) rotate(-4deg); } 100% { transform: scale(1) rotate(0); } } @keyframes cartBumpBadge { 0% { transform: scale(1); } 30% { transform: scale(1.6); } 60% { transform: scale(.85); } 100% { transform: scale(1); } } .cart-bump { animation: cartBump .55s cubic-bezier(.34,1.56,.64,1); } #cart-badge.cart-bump { animation: cartBumpBadge .55s cubic-bezier(.34,1.56,.64,1); transform-origin: center; } /* SCROLL PROGRESS BAR — barra delgada en top */ #scroll-progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--theme-primary, #10b981), var(--theme-accent, #6366f1)); z-index: 100; transition: width .12s linear; pointer-events: none; box-shadow: 0 0 12px var(--theme-primary, #10b981); } /* TOAST con motion — entra deslizando + bounce */ #toast { animation: toastIn .4s cubic-bezier(.34,1.56,.64,1); } @keyframes toastIn { from { transform: translateY(-100%) scale(.92); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* HEADER: scroll-state — header se reduce y agrega blur al hacer scroll */ header#app-header { transition: padding .3s ease, background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; } /* CATEGORY chips: pulse al click */ @keyframes chipPulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); } 100% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); } } .cat-chip:active { animation: chipPulse .5s ease-out; } /* BUTTON: shimmer al hover en CTAs principales */ button[onclick*="checkout"], #btn-checkout, .cta-shimmer { position: relative; overflow: hidden; } button[onclick*="checkout"]::before, #btn-checkout::before, .cta-shimmer::before { content: ''; position: absolute; top: 0; left: -120%; width: 80%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition: left .8s ease; pointer-events: none; } button[onclick*="checkout"]:hover::before, #btn-checkout:hover::before, .cta-shimmer:hover::before { left: 130%; } /* PRICE: número del precio en card cambia con bounce sutil al filtrar */ .product-card .price-amount { transition: transform .3s cubic-bezier(.34,1.56,.64,1); } /* IMAGE zoom-on-hover refinado (ya existía, ahora con duración mayor) */ [data-theme] .product-card .media-cover { transition: transform .8s cubic-bezier(.2,.8,.2,1); } /* FLOATING SHAPES decorativas — opt-in via data-theme="kids-fun" o "tropical-vibes" */ [data-theme="kids-fun"] body::after, [data-theme="tropical-vibes"] body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 8% 80%, var(--theme-primary)20 0, transparent 18%), radial-gradient(circle at 92% 12%, var(--theme-accent)25 0, transparent 16%), radial-gradient(circle at 75% 75%, var(--theme-primary-dark)18 0, transparent 14%); animation: floatShapes 18s ease-in-out infinite alternate; } @keyframes floatShapes { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(2%, -1%) rotate(2deg); } 100% { transform: translate(-1%, 2%) rotate(-2deg); } } /* RESPETA prefers-reduced-motion para todo lo de motion globales */ @media (prefers-reduced-motion: reduce) { .scroll-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .cart-bump { animation: none !important; } #scroll-progress-bar { display: none !important; } body::after { animation: none !important; } } body { font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; } @keyframes spin { to { transform: rotate(360deg); } } /* Ocultar Scrollbars */ .hide-scroll::-webkit-scrollbar { display: none; } .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; } /* Slider Snap */ .slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .slider-item { min-width: 100%; width: 100%; flex-shrink: 0; scroll-snap-align: center; position: relative; } .media-cover { width: 100%; height: 100%; object-fit: cover; } .media-contain { width: 100%; height: 100%; object-fit: contain; background: #f9fafb; } /* Animaciones */ @keyframes flashPrice { 0% { transform:scale(1.06); color:#059669; } 100% { transform:scale(1);} } .price-flash { animation: flashPrice .4s ease-out; } /* Estilo para la barra de scroll visible y elegante */ .custom-scroll::-webkit-scrollbar { width: 6px; /* Grosor de la barra vertical */ } .custom-scroll::-webkit-scrollbar-track { background: #f1f1f1; /* Color del fondo del carril */ border-radius: 10px; } .custom-scroll::-webkit-scrollbar-thumb { background: #c1c1c1; /* Color de la barra que se mueve */ border-radius: 10px; transition: background 0.3s; } .custom-scroll::-webkit-scrollbar-thumb:hover { background: #10b981; /* Color primario (verde) al pasar el mouse */ } /* Asegurar que el contenedor tenga el scroll activo */ .custom-scroll { scrollbar-width: thin; /* Para Firefox */ scrollbar-color: #c1c1c1 #f1f1f1; /* Para Firefox */ } /* Badges Pill Style */ .badge-pill { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 9999px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; white-space: nowrap; } /* Badge Aesthetic (Modal) */ .badge-aesthetic { box-shadow: 0 2px 6px rgba(0,0,0,0.08); border: 1px solid transparent; padding: 5px 12px; font-size: 0.7rem; } /* Badge Mini (Card) */ .badge-mini { font-size: 0.55rem; padding: 3px 6px; line-height: 1; border-radius: 4px; font-weight: 800; letter-spacing: 0.5px; } /* Tags Seleccionables */ .tag-selectable { cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; } .tag-selectable:hover { transform: translateY(-1px); } .tag-selectable.active { background-color: #111827; color: white; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } /* Estilos para Selección de Decoración */ .deco-card { cursor: pointer; transition: all 0.2s; border: 2px solid transparent; } .deco-card:hover { transform: translateY(-2px); } .deco-card.selected { border-color: #10b981; /* Primary Green */ background-color: #ecfdf5; } .deco-card.selected .check-icon { opacity: 1; transform: scale(1); } /* Transiciones Modal */ .modal-enter { transform: translateX(100%); } .modal-exit { transform: translateX(100%); } /* Background Image Support CORREGIDO */ body.has-bg-image::before{ content:""; position: fixed; inset:0; background-image: var(--bg-img); background-size: cover; background-position: center; background-repeat: no-repeat; z-index:-2; } body.has-bg-image::after{ content:""; position: fixed; inset:0; z-index:-1; background-color: var(--bg-overlay); } /* Rich Text (Saltos de linea) */ .rich-text { white-space: pre-line; } /* Inputs number clean */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* ══ GEMINI AGENT — estilos modernos ══ */ /* Botón flotante */ .gemini-btn { position: relative; animation: gemini-float 3.5s ease-in-out infinite; transition: transform .2s, box-shadow .2s; } .gemini-btn:hover { animation-play-state: paused; transform: scale(1.12) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.25) !important; } @keyframes gemini-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } } /* Anillo de pulso */ .gemini-btn::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2.5px solid var(--gemini-color, #8B5CF6); opacity: 0; animation: gemini-pulse 2.8s ease-out infinite; pointer-events: none; } @keyframes gemini-pulse { 0% { opacity: 0.65; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } } /* Ojos del robot */ .robot-eye { animation: robot-blink 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .robot-eye-r { animation-delay: 0.1s; } @keyframes robot-blink { 0%, 85%, 100% { transform: scaleY(1); } 90% { transform: scaleY(0.07); } } /* Burbuja de invitación */ .gemini-invite-bubble { background: white; border-radius: 18px 18px 4px 18px; padding: 10px 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.14); max-width: 215px; font-size: 0.82rem; color: #1f2937; line-height: 1.4; pointer-events: auto; animation: bubble-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; transform-origin: bottom right; } @keyframes bubble-pop { from { opacity: 0; transform: scale(0.7) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .gemini-invite-bubble.hiding { animation: bubble-hide 0.22s ease-in forwards; } @keyframes bubble-hide { to { opacity: 0; transform: scale(0.85) translateY(4px); } } /* Chips de sugerencia */ .gemini-chip { display: inline-block; cursor: pointer; font-size: 0.7rem; font-weight: 600; padding: 4px 10px; border-radius: 99px; border: 1.5px solid currentColor; white-space: nowrap; transition: opacity .15s; } .gemini-chip:hover { opacity: 0.75; } .chat-bubble { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 0.85rem; line-height: 1.4; margin-bottom: 8px; position: relative; } .chat-bubble.bot { background: white; color: #374151; border: 1px solid #e5e7eb; border-bottom-left-radius: 2px; } .chat-bubble.user { color: white; align-self: flex-end; border-bottom-right-radius: 2px; margin-left: auto; } /* Loading dots */ .typing-indicator span { display: inline-block; width: 4px; height: 4px; background-color: #ccc; border-radius: 50%; animation: typing 1s infinite; margin: 0 1px; } .typing-indicator span:nth-child(2) { animation-delay: 0.2s; } .typing-indicator span:nth-child(3) { animation-delay: 0.4s; } @keyframes typing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* ── AI action buttons ── */ .ai-act-btn { display:inline-flex;align-items:center;gap:4px;margin:4px 3px 0 0;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:opacity .15s; } .ai-act-btn:hover { opacity:.82; } .ai-cart-btn { background:#10b981;color:white; } .ai-wa-btn { background:#25D366;color:white; } .ai-nequi-btn { background:#8B5CF6;color:white; } .ai-link { color:#10b981;text-decoration:underline;font-weight:500; } /* ── Categorías por imagen ── */ #category-images-strip { scrollbar-width: none; } #category-images-strip::-webkit-scrollbar { display: none; } .cat-img-card { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 2px solid transparent; border-radius: 14px; padding: 6px 10px; background: #fff; cursor: pointer; flex-shrink: 0; transition: border-color 0.15s, transform 0.1s; min-width: 72px; max-width: 90px; } .cat-img-card:hover { border-color: #d1fae5; transform: translateY(-1px); } .cat-img-card.active { border-color: #10b981; background: #f0fdf4; } .cat-img-thumb { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: #f3f4f6; display: flex; align-items: center; justify-content: center; } .cat-img-thumb img { width: 100%; height: 100%; object-fit: cover; } .cat-img-card span { font-size: 0.65rem; font-weight: 700; text-align: center; color: #374151; line-height: 1.2; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cat-img-card.active span { color: #065f46; } /* Acordeones admin (panel Funciones) */ details summary { list-style: none; } details summary::-webkit-details-marker { display: none; } .details-chevron { transition: transform 0.2s ease; } details[open] .details-chevron { transform: rotate(180deg); } /* Modal de producto — imagen */ .detail-slider-img { aspect-ratio: 3/4; min-height: 260px; max-height: 52vh; } @media (min-width: 768px) { .detail-slider-img { aspect-ratio: auto; max-height: none; height: 100%; min-height: 400px; } #modal-panel { min-height: 520px; } }