/* ==========================================================================
   LightsOff · los interruptores
   ==========================================================================

   COPIA LITERAL de `extensions/in-room-product-block/assets/lightsoff.css`,
   líneas 543 a 1228. Ni una línea cambiada, a propósito: así re-sincronizar
   es volver a copiar el bloque, no hacer un diff a mano.

   El escaparate cuelga el estado nocturno de `html.lightsoff-noche`. Esta
   web usa `html.noche` para lo suyo, así que `js/sitio.js` pone LAS DOS
   clases a la vez. Es una línea allí en vez de una bifurcación aquí, y deja
   este archivo intacto.

   Lo único que NO se usa aquí es `.lightsoff-boton--esquina`, que es la que
   hace el botón flotante. En la galería van en su sitio, no flotando.

   Si esto se desincroniza, el síntoma es que la web enseña un interruptor
   que el merchant no se va a encontrar — que es peor que no enseñarlo.
   ========================================================================== */

/* --- El interruptor ------------------------------------------------------
   Por encima del velo, porque si no se oscurece él también y el visitante
   pierde de vista lo único con lo que puede volver atrás. */
.lightsoff-boton {
  /* Colores propios y no heredados del tema: en `multiply` el heredado se
     oscurecería con todo lo demás. Aquí hace falta que el contraste aguante
     en los dos estados.

     Van en variables porque el color es un ajuste: cada variante redefine
     estas ocho y nada más. Los valores de aquí son «claro», que es el
     defecto y también la red si llegara una clase de color desconocida. */
  --lo-fondo: #ffffff;
  --lo-tinta: #1b1712;
  --lo-borde: rgba(20, 16, 12, 0.12);
  --lo-carril: rgba(20, 16, 12, 0.14);
  --lo-tecla: #f6f2ea;
  --lo-fondo-n: #241d14;
  --lo-tinta-n: #f3e8d6;
  --lo-borde-n: rgba(255, 205, 130, 0.18);
  --lo-tecla-n: #382b1c;

  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.62rem 1.05rem 0.62rem 0.72rem;

  border: 1px solid var(--lo-borde);
  border-radius: 999px;
  background: var(--lo-fondo);
  color: var(--lo-tinta);

  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 6px rgba(20, 16, 12, 0.08), 0 12px 28px rgba(20, 16, 12, 0.12);
  transition:
    background-color var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1),
    color var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1),
    border-color var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1),
    transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.lightsoff-boton:hover {
  transform: translateY(-1px);
}

.lightsoff-boton:active {
  transform: translateY(0) scale(0.985);
}

.lightsoff-boton:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Flotante. Es donde la gente busca los controles y no compite con el menú
   ni con el aviso de cookies. */
.lightsoff-boton--esquina {
  position: fixed;
  right: clamp(0.9rem, 2.5vw, 1.6rem);
  bottom: clamp(0.9rem, 2.5vw, 1.6rem);
  z-index: 2147483001;
}

/* En la barra del catálogo: más discreto y más nativo, pero se ve menos. */
.lightsoff-barra {
  display: flex;
  justify-content: flex-end;
  padding: 0.9rem clamp(1rem, 4vw, 2.5rem) 0;
}

/* Sin texto no hace falta el hueco de la derecha. */
.lightsoff-boton--minimo {
  padding: 0.62rem;
  gap: 0;
}

/* --- La tecla de pared ---------------------------------------------------
   El botón es la placa; dentro, una tecla que pivota de verdad y un piloto
   localizador — la lucecita que llevan los interruptores para encontrarlos a
   oscuras, aquí haciendo de indicador de estado. Sin texto: una tecla con
   rótulo al lado deja de parecer una tecla. */
.lightsoff-boton--pared {
  width: 3.4rem;
  height: 3.4rem;
  padding: 0.4rem;
  gap: 0;
  border-radius: 9px;
}

.lightsoff-placa {
  display: block;
  width: 100%;
  height: 100%;
  perspective: 320px;
}

.lightsoff-tecla {
  display: grid;
  place-items: end center;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  padding-bottom: 0.28rem;
  background: var(--lo-tecla);
  /* Pivota sobre su eje horizontal, como una tecla real: la sombra cambia
     de lado al bascular, que es lo que vende el gesto. */
  transform: rotateX(8deg);
  box-shadow:
    0 4px 8px -3px rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.35) inset;
  transition:
    transform 200ms cubic-bezier(0.3, 1.5, 0.5, 1),
    background-color var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms ease;
}

