:root[data-theme="light"] { --bg: #f5f5f5; --surface: #ebebee; --fg: var(--black); --mut: #4f4a60; --line: #dcdbe2; --tint: #ebffef; --btn: var(--black); --btnfg: #fff; --err: #c42d00; color-scheme: light; }
:root[data-theme="dark"] { --bg: var(--black); --surface: #26242f; --fg: #fff; --mut: #b4b0c3; --line: #3a3746; --tint: #232a26; --btn: var(--a1l); --btnfg: var(--black); --err: var(--a4l); color-scheme: dark; }

/* Interruptor cuadrado de claro/oscuro, tipo ON/OFF */
.interruptor { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.interruptor .riel { position: relative; width: 58px; height: 28px; border: 2px solid currentColor; display: block; }
.interruptor .riel i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: currentColor; transition: left .2s cubic-bezier(.7, 0, .2, 1); }
.interruptor .riel b { position: absolute; top: 0; bottom: 0; right: 5px; display: grid; place-items: center; font-size: 11px; }
.interruptor[aria-checked="true"] .riel i { left: 32px; }
.interruptor[aria-checked="true"] .riel b { right: auto; left: 5px; }
.interruptor:focus-visible { outline: 3px solid var(--a3); outline-offset: 3px; }

/* Menú de arriba, igual en todo el sitio */
.menu { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: clamp(14px, 3vw, 44px); padding: 12px clamp(16px, 3.2vw, 36px); background: var(--bg); color: var(--fg); border-bottom: 2px solid var(--fg); }
.menu .marca { display: flex; align-items: center; gap: 10px; height: 26px; text-decoration: none; flex: none; color: inherit; }
.menu .marca .logo { display: block; height: 100%; width: auto; }
.menu .marca .logo .o { transform-box: fill-box; transform-origin: center; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }
.menu .marca:hover .logo .o { transform: rotate(45deg); }
.menu .marca small { font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; background: var(--fg); color: var(--bg); padding: 4px 16px; clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%); }
.menu nav { display: flex; gap: clamp(12px, 2.4vw, 34px); flex: 1; flex-wrap: wrap; }
.menu nav a { font-weight: 800; font-variation-settings: "wdth" 75; text-transform: uppercase; font-size: clamp(20px, 2.3vw, 34px); letter-spacing: -.04em; text-decoration: none; line-height: 1; color: inherit; }
.menu nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .12em; }
.menu .yo { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 800; }
.menu .yo a { text-decoration: none; color: inherit; }
.menu .pal { display: inline-block; white-space: nowrap; }
.menu .l { display: inline-block; overflow: hidden; height: 1.5em; line-height: 1.5; margin: -.32em 0; vertical-align: top; }
.menu .l b { display: block; height: 1.5em; font-weight: inherit; transition: transform .5s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(var(--n) * 16ms); }
.menu a:hover > span > .pal .l b { transform: translateY(-100%); }
@media (max-width: 720px) { .menu { flex-wrap: wrap; } .menu nav { order: 3; flex-basis: 100%; } }