/* Interruptor dentro del menú de ajustes */
.menu-interruptor {
    margin-left: auto;
    flex-shrink: 0;
    width: 38px;
    height: 22px;
    border-radius: 12px;
    background: var(--linea-oscura);
    position: relative;
    transition: background 0.25s ease;
}

.menu-interruptor::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s ease;
}

.menu-interruptor.on { background: var(--morado); }
.menu-interruptor.on::after { transform: translateX(16px); }

/* Apagado total de animaciones y transiciones */
html.sin-animaciones *,
html.sin-animaciones *::before,
html.sin-animaciones *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* Elementos que empiezan invisibles y dependían de una animación para verse */
html.sin-animaciones .th-frase span,
html.sin-animaciones .pu-lampara-pos,
html.sin-animaciones .pu-saltar,
html.sin-animaciones .pu-pista { opacity: 1 !important; transform: none !important; filter: none !important; }

html.sin-animaciones .pu-saltar { translate: -50% 0; }
html.sin-animaciones .pu-panel.visible { opacity: 1 !important; filter: none !important; transform: translateX(-50%) !important; }

/* Lámpara encendida sin parpadeo */
html.sin-animaciones .puerta.encendida .pu-halo,
html.sin-animaciones .puerta.encendida .pu-cono,
html.sin-animaciones .puerta.encendida .pu-brillo { opacity: 1 !important; }
html.sin-animaciones .puerta.encendida .pu-boca { fill: #f3eeff; }
html.sin-animaciones .puerta.encendida .pu-bombilla { fill: #ffffff; }

/* Checks que se dibujan con animación */
html.sin-animaciones .check-grande circle,
html.sin-animaciones .check-grande path,
html.sin-animaciones .pu-ok circle,
html.sin-animaciones .pu-ok path { stroke-dashoffset: 0 !important; }

/* Frases del hero: se queda fija la primera */
html.sin-animaciones .frase { opacity: 0 !important; }
html.sin-animaciones .frase-1 { opacity: 1 !important; }
html.sin-animaciones .frase span { opacity: 1 !important; transform: none !important; }