html.lightsoff-noche .lightsoff-tecla {
  transform: rotateX(-8deg);
  background: var(--lo-tecla-n);
  box-shadow:
    0 -4px 8px -3px rgba(0, 0, 0, 0.4),
    0 -1px 0 rgba(255, 255, 255, 0.12) inset;
}

.lightsoff-piloto {
  width: 0.8rem;
  height: 3px;
  border-radius: 2px;
  background: var(--lo-carril);
  transition:
    background-color var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1);
}

html.lightsoff-noche .lightsoff-piloto {
  background: #ffd18a;
  box-shadow: 0 0 8px 1.5px rgba(255, 190, 100, 0.85);
}

/* --- La palanca ----------------------------------------------------------
   Industrial y rotunda: el chasquido se oye con los ojos. Bisel redondo y una
   pletina que bascula sobre su base. */
.lightsoff-boton--palanca {
  width: 3.1rem;
  height: 3.9rem;
  padding: 0;
  gap: 0;
  border-radius: 6px;
  place-content: center;
  display: grid;
}

.lightsoff-bisel {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--lo-carril);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) inset;
  perspective: 220px;
}

.lightsoff-bat {
  width: 0.7rem;
  height: 2rem;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(96deg, var(--lo-tecla), var(--lo-carril));
  /* El pivote está abajo, como en una palanca real: la punta describe un
     arco y la base se queda quieta. */
  transform-origin: 50% 88%;
  transform: rotateX(34deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transition:
    transform 210ms cubic-bezier(0.3, 1.7, 0.5, 1),
    background-color var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1);
}

html.lightsoff-noche .lightsoff-bat {
  transform: rotateX(-34deg);
  background: linear-gradient(96deg, #ffd18a, #a8763a);
}

/* --- La cadenita ---------------------------------------------------------
   La única que no se pulsa: se tira. Cuelga del borde superior porque tirar
   de algo pegado al suelo no significa nada.

   Es la más memorable de todas y también la única que hay que aprender: nadie
   ha visto antes una cadena en una web. */
.lightsoff-boton--cadenita {
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

/* La cadena vive arriba, no en la esquina de abajo. Se sobreescribe la
   posición flotante entera. */
.lightsoff-boton--cadenita.lightsoff-boton--esquina {
  top: 0;
  bottom: auto;
  right: clamp(1.2rem, 5vw, 3rem);
}

.lightsoff-cordon {
  width: 2px;
  height: 3.4rem;
  background: repeating-linear-gradient(
    180deg,
    var(--lo-borde) 0 5px,
    transparent 5px 7px
  );
  transform-origin: top center;
  transition: transform 200ms cubic-bezier(0.34, 1.7, 0.5, 1);
}

html.lightsoff-noche .lightsoff-cordon {
  background: repeating-linear-gradient(180deg, #a8865c 0 5px, transparent 5px 7px);
}

.lightsoff-tirador {
  width: 0.95rem;
  height: 1.9rem;
  border-radius: 8px;
  background: linear-gradient(120deg, var(--lo-tecla), var(--lo-carril));
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.32);
  transform-origin: top center;
  transition:
    transform 200ms cubic-bezier(0.34, 1.7, 0.5, 1),
    background-color var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1);
}

html.lightsoff-noche .lightsoff-tirador {
  background: linear-gradient(120deg, #d9bc8c, #6f5836);
}

/* El tirón. La clase la pone y la quita el JavaScript, porque el gesto tiene
   que verse aunque el cambio de luz sea instantáneo. */
.lightsoff-boton--cadenita.lightsoff-tirando .lightsoff-cordon {
  transform: scaleY(1.19);
}

.lightsoff-boton--cadenita.lightsoff-tirando .lightsoff-tirador {
  transform: translateY(0.8rem);
}

/* --- El interruptor de cable --------------------------------------------
   El balancín que lleva el cable de cualquier lámpara de sobremesa. Nadie
   tiene que aprender nada: ya lo ha usado esta mañana. */
.lightsoff-boton--cable {
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.lightsoff-hilo {
  width: 3px;
  height: 1.5rem;
  border-radius: 2px;
  background: var(--lo-carril);
}

.lightsoff-cuerpo {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 4.1rem;
  padding: 0.45rem;
  border-radius: 9px;
  background: var(--lo-fondo);
  border: 1px solid var(--lo-borde);
  box-shadow: 0 6px 15px -6px rgba(0, 0, 0, 0.45);
  perspective: 260px;
  transition:
    background-color var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1),
    border-color var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1);
}

html.lightsoff-noche .lightsoff-cuerpo {
  background: var(--lo-fondo-n);
  border-color: var(--lo-borde-n);
}

.lightsoff-balancin {
  width: 100%;
  height: 2.2rem;
  border-radius: 4px;
  background: var(--lo-tecla);
  transform: rotateX(9deg);
  box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.3);
  transition:
    transform 190ms cubic-bezier(0.3, 1.6, 0.5, 1),
    background-color var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1);
}

