/* ========================================================================= Estudio Valiant — tema oscuro Solo redefine las variables de :root. Ni una regla de maquetación: el sitio entero se repinta desde aquí. Se activa con el atributo data-tema="oscuro" en , que pone el conmutador del menú lateral y recuerda localStorage. ========================================================================= */ html[data-tema="oscuro"] { color-scheme: dark; /* Base */ --bg: #0a0c10; --fg: #f2f3f5; --muted: #8d95a3; --border: #2c3342; --card: #12161f; --accent: #6c8cf5; --accent-fg: #070910; /* Líneas y separadores */ --line: rgba(255, 255, 255, 0.14); --line-soft: rgba(255, 255, 255, 0.11); --line-faint: rgba(255, 255, 255, 0.08); /* Texto en distintas intensidades */ --fg-soft: rgba(206, 212, 224, 0.95); --fg-muted: rgba(242, 243, 245, 0.78); --fg-quiet: rgba(242, 243, 245, 0.9); --dim: rgba(141, 149, 163, 0.55); --dim-strong: rgba(141, 149, 163, 0.75); --dimmer: rgba(141, 149, 163, 0.35); --dot-hover: rgba(242, 243, 245, 0.7); --btn-line: rgba(255, 255, 255, 0.22); /* Barras de navegación translúcidas */ --rail-bg: rgba(10, 12, 16, 0.8); --bar-bg: rgba(10, 12, 16, 0.94); /* Fichas del panel split-flap */ --tile-bg: #1a2030; --tile-fg: #e8ebf2; --tile-seam: rgba(0, 0, 0, 0.45); /* Acento en sus distintas diluciones */ --accent-wash: rgba(108, 140, 245, 0.1); --accent-wash-soft: rgba(108, 140, 245, 0.07); --accent-soft: rgba(108, 140, 245, 0.25); --accent-line: rgba(108, 140, 245, 0.6); --accent-glow: rgba(108, 140, 245, 0.2); --accent-ghost: rgba(108, 140, 245, 0.16); --accent-stroke: rgba(108, 140, 245, 0.85); --cursor-ring: rgba(108, 140, 245, 0.5); --cursor-ring-strong: rgba(108, 140, 245, 0.85); /* Barra de desplazamiento */ --scroll-track: #12161f; --scroll-thumb: #2c3342; --scroll-thumb-hover: #3d465a; /* El grano se nota menos sobre oscuro, así que sube un poco */ --noise: 0.05; /* El logotipo es azul marino: sobre fondo oscuro hay que aclararlo */ --logo-filter: brightness(0) invert(1); /* Telón: un azul muy oscuro en vez del acento, que a pantalla completa sobre un sitio oscuro deslumbra */ --curtain-bg: #0f1729; --curtain-fg: #eaeefb; } /* ====================== Las ilustraciones de los sectores ====================== Mismo dibujo, colores reajustados: fondos apagados y acentos más vivos, que es lo que pide un fondo oscuro. */ html[data-tema="oscuro"] .sector__svg--hotel { --c1: #0a1327; --c2: #ffbc63; --c3: #3f8f89; --c4: #172140; --c5: #2a1f38; --c6: #1d2f57; } html[data-tema="oscuro"] .sector__svg--obra { --c1: #a8bce2; --c2: #ff8f45; --c3: #262e3e; --c4: #10162a; --c5: #ffd166; } html[data-tema="oscuro"] .sector__svg--yoga { --c1: #cfd9f4; --c2: #d97b55; --c3: #5aa878; --c4: #141a2e; --c5: #241b2c; }