/* ===================================================================== TEMA — variables de color, claro y oscuro --------------------------------------------------------------------- Se carga PRIMERA en todas las páginas. Antes estas variables estaban duplicadas en style.css y en producto.css, y el modo oscuro solo existía en style.css: por eso el botón funcionaba en el home y no hacía nada en las landings. La clase va en y no en a propósito: js/tema.js corre en el , antes de que exista el , así el tema guardado se aplica sin un destello blanco al cargar. ===================================================================== */ :root { --bg: #FFFFFF; --bg2: #F9F8F6; --text: #0A0A0A; --text2: #444444; --gold: #C9A84C; --gold-dark: #A07830; --gold-light: #E8D5A3; --border: #E0E0E0; --card-bg: #FFFFFF; --shadow: rgba(0, 0, 0, 0.08); --overlay: rgba(10, 10, 10, 0.55); --wa-green: #1a6b3a; --mp-blue: #3d3df5; --ig-grad: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); --carrinho: #F7CA45; --carrinho-hover: #F0B90B; --comprar: #F59B31; --comprar-hover: #E8871E; --transition: 0.45s cubic-bezier(0.4, 0, 0.2, 1); } html.inverted { --bg: #0A0A0A; --bg2: #161616; --text: #F5F0E8; --text2: #B8A890; --gold: #E8C46A; --gold-dark: #C9A84C; --gold-light: #3D2E10; --border: #2A2A2A; --card-bg: #1A1A1A; --shadow: rgba(0, 0, 0, 0.4); --overlay: rgba(0, 0, 0, 0.7); } /* El botón de tema y la fila de acciones del header. Vivían en style.css, que solo carga el home; por eso en las landings el botón no existía. */ .toggle-btn { background: none; border: 1.5px solid var(--gold); width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.15rem; transition: all 0.3s; flex-shrink: 0; } .toggle-btn:hover { background: var(--gold); color: var(--bg); } .header-acoes { display: flex; align-items: center; gap: 1.1rem; } .header-acoes .carrinho-btn { font-size: 1.4rem; color: var(--gold); line-height: 1; }