html.lightsoff-noche .lightsoff-balancin {
  transform: rotateX(-9deg);
  background: var(--lo-tecla-n);
}

/* --- El regulador --------------------------------------------------------
   Gira en vez de pulsarse. Aquí es binario —dos posiciones— pero el gesto ya
   sugiere que se podría graduar, que es su gracia. */
.lightsoff-boton--regulador {
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.lightsoff-rueda {
  position: relative;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    var(--lo-tecla) 0deg,
    var(--lo-carril) 120deg,
    var(--lo-tecla) 240deg,
    var(--lo-tecla) 360deg
  );
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.35) inset;
  transition:
    rotate 300ms cubic-bezier(0.32, 1.4, 0.5, 1),
    background var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1);
  rotate: 0deg;
}

/* La marca que dice dónde apunta. Sin ella la rueda gira y no se nota. */
.lightsoff-rueda::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.28rem;
  translate: -50% 0;
  width: 3px;
  height: 0.85rem;
  border-radius: 2px;
  background: var(--lo-tinta);
  transition: background-color var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1);
}

html.lightsoff-noche .lightsoff-rueda {
  rotate: 145deg;
  background: conic-gradient(
    from 180deg,
    var(--lo-tecla-n) 0deg,
    #6b532a 120deg,
    var(--lo-tecla-n) 240deg,
    var(--lo-tecla-n) 360deg
  );
}

html.lightsoff-noche .lightsoff-rueda::after {
  background: #ffd18a;
  box-shadow: 0 0 8px 1px rgba(255, 190, 100, 0.8);
}

/* --- El pulsador ---------------------------------------------------------
   Un botón redondo que se hunde y se enciende por dentro. No parece un
   control de web, parece una pieza. */
.lightsoff-boton--pulsador {
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.lightsoff-boton--pulsador:active {
  transform: translateY(2px) scale(0.985);
}

.lightsoff-ojo {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--lo-carril);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45) inset;
  transition:
    background var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1);
}

html.lightsoff-noche .lightsoff-ojo {
  background: radial-gradient(circle, #ffd79a, #f0a63c);
  box-shadow: 0 0 14px 3px rgba(240, 166, 60, 0.85);
}

/* --- La bombilla ---------------------------------------------------------
   Se entiende en cualquier idioma y no hay rótulo que traducir: una bombilla
   apagada pide que la enciendas. */
.lightsoff-boton--bombilla {
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 3.4rem;
  height: 3.9rem;
  padding: 0.4rem 0;
  border-radius: 12px;
}

.lightsoff-vidrio {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 2.2rem;
  border: 2px solid var(--lo-carril);
  border-radius: 50% 50% 46% 46%;
  transition:
    border-color var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1),
    background var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1);
}

