/* ══════════════════════════════════════════════════════ MENÚ DULCE — chilita.mia v1 (dark chocolate premium) Overrides que se activan cuando [data-mode="chocolate"] está en el . No afectan al tema salado. ══════════════════════════════════════════════════════ */ /* ── 1. Tokens MSP override — dark chocolate ─────────────── */ [data-mode="chocolate"] { --msp-bg: #0f0603; /* negro cacao profundo */ --msp-card: #1a0904; /* chocolate 85% */ --msp-chamoy: #c8a15a; /* ← reutilizar token: ahora = caramelo */ --msp-mango: #c8a15a; /* caramelo dorado */ --msp-chile: #d4a476; /* naranja caramelo suave */ --msp-cream: #f0e0c8; /* crema cálida */ --msp-radius: 20px; } /* ── 2. Page-level background ───────────────────────────── */ [data-mode="chocolate"] html, [data-mode="chocolate"] body { background: #0f0603 !important; } /* ── 3. Hero → sección menú: gradient de salida ──────────── */ [data-mode="chocolate"] .hero::after { background: linear-gradient(to bottom, transparent, #0f0603) !important; } /* ── 4. Separador chamoy → ocultar; choco → mostrar ──────── */ [data-mode="chocolate"] .chamoy-separator { opacity: 0 !important; pointer-events: none !important; height: 0 !important; overflow: hidden !important; } [data-mode="chocolate"] .choco-separator { display: block; } /* ── 5. Custom cursor — caramel en vez de chamoy ─────────── */ [data-mode="chocolate"] #msp-cursor { background: #c8a15a !important; } [data-mode="chocolate"] #msp-cursor.is-product { background: rgba(200, 161, 90, 0.85) !important; border-color: rgba(200, 161, 90, 0.4) !important; } /* is-cta: caramel en vez de WhatsApp verde */ [data-mode="chocolate"] #msp-cursor.is-cta { background: linear-gradient(135deg, #c8a15a, #8b6030) !important; } /* ── 6. Sección menú — .msp usa var(--msp-bg) → ok ─────── */ /* Ruido de fondo cambia a tonos cacao */ [data-mode="chocolate"] .msp::before { /* re-override el pseudo element noise overlay */ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.028; } /* Radial glow — chocolate en lugar de chamoy */ [data-mode="chocolate"] .msp::after { background: radial-gradient(ellipse, rgba(100,50,10,0.09) 0%, transparent 70%) !important; } /* ── 7. Header section label + regla ────────────────────── */ [data-mode="chocolate"] .msp__label { color: var(--msp-mango); } [data-mode="chocolate"] .msp__header-rule::before { background: linear-gradient(90deg, transparent, rgba(200,161,90,0.5)) !important; } [data-mode="chocolate"] .msp__header-rule::after { background: linear-gradient(90deg, rgba(200,161,90,0.5), transparent) !important; } /* ── 8. Featured article ────────────────────────────────── */ [data-mode="chocolate"] .msp__featured { background: #1a0904; } [data-mode="chocolate"] .msp__featured::after { background: radial-gradient(ellipse 55% 50% at 50% 60%, rgba(100,50,10,0.18) 0%, transparent 70%) !important; } /* Badge estrella */ [data-mode="chocolate"] .msp__badge { background: rgba(200,161,90,0.12) !important; color: var(--msp-mango) !important; border-color: rgba(200,161,90,0.25) !important; } [data-mode="chocolate"] .msp__badge--nuevo { background: rgba(200,161,90,0.12) !important; color: var(--msp-mango) !important; border-color: rgba(200,161,90,0.25) !important; } /* Tags de ingredientes */ [data-mode="chocolate"] .msp__tags span { background: rgba(200,161,90,0.08); color: rgba(240,224,200,0.72); border: 1px solid rgba(200,161,90,0.15); } /* ── 9. CTA buttons — caramelo en vez de WhatsApp verde ─── */ [data-mode="chocolate"] .msp__cta { background: linear-gradient(135deg, #c8a15a, #8b6030) !important; color: #0f0603 !important; font-weight: 700 !important; } [data-mode="chocolate"] .msp__cta:hover { background: linear-gradient(135deg, #d4b06a, #9b6f3a) !important; } [data-mode="chocolate"] .msp__cta::before { background: radial-gradient(circle at var(--cx,50%) var(--cy,50%), rgba(255,255,255,0.18), transparent 60%) !important; } [data-mode="chocolate"] .msp__card-cta { background: linear-gradient(135deg, #c8a15a, #8b6030) !important; color: #0f0603 !important; } [data-mode="chocolate"] .msp__card-cta:hover { background: linear-gradient(135deg, #d4b06a, #9b6f3a) !important; } /* ── 10. Cards ──────────────────────────────────────────── */ [data-mode="chocolate"] .msp__card { background: var(--msp-card) !important; } [data-mode="chocolate"] .msp__card::before { background: #100702 !important; } [data-mode="chocolate"] .msp__card-tag { background: rgba(200,161,90,0.1) !important; color: var(--msp-mango) !important; border-color: rgba(200,161,90,0.2) !important; } [data-mode="chocolate"] .msp__card-price { color: var(--msp-cream) !important; } [data-mode="chocolate"] .msp__card-price small { color: rgba(240,224,200,0.42) !important; } [data-mode="chocolate"] .msp__card-name { color: var(--msp-cream) !important; } [data-mode="chocolate"] .msp__card-desc { color: rgba(240,224,200,0.62) !important; } /* Footer del card */ [data-mode="chocolate"] .msp__card-footer { border-top-color: rgba(200,161,90,0.08) !important; } /* ── 11. Featured name + desc ───────────────────────────── */ [data-mode="chocolate"] .msp__featured-name { color: var(--msp-cream) !important; } [data-mode="chocolate"] .msp__featured-desc { color: rgba(240,224,200,0.68) !important; } [data-mode="chocolate"] .msp__price-amount { color: var(--msp-mango) !important; } [data-mode="chocolate"] .msp__price-unit { color: rgba(240,224,200,0.45) !important; } /* ── 12. Bottom CTA strip ───────────────────────────────── */ [data-mode="chocolate"] .msp__bottom { border-top-color: rgba(200,161,90,0.08) !important; } [data-mode="chocolate"] .msp__bottom-text { color: rgba(240,224,200,0.55) !important; } [data-mode="chocolate"] .msp__bottom-cta { background: linear-gradient(135deg, #c8a15a, #8b6030) !important; color: #0f0603 !important; } /* ── 13. Sección IG feed ────────────────────────────────── */ [data-mode="chocolate"] #ig-feed { background: #0a0401 !important; } [data-mode="chocolate"] #ig-feed h2, [data-mode="chocolate"] #ig-feed .section-title { color: var(--msp-cream) !important; } [data-mode="chocolate"] #ig-feed .ig-handle { color: var(--msp-mango) !important; } /* ── 14. Testimoniales ──────────────────────────────────── */ [data-mode="chocolate"] #testimoniales { background: #0a0401 !important; } [data-mode="chocolate"] #testimoniales .section-title, [data-mode="chocolate"] #testimoniales h2 { color: var(--msp-cream) !important; } [data-mode="chocolate"] #testimoniales .testimonial-card, [data-mode="chocolate"] #testimoniales .review-card { background: #1a0904 !important; border-color: rgba(200,161,90,0.1) !important; } /* ── 15. Footer ─────────────────────────────────────────── */ [data-mode="chocolate"] footer { background: #060201 !important; border-top-color: rgba(200,161,90,0.08) !important; } [data-mode="chocolate"] footer a { color: var(--msp-mango) !important; } [data-mode="chocolate"] footer p, [data-mode="chocolate"] footer span { color: rgba(240,224,200,0.45) !important; } /* ── 16. Product images — fotos reales del menú dulce ──── */ /* El wrap llena absolutamente el contenedor padre (que ya tiene overflow:hidden) */ [data-mode="chocolate"] .msp__featured-img .mdp__img-wrap, [data-mode="chocolate"] .msp__card-img .mdp__img-wrap { position: absolute; inset: 0; width: 100%; height: 100%; } /* Backgrounds base (cargando / sin foto) */ [data-mode="chocolate"] .mdp__featured-bg { background: #0f0603; } [data-mode="chocolate"] .mdp__card-bg-pretzel { background: #0a0402; } [data-mode="chocolate"] .mdp__card-bg-galleta { background: #0f0603; } [data-mode="chocolate"] .mdp__card-bg-fresa { background: #0d0402; } /* Foto real — llena el contenedor sin bordes */ .mdp__product-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.5s ease; } .msp__featured:hover .mdp__product-photo, .msp__card:hover .mdp__product-photo { transform: scale(1.04); } /* ── 17. Título/subtítulo sección header ────────────────── */ [data-mode="chocolate"] #menu-dulce .msp__title { color: var(--msp-cream); } [data-mode="chocolate"] #menu-dulce .msp__title em { color: var(--msp-mango); } [data-mode="chocolate"] #menu-dulce .msp__subtitle { color: rgba(240,224,200,0.52); } /* ── 18. Testimoniales — CTA WhatsApp → caramelo en dulce ── */ [data-mode="chocolate"] .testi__cta { background: linear-gradient(135deg, #c8a15a, #8b6030) !important; color: #0f0603 !important; } [data-mode="chocolate"] .testi__cta:hover { background: linear-gradient(135deg, #d4b06a, #9b6f3a) !important; opacity: 1 !important; } [data-mode="chocolate"] .testi__cta-text { color: rgba(240,224,200,0.62) !important; } [data-mode="chocolate"] .testi__cta-wrap { border-top-color: rgba(200,161,90,0.08) !important; } /* msp__bottom inside #menu-dulce WhatsApp strip */ [data-mode="chocolate"] #menu-dulce .msp__bottom-cta { background: linear-gradient(135deg, #c8a15a, #8b6030) !important; color: #0f0603 !important; } /* ── 20. Scrollbar ──────────────────────────────────────── */ [data-mode="chocolate"] ::-webkit-scrollbar-thumb { background: #c8a15a !important; } [data-mode="chocolate"] ::-webkit-scrollbar-track { background: #0f0603 !important; }