/* =========================================================== TurboX · 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 = "Garage Limpio" (claro, minimal) · inspirado en Car Care Co. Tema 3 = "Cyber Tuning" (oscuro, neón) · 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 · "Garage Limpio" (claro / minimal / profesional) Paleta: gris claro + azul eléctrico + naranja de acento Tipografía: sans limpia (Segoe UI), títulos con más peso Mood: limpio, confiable, profesional, ordenado =========================================================== */ html[data-tema="2"]{ --bg: #f4f6f9; --bg-2: #e9eef4; --surface: #ffffff; --surface-2: #eef2f7; --line: #d7dfe8; --text: #16202b; --muted: #63707e; --accent: #0a66ff; /* azul eléctrico */ --accent-2: #ff6a2b; /* naranja de acento */ --shadow: 0 18px 45px rgba(30,60,110,.14); --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{ letter-spacing:-1px; font-weight:800; } html[data-tema="2"] .site-header{ background:rgba(255,255,255,.9); } html[data-tema="2"] .hero{ background: radial-gradient(900px 500px at 80% -10%, rgba(10,102,255,.10), transparent 60%), radial-gradient(700px 500px at 10% 110%, rgba(255,106,43,.10), transparent 55%), var(--bg); } html[data-tema="2"] .benefit .ico{ background:rgba(10,102,255,.1); } html[data-tema="2"] .cta-band{ background:linear-gradient(120deg,rgba(10,102,255,.1),rgba(255,106,43,.08)),var(--surface); } html[data-tema="2"] .variant-opts button.active{ background:rgba(10,102,255,.1); } /* texto sobre acento: azul → texto blanco */ 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 · "Cyber Tuning" (oscuro / neón / futurista) Paleta: negro violáceo + magenta neón + verde ácido Tipografía: Trebuchet MS, títulos en mayúsculas Mood: futurista, agresivo, tuning, nocturno =========================================================== */ html[data-tema="3"]{ --bg: #0a0610; --bg-2: #120a1c; --surface: #170d24; --surface-2: #1e1130; --line: #2c1c44; --text: #f4ecff; --muted: #a08bc0; --accent: #ff2bd6; /* magenta neón */ --accent-2: #b6ff3d; /* verde ácido */ --shadow: 0 18px 50px rgba(0,0,0,.6); --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,43,214,.22), transparent 60%), radial-gradient(700px 500px at 10% 110%, rgba(182,255,61,.14), transparent 55%), var(--bg); } html[data-tema="3"] .benefit .ico{ background:rgba(182,255,61,.12); } html[data-tema="3"] .cta-band{ background:linear-gradient(120deg,rgba(255,43,214,.16),rgba(182,255,61,.1)),var(--surface); } html[data-tema="3"] .variant-opts button.active{ background:rgba(255,43,214,.14); }