/* El filamento: dos trazos en U, que es lo que lo hace legible a 20 px. */
.lightsoff-filamento {
  width: 0.65rem;
  height: 0.75rem;
  border: 2px solid var(--lo-carril);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  transition:
    border-color var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.lightsoff-casquillo {
  width: 0.85rem;
  height: 0.6rem;
  border-radius: 0 0 3px 3px;
  background: repeating-linear-gradient(
    180deg,
    var(--lo-carril) 0 3px,
    transparent 3px 5px
  );
}

html.lightsoff-noche .lightsoff-vidrio {
  border-color: #f0a63c;
  background: radial-gradient(circle, rgba(255, 215, 154, 0.42), rgba(240, 166, 60, 0.1) 70%);
  box-shadow: 0 0 26px 5px rgba(240, 166, 60, 0.42);
}

html.lightsoff-noche .lightsoff-filamento {
  border-color: #ffd79a;
  box-shadow: 0 0 10px 2px rgba(255, 215, 154, 0.9);
}

/* Sin mecha, el texto va centrado. */
.lightsoff-boton--texto {
  padding: 0.62rem 1.1rem;
  gap: 0;
}

html.lightsoff-noche .lightsoff-boton {
  background: var(--lo-fondo-n);
  color: var(--lo-tinta-n);
  border-color: var(--lo-borde-n);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.4),
    0 14px 34px rgba(0, 0, 0, 0.5),
    0 0 30px -6px rgba(255, 191, 105, 0.35);
}

/* --- Los colores del botón ----------------------------------------------
   Tres y elegidos, no un selector libre: cada uno trae los dos estados ya
   medidos para que no haya forma de guardar una combinación ilegible. */

/* Carbón: para temas oscuros donde un botón blanco parece un parche. */
.lightsoff-boton--c-oscuro {
  --lo-fondo: #23201b;
  --lo-tinta: #f2ece1;
  --lo-borde: rgba(255, 255, 255, 0.16);
  --lo-carril: rgba(255, 255, 255, 0.22);
  --lo-tecla: #35302a;
  --lo-fondo-n: #191512;
  --lo-tinta-n: #f3e8d6;
  --lo-borde-n: rgba(255, 205, 130, 0.22);
  --lo-tecla-n: #2b2318;
}

/* Latón: la pieza cara. Para catálogos donde el detalle es el argumento. */
.lightsoff-boton--c-laton {
  --lo-fondo: #a8865c;
  --lo-tinta: #241a0c;
  --lo-borde: rgba(66, 46, 20, 0.4);
  --lo-carril: rgba(36, 26, 12, 0.32);
  --lo-tecla: #c2a276;
  --lo-fondo-n: #453317;
  --lo-tinta-n: #ffd9a0;
  --lo-borde-n: rgba(255, 205, 130, 0.35);
  --lo-tecla-n: #5c451f;
}

/* Brutalista: borde negro grueso y sombra dura sin difuminar. Al pulsar, la
   pieza cae encima de su propia sombra — ese es todo el gesto. Solo para
   tiendas que ya sean ruidosas: se impone al tema en vez de convivir. */
.lightsoff-boton--c-brutal {
  --lo-fondo: #ffe94a;
  --lo-tinta: #000000;
  --lo-borde: #000000;
  --lo-carril: rgba(0, 0, 0, 0.25);
  --lo-tecla: #ffffff;
  --lo-fondo-n: #000000;
  --lo-tinta-n: #ffe94a;
  --lo-borde-n: #ffe94a;
  --lo-tecla-n: #1a1a1a;

  border-width: 3px;
  border-radius: 4px;
  box-shadow: 5px 5px 0 var(--lo-borde);
  transition:
    background-color var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1),
    color var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1),
    border-color var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 90ms ease,
    transform 90ms ease;
}

html.lightsoff-noche .lightsoff-boton--c-brutal {
  box-shadow: 5px 5px 0 var(--lo-borde-n);
}

.lightsoff-boton--c-brutal:active {
  transform: translate(5px, 5px) scale(1);
  box-shadow: 0 0 0 var(--lo-borde);
}

/* Neón: el trazo es fino y todo el peso lo lleva el halo. Apagarlo es
   literalmente apagar un tubo, así que el estado apagado se explica solo. */
.lightsoff-boton--c-neon {
  --lo-fondo: rgba(20, 10, 18, 0.82);
  --lo-tinta: #ffd3e7;
  --lo-borde: #ff5fa8;
  --lo-carril: rgba(255, 95, 168, 0.3);
  --lo-tecla: rgba(255, 95, 168, 0.16);
  --lo-fondo-n: rgba(12, 8, 14, 0.9);
  --lo-tinta-n: #4a3d46;
  --lo-borde-n: #3a2e38;
  --lo-tecla-n: rgba(255, 255, 255, 0.05);

  border-width: 2px;
  text-shadow: 0 0 8px #ff5fa8, 0 0 20px rgba(255, 95, 168, 0.65);
  box-shadow:
    0 0 12px rgba(255, 95, 168, 0.7),
    0 0 30px rgba(255, 95, 168, 0.3),
    0 0 12px rgba(255, 95, 168, 0.45) inset;
}

