/* =========================================================== Vitala · Temas de diseño (Fase 2) Se activan con ?tema=1|2|3 (atributo data-tema en ). Tema 1 = diseño por defecto (definido en styles.css) → sin overrides. Tema 2 = "Studio Cálido" (claro, boutique) · inspirado en Bala. Tema 3 = "Retro Sport" (oscuro, 80s) · alternativa creativa propia. =========================================================== */ /* ---------- Selector de tema (flotante, esquina inferior izquierda) ---------- */ .theme-switch{ position:fixed; left:14px; bottom:14px; z-index:70; display:flex; align-items:center; gap:.4rem; background:rgba(0,0,0,.55); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:.35rem .6rem; font-size:.8rem; font-weight:700; color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.35); } .theme-switch span{ opacity:.75; } .theme-switch a{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.28); color:#fff; text-decoration:none; line-height:1; } .theme-switch a:hover{ border-color:#fff; } html[data-tema="1"] .theme-switch a[data-t="1"], html[data-tema="2"] .theme-switch a[data-t="2"], html[data-tema="3"] .theme-switch a[data-t="3"]{ background:var(--accent); color:#111; border-color:var(--accent); } /* =========================================================== TEMA 2 · "Studio Cálido" (claro / boutique / wellness) Paleta: crema + terracota coral + verde salvia Tipografía: cuerpo sans, títulos serif (Georgia) Mood: cálido, minimal, boutique, natural =========================================================== */ html[data-tema="2"]{ --bg: #faf6f1; --bg-2: #f2ebe1; --surface: #ffffff; --surface-2: #f6efe6; --line: #e6dccd; --text: #26201b; --muted: #8a7d6e; --accent: #e2674c; /* terracota coral */ --accent-2: #6f9a6a; /* verde salvia */ --shadow: 0 18px 45px rgba(120,90,70,.16); --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; } html[data-tema="2"] h1, html[data-tema="2"] h2, html[data-tema="2"] .brand{ font-family:Georgia, "Times New Roman", serif; letter-spacing:-.3px; } /* chrome que estaba en tonos oscuros → aclarar */ html[data-tema="2"] .site-header{ background:rgba(255,255,255,.85); } html[data-tema="2"] .hero{ background: radial-gradient(900px 500px at 80% -10%, rgba(226,103,76,.12), transparent 60%), radial-gradient(700px 500px at 10% 110%, rgba(111,154,106,.12), transparent 55%), var(--bg); } html[data-tema="2"] .benefit .ico{ background:rgba(226,103,76,.12); } html[data-tema="2"] .cta-band{ background:linear-gradient(120deg,rgba(226,103,76,.12),rgba(111,154,106,.1)),var(--surface); } html[data-tema="2"] .variant-opts button.active{ background:rgba(226,103,76,.12); } /* texto sobre acento: coral → texto blanco para buen contraste */ html[data-tema="2"] .btn-primary, html[data-tema="2"] .card-tag, html[data-tema="2"] .cart-count, html[data-tema="2"] .hero-badge, html[data-tema="2"] .toast{ color:#ffffff; } html[data-tema="2"] .topbar{ color:#ffffff; } /* =========================================================== TEMA 3 · "Retro Sport" (oscuro / vibrante / 80s) Paleta: índigo profundo + magenta + cyan Tipografía: Trebuchet MS (deportiva), títulos en mayúsculas Mood: retro, energético, sintético, nocturno =========================================================== */ html[data-tema="3"]{ --bg: #17122e; --bg-2: #1f1840; --surface: #241c4a; --surface-2: #2e2558; --line: #3a2f6b; --text: #f2edff; --muted: #a99fce; --accent: #ff3d81; /* magenta neón */ --accent-2: #21e6ff; /* cyan neón */ --shadow: 0 18px 50px rgba(0,0,0,.55); --font: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; } html[data-tema="3"] h1, html[data-tema="3"] h2{ text-transform:uppercase; letter-spacing:.5px; } html[data-tema="3"] .hero{ background: radial-gradient(900px 500px at 80% -10%, rgba(255,61,129,.22), transparent 60%), radial-gradient(700px 500px at 10% 110%, rgba(33,230,255,.16), transparent 55%), var(--bg); } html[data-tema="3"] .benefit .ico{ background:rgba(33,230,255,.14); } html[data-tema="3"] .cta-band{ background:linear-gradient(120deg,rgba(255,61,129,.16),rgba(33,230,255,.12)),var(--surface); } html[data-tema="3"] .variant-opts button.active{ background:rgba(255,61,129,.14); }