/* Encendido el tubo brilla; apagado se queda gris. Al revés que el resto de
   acabados, que se iluminan de noche — aquí el botón ES la lámpara. */
html.lightsoff-noche .lightsoff-boton--c-neon {
  text-shadow: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Cristal: no tiene sustancia propia, es un desenfoque de lo que hay detrás.
   Sobre un fondo liso desaparece, así que se le deja un velo mínimo para que
   siga existiendo en los temas planos. */
.lightsoff-boton--c-cristal {
  --lo-fondo: rgba(255, 255, 255, 0.18);
  --lo-tinta: #1b1712;
  --lo-borde: rgba(255, 255, 255, 0.45);
  --lo-carril: rgba(20, 16, 12, 0.16);
  --lo-tecla: rgba(255, 255, 255, 0.35);
  --lo-fondo-n: rgba(255, 255, 255, 0.1);
  --lo-tinta-n: #f3e8d6;
  --lo-borde-n: rgba(255, 255, 255, 0.2);
  --lo-tecla-n: rgba(255, 255, 255, 0.12);

  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 8px 26px -10px rgba(0, 0, 0, 0.45);
}

/* --- La mecha: la pieza que se mueve ------------------------------------ */
.lightsoff-mecha {
  position: relative;
  flex: 0 0 auto;
  width: 2.2rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--lo-carril);
  transition: background-color var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1);
}

html.lightsoff-noche .lightsoff-mecha {
  background: #4a3419;
}

.lightsoff-mecha::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--lo-tinta);
  transition:
    transform var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1),
    background-color var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow var(--lightsoff-duracion, 900ms) cubic-bezier(0.4, 0, 0.2, 1);
}

html.lightsoff-noche .lightsoff-mecha::after {
  transform: translateX(0.95rem);
  background: #ffd18a;
  box-shadow: 0 0 12px 2px rgba(255, 190, 100, 0.75);
}

@media (max-width: 520px) {
  /* En móvil solo la mecha, salvo que el estilo elegido sea justo el de solo
     texto — ahí quitarlo dejaría un botón vacío. La tecla de pared tampoco
     entra: no tiene texto que quitar y el padding es el de su placa. */
  .lightsoff-boton--esquina:not(.lightsoff-boton--texto):not(.lightsoff-boton--pared) {
    padding: 0.62rem;
  }
  .lightsoff-boton--esquina:not(.lightsoff-boton--texto) .lightsoff-texto {
    display: none;
  }
  /* La tecla, un punto más pequeña: en un móvil 54 px son medio pulgar. */
  .lightsoff-boton--pared {
    width: 3rem;
    height: 3rem;
  }
}

/* --- Sin animación si el visitante la ha desactivado -------------------- */
@media (prefers-reduced-motion: reduce) {
  .lightsoff-velo,
  .lightsoff-tinte,
  .lightsoff-marco,
  .lightsoff-boton,
  .lightsoff-mecha,
  .lightsoff-mecha::after,
  .lightsoff-tecla,
  .lightsoff-piloto {
    transition-duration: 200ms;
  }
  .lightsoff-boton:hover {
    transform: none;
  }
  /* Las auroras y la bruma son animación continua: es lo primero que se
     apaga. Quietas siguen siendo manchas de color, que es suficiente. */
  .lightsoff-fondo--aurora::before,
  .lightsoff-fondo--aurora::after,
  .lightsoff-fondo--boreal::before,
  .lightsoff-fondo--boreal::after,
  .lightsoff-fondo--malva::before,
  .lightsoff-fondo--malva::after,
  .lightsoff-fondo--bruma::before,
  .lightsoff-fondo--bruma::after {
    animation: none;
  }
  .lightsoff-cordon,
  .lightsoff-tirador,
  .lightsoff-bat,
  .lightsoff-balancin,
  .lightsoff-rueda {
    transition-duration: 200ms;
  }
}