/* ==========================================================================
   LightsOff · el sitio público
   ==========================================================================

   La página entera se apaga. No es un efecto de una sección: el mismo
   interruptor que va en la tienda de un merchant baja la luz de aquí.

   ── Cómo se apaga ──────────────────────────────────────────────────────
   Dos capas, y hacen falta las dos:

     1. Los TOKENS de color cambian con `.noche` en <html>. Eso mueve
        fondos, texto y bordes a la versión nocturna.
     2. El VELO, un panel fijo por encima de todo, que baja la luz de lo
        que no es un token — las fotos incluidas.

   Con solo tokens, las fotos se quedan brillando y la página parece un
   modo oscuro. Con solo velo, el texto se va con el fondo y no se lee.

   ── Por qué el tipo va ligero y grande ─────────────────────────────────
   La primera versión ponía el titular en peso 800 a 76 px. Eso es lenguaje
   de startup: grita. Una marca de iluminación de gama hace lo contrario
   —peso ligero, cuerpo grande, mucho aire y cromo finísimo— y ese silencio
   es lo que se lee como caro. Toda la escala de aquí abajo sale de ahí.
   ========================================================================== */

:root {
  /* ── Un solo número manda ────────────────────────────────────────────
     `--nivel` va de 0 (de día) a 1 (de noche) y TODA la paleta sale de él
     por interpolación. El interruptor lo pone a 0 o a 1; el regulador de la
     izquierda lo deja en cualquier punto intermedio.

     Antes eran dos clases con dos juegos de colores. Funcionaba para un
     interruptor, pero un regulador necesita los infinitos puntos de en
     medio, y con clases no hay forma: o estás en una o en la otra.

     Los dos extremos se declaran como constantes y cada token es la mezcla.
     `color-mix` en sRGB y no en un espacio perceptual a propósito: es lo que
     hace el escaparate al cruzar con opacidad, y las dos cosas tienen que
     dar el mismo color en el mismo nivel. */
  --nivel: 0;

  /* Los extremos. Estos NO se usan directamente en ninguna regla. */
  --d-fondo: #f7f7f8;  --n-fondo: #17120e;
  --d-alto:  #ffffff;  --n-alto:  #1f1913;
  --d-hondo: #eeeef1;  --n-hondo: #100c09;
  --d-tinta: #111214;  --n-tinta: #f4ebe0;
  --d-media: #55595f;  --n-media: #bfb0a0;
  --d-suave: #8b8f96;  --n-suave: #8b7f72;
  --d-linea: #e2e3e6;  --n-linea: #302620;
  --d-fina:  #ececee;  --n-fina:  #241c17;
  --d-ambar: #e8912b;  --n-ambar: #ffab52;
  --d-ambar-hondo: #97570a; --n-ambar-hondo: #ffc78f;

  /* ── El punto de en medio ────────────────────────────────────────────
     Con dos extremos y una recta, el camino pasa por gris neutro: el blanco
     de día tira a azul y el negro de noche tira a cálido, y la mezcla de los
     dos se anula en un gris muerto. Feo justo donde más se mira.

     Con un tercer punto, el camino se curva por donde debe. Y no es un
     capricho: al bajar, una bombilla no se vuelve gris, se vuelve CÁLIDA
     primero y oscura después. La arena y el granate son ese momento. */
  --m-fondo: #e8e2d9;
  --m-alto:  #f1ece5;
  --m-hondo: #ddd5c9;
  --m-tinta: #5a1508;
  --m-media: #7d3a26;
  --m-suave: #9c6552;
  --m-linea: #d5ccbe;
  --m-fina:  #e1dad0;
  --m-ambar: #c86a1e;
  --m-ambar-hondo: #7a2a0c;

  /* Dónde cae ese punto en el recorrido del mando. */
  --medio: 0.5;
  /* Las dos etapas. Cada una recorre su tramo y se queda quieta fuera de él,
     así que la de arriba vale 1 en cuanto se pasa el medio y la de abajo
     sigue en 0 hasta llegar. */
  --t1: clamp(0, calc(var(--nivel) / 0.5), 1);
  --t2: clamp(0, calc((var(--nivel) - 0.5) / 0.5), 1);

  /* ── Ningún color de primer plano puede interpolar con el fondo ──────
     Si el fondo baja de claro a oscuro y la tinta sube de oscura a clara,
     en algún punto valen lo mismo y el texto desaparece. Medido: pasaba a
     mitad de recorrido, con 1,00:1.

     Y no hay un único punto malo. CADA token cruza el fondo en su propio
     nivel, según su luminancia: la tinta sobre 0,57, pero el ámbar en 0,33
     — donde llegaba a 1,01:1, o sea invisible.

     Así que el primer plano no se interpola: SALTA de lado en 0,57 (donde
     el negro y el blanco empatan sobre el fondo) y, cuando aún así no llega,
     se empuja hacia el negro o el blanco puros lo justo para llegar.

     Cuánto se empuja lo calcula `js/sitio.js`, resolviendo el contraste real
     para el nivel exacto en que esté el mando. La regla que sigue: ningún
     punto del recorrido puede verse peor que en los extremos. En 0 y en 1 el
     empuje es cero, así que el diseño de día y el de noche salen intactos;
     solo se refuerza en la travesía, que es donde hace falta.

     Resultado medido de punta a punta: todo el texto por encima de 4,5:1,
     y donde no llega a su meta es porque el fondo está en el gris medio y
     es imposible — ahí toca el máximo alcanzable, 4,61:1. */
  --tinta-lado: 0;
  --emp-tinta: 0;
  --emp-media: 0;
  --emp-suave: 0;
  --emp-linea: 0;
  --emp-fina: 0;
  --emp-ambar: 0;
  --emp-ambar-hondo: 0;

  /* Y la mezcla. Todo lo demás de la hoja usa SOLO estos. */
  --mezcla: calc(var(--nivel) * 100%);
  --p2: calc(var(--t2) * 100%);
  --p1: calc(var(--t1) * 100%);
  --fondo: color-mix(in srgb, var(--n-fondo) var(--p2),
             color-mix(in srgb, var(--m-fondo) var(--p1), var(--d-fondo)));
  --fondo-alto: color-mix(in srgb, var(--n-alto) var(--p2),
             color-mix(in srgb, var(--m-alto) var(--p1), var(--d-alto)));
  --fondo-hondo: color-mix(in srgb, var(--n-hondo) var(--p2),
             color-mix(in srgb, var(--m-hondo) var(--p1), var(--d-hondo)));

  /* El lado salta; el empuje lleva al extremo puro. Los dos, para cada
     token, con la misma forma. */
  --lado: calc(var(--tinta-lado) * 100%);
  --extremo: color-mix(in srgb, #ffffff var(--lado), #000000);
  --tinta:  color-mix(in srgb, var(--extremo) calc(var(--emp-tinta) * 100%),
              color-mix(in srgb, var(--n-tinta) var(--lado), color-mix(in srgb, var(--m-tinta) var(--p1), var(--d-tinta))));
  --tinta-media: color-mix(in srgb, var(--extremo) calc(var(--emp-media) * 100%),
              color-mix(in srgb, var(--n-media) var(--lado), color-mix(in srgb, var(--m-media) var(--p1), var(--d-media))));
  --tinta-suave: color-mix(in srgb, var(--extremo) calc(var(--emp-suave) * 100%),
              color-mix(in srgb, var(--n-suave) var(--lado), color-mix(in srgb, var(--m-suave) var(--p1), var(--d-suave))));
  --linea:  color-mix(in srgb, var(--extremo) calc(var(--emp-linea) * 100%),
              color-mix(in srgb, var(--n-linea) var(--lado), color-mix(in srgb, var(--m-linea) var(--p1), var(--d-linea))));
  --linea-fina: color-mix(in srgb, var(--extremo) calc(var(--emp-fina) * 100%),
              color-mix(in srgb, var(--n-fina) var(--lado), color-mix(in srgb, var(--m-fina) var(--p1), var(--d-fina))));
  --ambar:  color-mix(in srgb, var(--extremo) calc(var(--emp-ambar) * 100%),
              color-mix(in srgb, var(--n-ambar) var(--lado), color-mix(in srgb, var(--m-ambar) var(--p1), var(--d-ambar))));
  --ambar-hondo: color-mix(in srgb, var(--extremo) calc(var(--emp-ambar-hondo) * 100%),
              color-mix(in srgb, var(--n-ambar-hondo) var(--lado), color-mix(in srgb, var(--m-ambar-hondo) var(--p1), var(--d-ambar-hondo))));
  --ambar-suave:  color-mix(in srgb, var(--ambar) 11%, transparent);

  /* El velo va con la SEGUNDA etapa, no con el nivel. Subiendo desde el
     principio apagaba la arena un 16 % justo en el punto que más se mira; y
     además es más cierto así: el aire no se ensombrece mientras la luz solo
     se está volviendo cálida. */
  --velo-alfa: calc(var(--t2) * 0.32);

  --radio: 6px;
  --radio-chico: 4px;

  /* Sombras muy bajas: en una página callada, una sombra fuerte es ruido.
     Estas sí saltan en vez de interpolar — una sombra a medio camino no la
     distingue nadie y hacerla continua costaría cuatro variables más. */
  --sombra: 0 1px 1px rgba(17,18,20,.03), 0 6px 20px rgba(17,18,20,.04);
  --sombra-alta: 0 1px 2px rgba(17,18,20,.05), 0 18px 48px rgba(17,18,20,.09);

  --fuente: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --paso: cubic-bezier(.4, 0, .2, 1);
  --lento: 1400ms;

  /* El suelo de la página, aparte del resto.
     ═══════════════════════════════════════════════════════════════
     CERO, medido con el mando de `js/dev.js`. Un interruptor no atenúa,
     corta: la luz del techo del clip muere en un fotograma, así que
     cualquier transición aquí delata que son dos cosas distintas.

     Y con el regulador importa el doble: al arrastrar hace falta que el
     fondo siga al dedo sin retraso. */
  --suelo: 0ms;

  /* Ritmo vertical. Un solo sitio donde cambiar el aire de la página. */
  --aire: clamp(76px, 11vw, 148px);
}

/* La noche es, simplemente, el nivel al máximo. */
html.noche {
  --nivel: 1;
  --tinta-lado: 1;
  --sombra: 0 1px 1px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
  --sombra-alta: 0 1px 2px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.5);
}

/* Mientras se arrastra el regulador no hay transiciones que valgan: el
   color tiene que ir pegado al dedo. */
html.regulando *,
html.regulando *::before,
html.regulando *::after {
  transition: none !important;
}

* { box-sizing: border-box; }

/* Los saltos del menú se paran ANTES de la cabecera.
   Con la barra flotante —fuera del flujo— el destino de un `#ancla` aterriza
   en el píxel 0 y la barra se le pone encima: cinco de las seis secciones
   llegaban con el titular tapado.

   `scroll-margin-top` es exactamente para esto y lo aplica el navegador solo,
   sin JavaScript ni cuentas. Va también en `html` para que el desplazamiento
   sea suave, que en un salto de 84 px se agradece. */
html { scroll-behavior: smooth; }
:target,
section[id] { scroll-margin-top: 104px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html {
  background: var(--fondo);
  /* La transición vive AQUÍ y no dentro de `.noche`. Declarada dentro de
     la clase, desaparece con ella y volver a encender sería un salto. */
  transition: background var(--suelo) var(--paso);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  transition: background var(--suelo) var(--paso), color var(--lento) var(--paso);
  overflow-x: hidden;
}

::selection { background: var(--ambar-suave); }

/* ── El velo ───────────────────────────────────────────────────────────
   Un ámbar muy oscuro, no un negro: apagar una habitación deja el aire
   cálido, y un velo neutro la deja con aspecto de foto desaturada.

   `pointer-events:none` es obligatorio — sin él, esta capa se come todos
   los clics de la página. */
.velo {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(46,28,9,.5) 0%, rgba(10,7,4,.96) 100%);
  opacity: var(--velo-alfa);
  transition: opacity var(--lento) var(--paso);
}

/* ══════════════════════════════════════════════════════════════════════
   Barra
   ══════════════════════════════════════════════════════════════════════ */
/* Flotante, no pegajosa.
   `sticky` RESERVA su hueco en el flujo, así que aunque no tenga fondo el
   vídeo empezaba por debajo y quedaba una franja del color de la página
   cruzando arriba. Se veía como si la cabecera siguiera teniendo fondo.

   `fixed` la saca del flujo: el hero empieza en el píxel 0 y la barra
   flota encima. */
.barra {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 18px clamp(20px, 5vw, 56px);

  /* Sin fondo. El vídeo llega hasta el borde de la pantalla.
     Cualquier fondo aquí —macizo o en degradado— dibuja una franja justo
     por arriba, que es donde cuelga la bombilla.

     El texto se lee igual porque va a contraluz en los dos estados: de día
     es tinta oscura sobre la pared iluminada del clip, y de noche es hueso
     sobre el cuarto a oscuras. El color lo llevan los tokens, así que
     cambia solo con la página. */
  background: none;
  transition: background 260ms var(--paso), backdrop-filter 260ms var(--paso);
}

/* Pasado el hero sí lleva fondo.
   Sin él, el resto de la página desfilaría por debajo de un menú suelto y
   se cruzarían los textos. Sobre el vídeo estorba; sobre el contenido hace
   falta. Lo pone `js/sitio.js` al dejar atrás el hero. */
.barra--posada {
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.015em;
  color: var(--tinta);
  text-decoration: none;
  transition: color var(--lento) var(--paso);
}

/* El punto de la marca es la bombilla: apagado de día, encendido de noche. */
.marca-punto {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--tinta-suave);
  transition: background 700ms var(--paso), box-shadow 700ms var(--paso);
}
html.noche .marca-punto {
  background: var(--ambar);
  box-shadow: 0 0 0 3px rgba(255,171,82,.18), 0 0 20px 3px rgba(255,171,82,.5);
}

.barra-nav { display: flex; gap: 30px; font-size: 14px; }
.barra-nav a {
  color: var(--tinta-media);
  text-decoration: none;
  transition: color 240ms var(--paso);
}
.barra-nav a:hover { color: var(--tinta); }

@media (max-width: 940px) { .barra-nav { display: none; } }

/* El interruptor NO se esconde en estrecho.
   ═════════════════════════════════════════════════════════════════════
   Aquí decía `display: none`, con el motivo de que no cabía junto a la marca
   y el botón de instalar. El motivo había dejado de ser cierto —ese botón se
   esconde a este mismo ancho, treinta líneas más abajo— y la consecuencia era
   grave: pasado el hero, en un móvil no había NINGÚN interruptor en toda la
   página.

   Y el interruptor no es un adorno de la página: es el producto. Una web que
   vende «pon un interruptor en tu tienda» y no deja tocar uno mientras se
   mira el catálogo no está vendiendo nada. En móvil, además, es donde más
   gente la va a ver.

   Cabe: la marca mide 88 px y el interruptor 196; con el relleno de la barra
   son 324 de los 375 del móvil más estrecho que se usa hoy. */
@media (max-width: 620px) {
  .barra { gap: 10px; }
  .barra .interruptor { padding-right: 18px; gap: 11px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Botones
   ══════════════════════════════════════════════════════════════════════ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border-radius: 999px;
  font-family: var(--fuente);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 180ms var(--paso), background 320ms var(--paso),
              border-color 320ms var(--paso), color var(--lento) var(--paso),
              box-shadow 320ms var(--paso);
}
.boton:active { transform: translateY(1px); }
.boton:focus-visible { outline: 1.5px solid var(--ambar); outline-offset: 3px; }

/* De contorno, no macizo: en la barra, un botón negro relleno es de lo que
   más hace que una página parezca una plantilla. */
.boton-linea { border-color: var(--linea); color: var(--tinta); }
.boton-linea:hover { border-color: var(--tinta-suave); }

.boton-solido { background: var(--tinta); color: var(--fondo); }
.boton-solido:hover { box-shadow: var(--sombra-alta); }
html.noche .boton-solido { background: var(--ambar); color: #1d1103; }

.boton-grande { padding: 15px 30px; font-size: 15px; width: 100%; }

@media (max-width: 620px) { .barra-cta { display: none; } }

/* ══════════════════════════════════════════════════════════════════════
   Tipografía común
   ══════════════════════════════════════════════════════════════════════ */
.etiqueta {
  margin: 0 0 22px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambar-hondo);
  transition: color var(--lento) var(--paso);
}

h1 {
  margin: 0;
  font-size: clamp(46px, 9vw, 104px);
  font-weight: 200;
  line-height: 0.98;
  letter-spacing: -0.042em;
  text-wrap: balance;
}

h2 {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 200;
  line-height: 1.06;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

h3 {
  margin: 0 0 10px;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.35;
}

.entradilla {
  margin: 30px 0 0;
  max-width: 42ch;
  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--tinta-media);
  transition: color var(--lento) var(--paso);
}

.seccion-entradilla {
  margin: 22px 0 0;
  max-width: 50ch;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--tinta-media);
  transition: color var(--lento) var(--paso);
}

/* ══════════════════════════════════════════════════════════════════════
   Hero
   ══════════════════════════════════════════════════════════════════════ */
/* El hero ocupa la pantalla, y el vídeo ocupa el hero.
   `100svh` y no `100vh`: en móvil, `vh` cuenta con la barra del navegador
   escondida, así que el hero se sale por abajo y el botón queda debajo del
   pliegue justo en el sitio donde menos margen hay.

   Ya no se resta la barra: al ser flotante no ocupa, así que el hero es la
   pantalla entera y el vídeo llega hasta arriba del todo.

   Lo que sí hace falta es apartar el TEXTO de debajo del menú, y de eso se
   encarga el padding de arriba. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: clamp(96px, 12vh, 132px) 0 clamp(40px, 6vw, 72px);
}

/* El texto sí se centra en la columna; el vídeo de detrás no, que va a
   sangre. Por eso el ancho máximo vive aquí y no en `.hero`. */
.hero-texto {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}

/* El escaparate, ya fuera del hero. */
.escaparate {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px) var(--aire);
}

/* ── La atmósfera de la noche ─────────────────────────────────────────
   Lo que le falta al estado nocturno: ahora mismo es un marrón plano.

   NO es el protagonista. El interruptor ya hace la demostración, y un
   vídeo que también se apagara competiría con él en vez de sumar. Este
   solo aparece cuando ya está apagado, muy por debajo, y sin ninguna
   lámpara a la vista — una lámpara aquí contradiría la promesa de la
   sección de al lado: «tu lámpara, no otra lámpara».

   Va DETRÁS del texto y con opacidad baja: si hay que subirla para que se
   note, es que el vídeo elegido es demasiado protagonista. */
/* El vídeo, a pantalla completa sobre el hero.
   Ahora que la rejilla vive fuera, el hero tiene una proporción parecida a
   la de la pantalla y `cover` apenas recorta: la bombilla —que está al 72 %
   del ancho— entra siempre en escritorio.

   En móvil no: una pantalla vertical contra un clip 16:9 recorta tanto que
   solo queda una franja del centro. Eso se resuelve más abajo, en su media
   query, poniéndolo en banda. */
.ambiente {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* El velo del texto.
   Medido: la mitad izquierda del clip acaba en 65 de brillo, que da 3,7:1
   contra el blanco. El titular pasa —a 104 px cuenta como texto grande, que
   solo pide 3:1—, pero la entradilla a 20 px necesita 4,5:1 y se quedaba
   corta.

   Un degradado lateral en vez de bajar la opacidad del vídeo entero: así el
   texto tiene su fondo y la bombilla, que está a la derecha, sigue brillando
   a plena luz. Bajar el vídeo entero apagaría justo lo que se ha ido a
   buscar. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* De izquierda a derecha, para que el texto tenga fondo y la bombilla
       siga a plena luz. */
    linear-gradient(
      100deg,
      var(--fondo) 0%,
      color-mix(in srgb, var(--fondo) 80%, transparent) 28%,
      color-mix(in srgb, var(--fondo) 26%, transparent) 54%,
      transparent 74%
    ),
    /* Y por abajo, para que el vídeo no acabe en una línea recta contra la
       página. Sin esto se ve el corte y lo delata todo. */
    linear-gradient(
      to bottom,
      transparent 55%,
      color-mix(in srgb, var(--fondo) 60%, transparent) 82%,
      var(--fondo) 100%
    );
  transition: opacity var(--lento) var(--paso);
}
/* El velo también es permanente: el texto va sobre el vídeo tanto de día
   como de noche. Sigue los tokens, así que de día tapa con el papel claro
   y de noche con el marrón. */
.hero::after { opacity: 1; }

/* Se enseña al ARRANCAR el clip, no al apagarse la página.
   Colgado de `.noche` era invisible durante los 643 ms del gesto —la mano
   acercándose y pulsando— y aparecía cuando la luz ya había muerto. Es
   decir: escondía justo lo que se había ido a buscar.

   A plena opacidad, además: mientras corre, el vídeo ES el hero. */
/* Visible SIEMPRE, no solo al pulsar.
   Antes colgaba de una clase que se ponía al arrancar el clip: el hero
   estaba vacío hasta que alguien pulsaba, el vídeo entraba de golpe y se
   iba al encender. Eso es lo que se leía como un pegote pegado encima.

   Ahora el vídeo ES el hero desde que carga la página, congelado en su
   primer fotograma —habitación iluminada, bombilla apagada—, y el
   interruptor lo que hace es darle vida. La página encendida y el clip
   encendido son la misma imagen. */
.ambiente { opacity: 1; }

/* Los dos clips se apilan y solo uno está a la vista. Sin transición: los
   fotogramas de empalme son la misma imagen, así que el cambio no se ve y
   un fundido solo lo delataría. */
.ambiente--oculto { visibility: hidden; }

/* Entra RÁPIDO y sale despacio.
   Con el tiempo lento de la página —1.400 ms— el vídeo tardaba más en
   hacerse visible que en durar el gesto: a los 180 ms de pulsar seguía en
   opacidad 0, y la mano pulsaba detrás de una capa transparente. Se
   arrancaba el clip y no lo veía nadie.

   Al salir sí puede ir despacio: ahí no hay nada que enseñar, solo hay que
   devolver la página. */

/* El hero pasa a ser el contenedor del vídeo, y su contenido por encima. */
.hero-texto, .rejilla { position: relative; z-index: 1; }

/* ── La firma ─────────────────────────────────────────────────────────
   Callada a propósito. Va debajo del titular, con el mismo sangrado que la
   entradilla, y en el gris más suave de la paleta: una firma que compite con
   el titular deja de ser una firma. */
.firma {
  margin: 18px 0 0;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso);
}

/* ── Los tres datos del hero ──────────────────────────────────────────
   Cuánto tarda, si hay que llamar a alguien y cuánto cuesta. Estaban
   repartidos por las secciones 5, 3 y 8 — o sea, después del punto en el
   que se va la mitad de la gente.

   En una fila y con el punto en ámbar: se leen de un vistazo sin robarle
   peso al titular, que es lo que no puede pasar. */
.hero-datos {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}
.hero-datos li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  font-weight: 300;
  color: var(--tinta-media);
  transition: color var(--lento) var(--paso);
}
.hero-datos li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ambar);
}
@media (max-width: 620px) {
  .hero-datos { gap: 6px; flex-direction: column; }
}

.hero-acciones {
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  /* Un poco a la derecha del texto: acoplado en la cabecera cae justo
     después de la marca, y aquí abajo se lee como un objeto puesto sobre la
     pared del vídeo en vez de como el último renglón del párrafo. */
  padding-left: clamp(0px, 3.4vw, 48px);
}

/* El hueco que le guarda el hero. Mismas medidas que el interruptor para
   que la fila no dé un salto, pero sin pintar nada. */
.interruptor-hueco {
  width: 196px;
  height: 58px;
  flex: none;
}

/* El interruptor, ya en la cabecera.
   `--baja` es lo que lo separa de su sitio acoplado, y lo escribe el
   JavaScript en cada scroll: vale la distancia hasta el hueco del hero
   mientras este se ve, y cero cuando ya no. */
.barra .interruptor {
  flex: none;
  margin-left: 26px;
  /* El hueco elástico va DESPUÉS del interruptor, no antes.
     Con el `auto` en la marca, el botón salía empujado al centro de la
     barra —a 485 px— y al bajar al hero aparecía descolgado a la derecha
     del titular. Aquí queda pegado a la marca, que es la misma altura a la
     que cae en el hero: el desplazamiento es solo vertical y no se ve
     ningún salto lateral. */
  margin-right: auto;
  transform: translateY(var(--baja, 0px));
  /* Sin transición en el desplazamiento: va pegado al scroll y cualquier
     suavizado lo deja arrastrando por detrás del dedo. */
  will-change: transform;
}

.hero-pista {
  font-size: 13.5px;
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso), opacity 300ms var(--paso);
}
/* Acoplado no hay nada que probar ahí: la pista sobra y además chocaría
   con el menú. */
.barra--posada ~ main .hero-pista { opacity: 0; }

/* ── El interruptor ───────────────────────────────────────────────────
   Una tecla de pared de verdad: placa, tecla y recorrido. Es el estilo
   por defecto de la app y el que mejor se explica solo. */
.interruptor {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 9px 24px 9px 9px;
  border-radius: 999px;
  background: var(--fondo-alto);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra);
  transition: background var(--lento) var(--paso), border-color var(--lento) var(--paso),
              box-shadow 320ms var(--paso);
}
.interruptor:hover { box-shadow: var(--sombra-alta); }
.interruptor:focus-visible { outline: 1.5px solid var(--ambar); outline-offset: 3px; }

.interruptor-texto {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tinta);
  transition: color var(--lento) var(--paso);
}

.interruptor-placa {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--fondo-hondo);
  border: 1px solid var(--linea);
  flex: none;
  display: grid;
  place-items: center;
  transition: background 600ms var(--paso), border-color 600ms var(--paso),
              box-shadow 600ms var(--paso);
}

/* La tecla bascula como una de verdad: el degradado marca arriba y abajo,
   y al girar 180° el lado hundido pasa a ser el otro. */
.interruptor-tecla {
  width: 15px; height: 24px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--fondo-alto) 0 48%, var(--fondo-hondo) 52% 100%);
  border: 1px solid var(--linea);
  transition: transform 340ms var(--paso), background 600ms var(--paso),
              border-color 600ms var(--paso);
}

html.noche .interruptor-placa {
  background: var(--ambar-suave);
  border-color: rgba(255,171,82,.35);
  box-shadow: 0 0 22px 2px rgba(255,171,82,.28);
}
html.noche .interruptor-tecla {
  transform: rotate(180deg);
  background: linear-gradient(180deg, var(--ambar) 0 48%, #b9700f 52% 100%);
  border-color: rgba(255,171,82,.5);
}

/* ══════════════════════════════════════════════════════════════════════
   La rejilla de producto
   ══════════════════════════════════════════════════════════════════════ */
/* Tres columnas, no las que quepan.
   Con `minmax(190px, 1fr)` entraban cinco y la sexta se quedaba sola en
   una fila, con todo el hueco detrás. Y tres caben más grandes, que es lo
   que hace falta: la foto es el argumento. */
.rejilla {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Dos columnas en móvil, y no una.
   ════════════════════════════════════════════════════════════════════
   El `minmax(280px, 1fr)` de arriba cae solo a una columna por debajo de
   580, y eso rompía las dos cosas que esta sección tiene que hacer.

   La primera es PARECERSE a una tienda: ninguna colección de Shopify se ve
   de una en una en el móvil, se ven de dos en dos. Una lámpara por pantalla
   no se lee como un catálogo, se lee como una galería de fotos.

   La segunda es enseñar el apagado EN CASCADA: las fotos se cruzan
   escalonadas 40 ms, y ese escalonado solo se ve si hay varias a la vez. Con
   una sola en pantalla no hay cascada que ver; hay una foto que cambia.

   `minmax(0, 1fr)` y no `1fr`: la misma razón de siempre —una pista `1fr`
   no baja de su contenido—. */
@media (max-width: 580px) {
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* El marco de la foto.
   Las dos imágenes se apilan en la MISMA caja y una se funde sobre la
   otra. Van dentro de este contenedor y no como hermanas sueltas para
   que ningún tema —ni esta página— las trate como «segunda imagen al
   pasar el ratón». */
.ficha-marco {
  position: relative;
  /* Cuadrada, que es como vienen las fotos. Estuvo en 4/5 y para llegar a
     esa proporción se rellenaban arriba y abajo con el color de una esquina:
     la esquina es más clara que el centro del fondo, así que en la junta el
     tono saltaba 14 puntos de golpe y se veía la banda. Recortar a 4/5
     tampoco valía —el colgante lineal y el de seta llegan a los bordes y
     perdían las puntas—. Cuadrada se ve la foto entera y no hay junta. */
  aspect-ratio: 1 / 1;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--fondo-hondo);
  border: 1px solid var(--linea-fina);
  /* El fondo va con el suelo de la página, no con el resto: es lo que se ve
     por detrás de la lámpara mientras su foto cruza. */
  transition: background var(--suelo) var(--paso), border-color var(--lento) var(--paso);
}

.ficha-marco img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* La nocturna empieza invisible y se funde encima. El retraso lo pone el
   JavaScript, tarjeta a tarjeta. */
/* La foto nocturna sale del MISMO número que el fondo.
   Antes era 0 o 1 con la clase; ahora es el nivel, así que el regulador
   mueve la sala y las lámparas a la vez y con el mismo valor — que es lo
   que hace que se lea como una sola cosa bajando. */
.ficha-noche {
  opacity: var(--nivel);
  transition: opacity 900ms var(--paso);
}

/* El hueco se ESTIRA sobre su contenedor, y por eso quien lo contenga
   tiene que estar posicionado. Si no, `inset: 0` se ancla a la página y
   el hueco tapa el sitio entero — que es lo que pasaba con las
   miniaturas del comparador. */
.ficha-hueco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  gap: 7px;
  text-align: center;
  padding: 18px;
  background:
    radial-gradient(70% 52% at 50% 34%, var(--ambar-suave), transparent 72%),
    linear-gradient(180deg, var(--fondo-hondo), var(--fondo-alto));
  color: var(--tinta-suave);
  font-size: 11px;
  line-height: 1.5;
  transition: background var(--lento) var(--paso), color var(--lento) var(--paso);
}
.ficha-hueco b {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tinta-media);
  transition: color var(--lento) var(--paso);
}
.ficha-hueco code { font-family: var(--mono); font-size: 10px; opacity: .75; }

/* Rejilla y no `flex`, desde que hay tres cosas.
   ═════════════════════════════════════════════════════════════════
   Era un `space-between` de dos hijos —nombre y precio— y al añadir la
   marca se repartieron TRES en la misma fila: en móvil salía «LUMEN /
   STUDIO» en una columna de 40 px y el nombre partido en cuatro líneas.

   La marca ocupa su propia fila entera; debajo, nombre y precio como
   antes. */
.ficha-pie {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 3px 12px;
  padding: 15px 2px 0;
}
.ficha-marca { grid-column: 1 / -1; }
.ficha-nombre { font-size: 14.5px; font-weight: 500; letter-spacing: -0.012em; }
.ficha-precio {
  font-size: 14px;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  transition: color var(--lento) var(--paso);
}

/* ══════════════════════════════════════════════════════════════════════
   Secciones
   ══════════════════════════════════════════════════════════════════════ */
.seccion {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px) var(--aire);
}

/* Un hilo finísimo separa el argumento del hero. Es el único divisor de
   la página: puestos entre todas las secciones, dejan de decir nada. */
.seccion-hilo { border-top: 1px solid var(--linea-fina); padding-top: var(--aire); }

.seccion-cabeza { margin-bottom: clamp(38px, 5vw, 64px); }

/* ── El argumento ─────────────────────────────────────────────────────
   Una sola idea, con todo el aire de la página alrededor. */
.argumento { max-width: 940px; }

.argumento-frase {
  margin: 0;
  font-size: clamp(28px, 4.4vw, 50px);
  font-weight: 200;
  line-height: 1.16;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.argumento-frase em {
  font-style: normal;
  color: var(--ambar-hondo);
  transition: color var(--lento) var(--paso);
}

.argumento-cuerpo {
  display: grid;
  gap: 20px clamp(28px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-top: clamp(34px, 4.5vw, 56px);
  max-width: 820px;
}
.argumento-cuerpo p {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--tinta-media);
  transition: color var(--lento) var(--paso);
}
.argumento-cuerpo strong { font-weight: 600; color: var(--tinta); transition: color var(--lento) var(--paso); }

/* ── Sección a dos columnas ───────────────────────────────────────────
   El texto a la izquierda y la prueba a la derecha, a la misma altura.
   Puesto debajo, el comparador quedaba a media pantalla de distancia de la
   frase que promete lo que demuestra: para comprobarlo había que dejar de
   leer, bajar y volver.

   El texto se centra verticalmente contra la imagen porque es más corto:
   alineado arriba dejaba un vacío raro bajo el párrafo. */
.seccion--dos {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
}
.seccion--dos .seccion-cabeza { margin-bottom: 0; }
.seccion--dos .seccion-entradilla { max-width: 40ch; }

/* Por debajo de esto la columna del texto se queda en nada y el comparador
   sale diminuto: mejor uno debajo del otro. */
@media (max-width: 900px) {
  /* `minmax(0, 1fr)` y no `1fr` a secas.
     ════════════════════════════════════════════════════════════════════
     Una pista `1fr` no baja de su contenido: su mínimo es `auto`, o sea el
     ancho mínimo de lo que lleva dentro. La tira de miniaturas mide 578 px
     y lleva su `overflow-x: auto`, pero con la pista en `1fr` ese scroll no
     se activaba nunca: se ensanchaba la columna, y con ella la página.

     Medido en un móvil de 375: el documento medía 598 px y se arrastraba
     223 px a la derecha, con la barra y el fondo cortados. El `minmax(0, ...)`
     le da a la pista permiso para encoger, y entonces el scroll de la tira
     hace su trabajo.

     El `min-width: 0` de los hijos es la otra mitad de lo mismo: un elemento
     de rejilla también arranca en `min-width: auto`. */
  .seccion--dos { grid-template-columns: minmax(0, 1fr); }
  .seccion > * { min-width: 0; }
  .seccion--dos .seccion-cabeza { margin-bottom: clamp(28px, 4vw, 44px); }
}

/* ── Comparador antes / después ───────────────────────────────────────
   Un rango nativo por encima de todo hace el trabajo: funciona con el
   teclado, con el dedo y con lector de pantalla sin escribir nada de eso
   a mano. Lo visual va debajo y solo escucha. */
.comparador { max-width: 840px; }
.prueba-columna .comparador { max-width: none; }

.comparador-marco {
  position: relative;
  /* 1:1 porque las fotos son cuadradas. Estuvo en 4/3 y `object-fit: cover`
     se comía el 25 % del alto: a las lámparas de pie les faltaba el pie y a
     los colgantes el techo. En una sección que se llama «la misma foto»,
     recortar es justo lo que no se puede hacer. */
  aspect-ratio: 1 / 1;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--linea-fina);
  background: var(--fondo-hondo);
  transition: border-color var(--lento) var(--paso), background var(--lento) var(--paso);
}
.comparador-marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* El hueco va DEBAJO de las dos imágenes: en cuanto exista una, la tapa. */
.comparador-hueco {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  padding: 28px;
  background:
    radial-gradient(62% 48% at 50% 34%, var(--ambar-suave), transparent 72%),
    linear-gradient(180deg, var(--fondo-hondo), var(--fondo-alto));
  color: var(--tinta-suave);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  transition: background var(--lento) var(--paso), color var(--lento) var(--paso);
}
.comparador-hueco b {
  display: block; font-size: 15px; font-weight: 500;
  letter-spacing: -0.012em; color: var(--tinta-media);
  transition: color var(--lento) var(--paso);
}
.comparador-hueco code { font-family: var(--mono); font-size: 11px; opacity: .8; }

.comparador-marco > img,
.comparador-tapa,
.comparador-mango,
.comparador-rango { z-index: 1; }

/* La tapa ocupa el marco ENTERO y solo se recorta. Antes se le encogía el
   ancho y la imagen de dentro se dibujaba a `width: auto; height: 100%`
   para que no se aplastara: el resultado era que la mitad del día se
   pintaba a 605 px de ancho y la de la noche a 453, o sea la misma lámpara
   a dos tamaños, y al arrastrar saltaba. Recortando, las dos capas se
   maquetan exactamente igual y lo único que cambia es cuánto se ve. */
.comparador-tapa {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--corte, 50%)) 0 0);
}

.comparador-mango {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px; margin-left: -0.5px;
  pointer-events: none;
}
.comparador-linea { position: absolute; inset: 0; background: rgba(255,255,255,.85); }
.comparador-agarre {
  position: absolute;
  top: 50%; left: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  box-shadow: 0 1px 10px rgba(0,0,0,.22);
}
/* Las dos flechitas del agarre, hechas con bordes. */
.comparador-agarre::before,
.comparador-agarre::after {
  content: "";
  position: absolute; top: 50%; margin-top: -4px;
  width: 5px; height: 8px;
  border: 1.5px solid rgba(17,18,20,.45);
}
.comparador-agarre::before { left: 8px;  border-right: none; border-radius: 2px 0 0 2px; }
.comparador-agarre::after  { right: 8px; border-left: none;  border-radius: 0 2px 2px 0; }

/* El rango real, invisible pero operable. */
.comparador-rango {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.comparador-marco:focus-within .comparador-agarre {
  box-shadow: 0 0 0 2.5px var(--ambar), 0 1px 10px rgba(0,0,0,.22);
}

.comparador-pies {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso);
}
.comparador-instruccion {
  font-weight: 400; letter-spacing: 0.02em;
  text-transform: none; font-size: 12.5px;
}

.tiras {
  display: flex;
  gap: 10px;
  margin-top: 26px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.tira {
  all: unset;
  position: relative;
  cursor: pointer;
  flex: none;
  width: 88px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-chico);
  overflow: hidden;
  background: var(--fondo-hondo);
  box-shadow: 0 0 0 1px var(--linea-fina);
  opacity: .55;
  transition: opacity 240ms var(--paso), box-shadow 240ms var(--paso);
}
.tira:hover { opacity: .85; }
.tira[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 1.5px var(--ambar); }
.tira:focus-visible { outline: 1.5px solid var(--ambar); outline-offset: 2px; }
.tira img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ── Ventajas ─────────────────────────────────────────────────────────
   Sin tarjetas ni cajas: solo un hilo arriba de cada una. Una rejilla de
   cajas con sombra es de lo que más hace que una página de producto se
   lea como una plantilla. */
.ventajas {
  display: grid;
  gap: clamp(30px, 4vw, 54px) clamp(28px, 4vw, 60px);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.ventaja {
  padding-top: 22px;
  border-top: 1px solid var(--linea);
  transition: border-color var(--lento) var(--paso);
}
.ventaja p {
  margin: 0;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--tinta-media);
  transition: color var(--lento) var(--paso);
}

/* ── Pasos ────────────────────────────────────────────────────────────── */
.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(28px, 3.6vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.paso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--linea);
  transition: border-color var(--lento) var(--paso);
}
.paso-n {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ambar-hondo);
  font-variant-numeric: tabular-nums;
  transition: color var(--lento) var(--paso);
}
.paso p {
  margin: 0;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--tinta-media);
  transition: color var(--lento) var(--paso);
}
.paso em { font-style: italic; }
.paso-tiempo {
  display: inline-block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso);
}

/* ── Panel de métricas ────────────────────────────────────────────────── */
.panel {
  max-width: 900px;
  background: var(--fondo-alto);
  border: 1px solid var(--linea-fina);
  border-radius: var(--radio);
  padding: 26px;
  box-shadow: var(--sombra);
  transition: background var(--lento) var(--paso), border-color var(--lento) var(--paso);
}
.panel-cabeza {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 20px; margin-bottom: 20px;
  border-bottom: 1px solid var(--linea-fina);
  transition: border-color var(--lento) var(--paso);
}
.panel-titulo { font-weight: 600; font-size: 14.5px; letter-spacing: -0.012em; }
.panel-chip {
  margin-left: auto;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  color: var(--tinta-suave);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  transition: border-color var(--lento) var(--paso), color var(--lento) var(--paso);
}

/* Rejilla de un píxel: los huecos del grid HACEN las líneas. Así no hay
   bordes que se doblen al juntarse dos celdas. */
.metricas {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  background: var(--linea-fina);
  border: 1px solid var(--linea-fina);
  border-radius: var(--radio-chico);
  overflow: hidden;
  transition: background var(--lento) var(--paso), border-color var(--lento) var(--paso);
}
.metrica {
  display: grid; gap: 6px;
  padding: 20px 18px;
  background: var(--fondo-alto);
  transition: background var(--lento) var(--paso);
}
.metrica-alta { background: var(--ambar-suave); }
.metrica-clave {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso);
}
.metrica-valor {
  font-size: 30px; font-weight: 200;
  letter-spacing: -0.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metrica-pie {
  font-size: 11.5px; font-weight: 300;
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso);
}

.panel-nota {
  margin: 18px 0 0;
  font-size: 12px;
  font-weight: 300;
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso);
}

/* ── La app por dentro ────────────────────────────────────────────────
   El panel imita la interfaz de la app sin fingir ser una captura: se nota
   que es esta web dibujándolo. Los textos y los estados sí son los suyos.
   ══════════════════════════════════════════════════════════════════════ */
.app-lista {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
}
.app-lista li {
  padding: 13px 0;
  border-top: 1px solid var(--linea-fina);
  font-size: 15px;
  font-weight: 300;
  color: var(--tinta-media);
  transition: color var(--lento) var(--paso), border-color var(--lento) var(--paso);
}
.app-lista b { font-weight: 600; color: var(--tinta); transition: color var(--lento) var(--paso); }

.panel-app {
  border: 1px solid var(--linea-fina);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--fondo-alto);
  box-shadow: var(--sombra-alta);
  transition: background var(--lento) var(--paso), border-color var(--lento) var(--paso);
}

.panel-app-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--linea-fina);
  background: var(--fondo-hondo);
  transition: background var(--suelo) var(--paso), border-color var(--lento) var(--paso);
}
.panel-app-punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ambar);
  box-shadow: 0 0 0 3px var(--ambar-suave);
}
.panel-app-titulo { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.panel-app-chip {
  margin-left: auto;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso);
}

.panel-app-cuerpo { padding: 24px 22px 22px; }

.panel-app-estado {
  margin: 0;
  font-size: 19px;
  font-weight: 200;
  letter-spacing: -0.02em;
}
.panel-app-sub {
  margin: 7px 0 0;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--tinta-media);
  transition: color var(--lento) var(--paso);
}

.panel-app-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 9px; }
.panel-app-checks li {
  position: relative;
  padding-left: 26px;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--tinta-media);
  transition: color var(--lento) var(--paso);
}
/* La marca de verificado, dibujada con dos bordes: sin icono que cargar. */
.panel-app-checks .ok::before {
  content: "";
  position: absolute;
  left: 4px; top: 5px;
  width: 5px; height: 9px;
  border: solid var(--ambar-hondo);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(43deg);
  transition: border-color var(--lento) var(--paso);
}

.panel-app-cifras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 22px;
  background: var(--linea-fina);
  border: 1px solid var(--linea-fina);
  border-radius: var(--radio-chico);
  overflow: hidden;
  transition: background var(--lento) var(--paso), border-color var(--lento) var(--paso);
}
.panel-app-cifras > div {
  display: grid; gap: 5px;
  padding: 15px 16px;
  background: var(--fondo-alto);
  transition: background var(--lento) var(--paso);
}
.panel-app-clave {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso);
}
.panel-app-valor {
  font-size: 23px; font-weight: 200;
  letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}

.panel-app-pie {
  margin: 12px 0 0;
  font-size: 11.5px;
  font-weight: 300;
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso);
}

/* ── Precio ───────────────────────────────────────────────────────────── */
.precio-fila {
  display: grid;
  gap: clamp(36px, 5vw, 72px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}
.precio-cabeza { margin-bottom: 0; }

.precio-caja {
  background: var(--fondo-alto);
  border: 1px solid var(--linea-fina);
  border-radius: var(--radio);
  padding: 34px 32px 32px;
  box-shadow: var(--sombra-alta);
  transition: background var(--lento) var(--paso), border-color var(--lento) var(--paso);
}
/* ── Las dos mitades del precio ────────────────────────────────────────
   La cuota y el precio por foto, a la misma altura y con un «+» entre las
   dos. Enseñar solo la cuota era contar la mitad de lo que se cobra, y eso
   se descubre en la primera factura — que es el peor sitio. */
.precio-doble { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.precio-parte { display: grid; gap: 2px; }
.precio-mas {
  font-size: 30px;
  font-weight: 200;
  color: var(--tinta-suave);
  line-height: 1.9;
  transition: color var(--lento) var(--paso);
}
.precio-doble .precio-num { font-size: 52px; }
.precio-doble .precio-moneda { font-size: 23px; }

.precio-cifra { display: flex; align-items: baseline; gap: 3px; }
.precio-num { font-size: 66px; font-weight: 200; letter-spacing: -0.055em; line-height: 1; }
.precio-moneda { font-size: 28px; font-weight: 200; }
.precio-periodo {
  margin-left: 8px; font-size: 14px;
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso);
}

.precio-lista { list-style: none; margin: 30px 0; padding: 0; display: grid; }
.precio-lista li {
  padding: 12px 0;
  border-bottom: 1px solid var(--linea-fina);
  font-size: 15px;
  font-weight: 300;
  color: var(--tinta-media);
  transition: color var(--lento) var(--paso), border-color var(--lento) var(--paso);
}
.precio-lista li:first-child { padding-top: 0; }

.precio-nota {
  margin: 18px 0 0;
  font-size: 12px;
  font-weight: 300;
  color: var(--tinta-suave);
  text-align: center;
  transition: color var(--lento) var(--paso);
}

/* ── El regulador ─────────────────────────────────────────────────────
   Un mando vertical a la izquierda, para bajar la luz a mano en vez de en
   dos posiciones. Solo sale cuando el vídeo ya no se ve: mientras se ve, el
   interruptor y el clip cuentan la historia y esto sobraría.

   Vertical porque es lo que es: un regulador de pared. Y a la izquierda
   porque la derecha la ocupa la barra de scroll y en el hero la bombilla.
   ══════════════════════════════════════════════════════════════════════ */
.regulador {
  position: fixed;
  left: clamp(12px, 2vw, 26px);
  top: 50%;
  transform: translateY(-50%) translateX(-14px);
  z-index: 65;

  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 16px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fondo-alto) 84%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--linea-fina);
  box-shadow: var(--sombra);

  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--paso), transform 300ms var(--paso),
              background var(--suelo) var(--paso), border-color var(--lento) var(--paso);
}
.barra--posada ~ .regulador,
.regulador--visible {
  opacity: 1;
  transform: translateY(-50%);
  pointer-events: auto;
}

/* El mando. `writing-mode` en vertical y `direction: rtl` para que arriba
   sea MÁS luz: sin el `rtl`, arrastrar hacia arriba apagaría, que es al
   revés de lo que hace cualquier regulador. */
.regulador-mando {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 22px;
  height: clamp(120px, 22vh, 180px);
  margin: 0;
  accent-color: var(--ambar);
  cursor: ns-resize;
}
.regulador-mando:focus-visible { outline: 1.5px solid var(--ambar); outline-offset: 4px; }

.regulador-icono {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--ambar);
  /* El halo crece con la luz: el propio mando dice en qué punto está sin
     tener que poner un número. */
  box-shadow: 0 0 0 calc(2px + (1 - var(--nivel)) * 4px) var(--ambar-suave);
  opacity: calc(0.35 + (1 - var(--nivel)) * 0.65);
  transition: opacity var(--suelo) var(--paso), box-shadow var(--suelo) var(--paso);
}

.regulador-cifra {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  transition: color var(--lento) var(--paso);
}

/* En estrecho no se esconde: se baja.
   ══════════════════════════════════════════════════════════════════════
   Decisión del merchant, y es la buena: botón arriba en la barra, regulador
   abajo, cada uno en su borde. Los dos a la vista siempre, y el regulador
   donde llega el pulgar sin recolocar la mano.

   Antes estuvo colgado bajo la barra, para que fueran «de la mano». Juntos
   arriba ocupaban 130 px de cabecera fija; separados, cada borde lleva una
   sola pieza fina.

   `env(safe-area-inset-bottom)` por el indicador de inicio del iPhone: sin
   eso el mando queda justo debajo de la barra del sistema y se arrastra sin
   querer la ventana en vez del regulador. */
@media (max-width: 900px) {
  .regulador {
    left: 50%;
    top: auto;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(18px);
    grid-auto-flow: column;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
  }
  .barra--posada ~ .regulador,
  .regulador--visible { transform: translateX(-50%); }

  /* Tumbado, y con la derecha como MÁS luz: el valor del rango es cuánta
     oscuridad hay, 0 es el día, y con `rtl` el cero cae a la derecha, que
     es donde el dedo espera encontrar la luz. */
  .regulador-mando {
    writing-mode: horizontal-tb;
    direction: rtl;
    width: min(52vw, 230px);
    height: 22px;
    cursor: ew-resize;
  }
  /* El punto de luz sobra: junto al tirador, también naranja, se leían
     como dos bolas iguales. La cifra ya cuenta lo mismo. */
  .regulador-icono { display: none; }

  /* Sitio al final para que el mando no tape la última línea del pie. */
  .pie { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ── El cierre ────────────────────────────────────────────────────────
   Un titular enorme con la luz cayéndole encima: pleno en el centro y
   apagándose hacia los bordes.

   Hecho con `background-clip: text` sobre un degradado radial, no con
   opacidad: bajar la opacidad de la letra la mezcla con el fondo y en
   noche se vuelve barro. Recortando el degradado dentro del texto, el
   color sigue siendo tinta de verdad y el degradado solo decide cuánta
   llega — que es lo que hace una lámpara.
   ══════════════════════════════════════════════════════════════════════ */
.cierre {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(60px, 9vw, 120px) clamp(20px, 5vw, 56px) clamp(72px, 10vw, 140px);
  text-align: center;
}

.cierre-titular {
  margin: 0;
  font-size: clamp(44px, 9.5vw, 122px);
  font-weight: 200;
  line-height: 0.99;
  letter-spacing: -0.045em;
  text-wrap: balance;

  /* El foco. Centrado y ancho: alcanza a la primera línea entera y deja
     que la segunda caiga en penumbra. */
  background: radial-gradient(
    62% 78% at 50% 42%,
    var(--tinta) 0%,
    var(--tinta) 34%,
    color-mix(in srgb, var(--tinta) 34%, transparent) 72%,
    color-mix(in srgb, var(--tinta) 16%, transparent) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background var(--lento) var(--paso);
}

/* Si el navegador no recorta el degradado dentro del texto, el titular se
   quedaría invisible. Esto lo devuelve a tinta plana. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .cierre-titular { background: none; color: var(--tinta); }
}

.cierre-acciones {
  margin-top: clamp(34px, 4.5vw, 52px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 34px);
  flex-wrap: wrap;
}
.cierre-cta { width: auto; }

/* El secundario, subrayado y sin caja: pesa menos que el botón y se lee
   como la salida alternativa que es. */
.cierre-enlace {
  font-size: 15px;
  color: var(--tinta-media);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--linea);
  transition: color 240ms var(--paso), border-color 240ms var(--paso);
}
.cierre-enlace:hover { color: var(--tinta); border-color: var(--tinta-suave); }
.cierre-enlace:focus-visible { outline: 1.5px solid var(--ambar); outline-offset: 4px; }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.pie {
  max-width: 1240px;
  margin: 0 auto;
  padding: 30px clamp(20px, 5vw, 56px) 64px;
  border-top: 1px solid var(--linea-fina);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 300;
  color: var(--tinta-suave);
  transition: border-color var(--lento) var(--paso), color var(--lento) var(--paso);
}
.pie-marca-bloque { display: grid; gap: 5px; }
.pie-marca {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--tinta);
  transition: color var(--lento) var(--paso);
}
.pie-lema { color: var(--tinta-suave); transition: color var(--lento) var(--paso); }
/* En el pie va un punto por debajo del lema: el lema dice qué es esto, la
   firma quién lo hizo, y ese es el orden en que se leen.

   Sin `opacity`. Bajarla parecía la forma obvia de dejarla callada, pero la
   opacidad se salta el solucionador de contraste —que trabaja sobre colores,
   no sobre transparencias— y hundía la firma a 2,28:1, por debajo de lo que
   garantiza todo lo demás. `--tinta-suave` ya es el tono callado, y ese sí
   está cubierto. */
.pie-firma {
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso);
}

/* ── El selector de idioma ─────────────────────────────────────────────
   Enlaces de verdad y no un desplegable: un buscador tiene que poder
   seguirlos para encontrar las otras versiones de la página. El idioma
   actual no es enlace, que es lo que dice cuál estás leyendo. */
.idiomas {
  flex-basis: 100%;
  display: flex;
  /* Ocho idiomas no caben en una fila de móvil: sin esto la fila medía
     491 px y era la segunda causa de que la página se arrastrara de lado.
     El `row-gap` es aparte del de columna: entre renglones hace falta menos
     aire que entre palabras. */
  flex-wrap: wrap;
  gap: 18px;
  row-gap: 4px;
  padding-top: 22px;
  margin-top: 4px;
  border-top: 1px solid var(--linea-fina);
  transition: border-color var(--lento) var(--paso);
}
.idiomas a, .idiomas .idioma-actual {
  font-size: 12.5px;
  font-weight: 400;
  text-decoration: none;
  transition: color 200ms var(--paso);
}
.idiomas a { color: var(--tinta-suave); }
.idiomas a:hover { color: var(--tinta); }
.idiomas .idioma-actual { color: var(--tinta); font-weight: 600; }

.pie-enlaces { display: flex; gap: 22px; }
.pie-enlaces a {
  color: var(--tinta-media);
  text-decoration: none;
  transition: color 240ms var(--paso);
}
.pie-enlaces a:hover { color: var(--tinta); }

/* ══════════════════════════════════════════════════════════════════════
   Accesibilidad
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    animation-duration: 1ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   La galería de interruptores
   ══════════════════════════════════════════════════════════════════════

   Solo la vitrina: la caja, el nombre y la nota. Los botones de dentro se
   estilan enteros desde `interruptores.css`, que es copia literal del
   escaparate y no se toca desde aquí. Si esta hoja empezara a corregir a
   aquella, la galería dejaría de enseñar la verdad.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Los colores ─────────────────────────────────────────────────────── */
.colores {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 3.5vw, 40px);
}
.colores-titulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso);
}
.colores-fila { display: flex; gap: 8px; flex-wrap: wrap; }

.color-chip {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 9px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  font-size: 13px;
  color: var(--tinta-media);
  transition: border-color 240ms var(--paso), color 240ms var(--paso),
              background 240ms var(--paso);
}
.color-chip:hover { border-color: var(--tinta-suave); color: var(--tinta); }
.color-chip:focus-visible { outline: 1.5px solid var(--ambar); outline-offset: 2px; }
.color-chip[aria-pressed="true"] {
  border-color: var(--tinta);
  color: var(--tinta);
}

/* El punto lleva el color de verdad de cada variante, sacado de las mismas
   ocho variables que usa el botón. Un cuadro gris con el nombre al lado
   obligaría a pulsarlo para saber de qué color es. */
.color-punto {
  width: 15px; height: 15px;
  border-radius: 50%;
  flex: none;
  border: 1px solid rgba(20, 16, 12, .16);
}
.color-punto--claro   { background: #ffffff; }
.color-punto--oscuro  { background: #23201b; }
.color-punto--laton   { background: #a8865c; }
.color-punto--brutal  { background: #ffffff; border: 2px solid #111214; }
.color-punto--neon    { background: #14100c; box-shadow: inset 0 0 0 1px rgba(255,191,105,.75); }
.color-punto--cristal { background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.35)); }

/* ── La vitrina ──────────────────────────────────────────────────────── */
/* Cinco columnas: son diez, y asi salen dos filas llenas. Con 230px de
   minimo entraban cuatro y la ultima fila se quedaba a medias. */
.galeria {
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}

/* Columna flexible, no rejilla.
   Con `grid` cada tarjeta repartia su alto a su manera y, como las notas
   no miden lo mismo, las escenas quedaban a distinta altura: los diez
   interruptores dejaban de poderse comparar, que es para lo unico que
   esta la seccion. Asi el pie ocupa lo suyo y la escena se queda con TODO
   el resto, igual en las diez. */
.muestra {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linea-fina);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--fondo-alto);
  transition: background var(--lento) var(--paso), border-color var(--lento) var(--paso);
}

/* La escena tiene alto fijo y el botón va centrado: así los diez se
   comparan en igualdad, que es para lo que está la sección. La cadenita
   necesita sitio arriba porque cuelga. */
.muestra-escena {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: 22px 18px;
  background: var(--fondo-hondo);
  transition: background var(--lento) var(--paso);
}

.muestra-pie {
  flex: none;
  display: grid;
  gap: 4px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--linea-fina);
  transition: border-color var(--lento) var(--paso);
}
.muestra-titulo {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
/* Tres lineas de hueco reservadas, ocupelas o no.
   Las notas no miden lo mismo, y sin esto el pie de cada tarjeta media
   distinto: como la escena se queda con lo que sobra, los interruptores
   acababan a seis alturas distintas. Igualando el PIE se igualan las diez
   escenas, que es lo que permite compararlos. */
.muestra-nota {
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.5;
  min-height: calc(12.5px * 1.5 * 3);
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso);
}

/* La cadenita cuelga del borde de arriba de su escena, como colgaría del
   borde de la pantalla en una tienda. Sin esto se sale de la caja. */
.muestra-escena .lightsoff-boton--cadenita {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* ══════════════════════════════════════════════════════════════════════
   La atmósfera de la noche, en CSS
   ══════════════════════════════════════════════════════════════════════

   Lo que le falta al estado nocturno: ahora mismo es un marrón plano. Esto
   es luz cálida cayendo sobre una pared, moviéndose muy despacio.

   Pesa CERO. Y hace de referencia de lo que habría que pedirle a un modelo
   de vídeo si algún día se quiere una versión filmada — misma idea, mismos
   límites: sin lámpara a la vista, cámara fija, nada que contar.

   ── Qué se anima y qué no ───────────────────────────────────────────
   Solo `transform` y `opacity`. Las dos las resuelve el compositor sin
   volver a calcular el diseño ni repintar, así que esto no le cuesta nada
   al navegador aunque esté siempre corriendo. Animar la posición de un
   degradado —que es lo obvio— obligaría a repintar un rectángulo enorme en
   cada cuadro.

   ── Por qué dos focos y no uno ──────────────────────────────────────
   Uno solo se lee como un óvalo que se mueve. Dos, con periodos que no son
   múltiplos —31 s y 23 s—, no vuelven a coincidir en un ciclo corto, y eso
   es lo que hace que parezca luz y no una animación en bucle.
   ══════════════════════════════════════════════════════════════════════ */

.ambiente-luz {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--lento) var(--paso);
}
html.noche .ambiente-luz { opacity: 1; }

.luz {
  position: absolute;
  border-radius: 50%;
  /* El degradado no llega a un borde duro: se va a cero mucho antes del
     radio, que es lo que hace que no se le vea la circunferencia. */
  will-change: transform, opacity;
}

/* El foco de arriba: el que hace de fuente. Cálido y más cerrado. */
.luz--alta {
  top: -28%;
  left: 8%;
  width: 62%;
  aspect-ratio: 1;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 186, 105, 0.30) 0%,
    rgba(255, 158, 74, 0.13) 34%,
    rgba(255, 140, 50, 0.04) 58%,
    transparent 72%
  );
  animation: deriva-alta 31s ease-in-out infinite;
}

/* El de abajo: el rebote en la pared. Más ancho, más tenue y más rojo. */
.luz--baja {
  bottom: -34%;
  right: -6%;
  width: 78%;
  aspect-ratio: 1;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 148, 60, 0.16) 0%,
    rgba(214, 106, 32, 0.07) 40%,
    transparent 70%
  );
  animation: deriva-baja 23s ease-in-out infinite;
}

/* Los recorridos son cortos a propósito. Una lámpara no se mueve: lo que
   se mueve es cómo cae su luz cuando el filamento respira. Un recorrido
   largo se lee como una animación; uno corto, como luz. */
@keyframes deriva-alta {
  0%   { transform: translate3d(0, 0, 0) scale(1);        opacity: 0.85; }
  38%  { transform: translate3d(4%, 3%, 0) scale(1.07);   opacity: 1;    }
  71%  { transform: translate3d(-3%, 5%, 0) scale(0.97);  opacity: 0.78; }
  100% { transform: translate3d(0, 0, 0) scale(1);        opacity: 0.85; }
}

@keyframes deriva-baja {
  0%   { transform: translate3d(0, 0, 0) scale(1);        opacity: 0.7;  }
  44%  { transform: translate3d(-5%, -2%, 0) scale(1.1);  opacity: 0.95; }
  78%  { transform: translate3d(3%, 2%, 0) scale(0.95);   opacity: 0.62; }
  100% { transform: translate3d(0, 0, 0) scale(1);        opacity: 0.7;  }
}

/* El grano de la pared.
   Sin él, dos degradados sobre un fondo liso producen bandas visibles
   —el escalonado del degradado— justo en los tonos oscuros, que es donde
   vivimos. Un ruido finísimo las rompe. */
.luz-grano {
  position: absolute;
  inset: -50%;
  background-image:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(255, 255, 255, 0.014) 0deg 1deg,
      transparent 1deg 2deg
    );
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: 0.5;
}

/* Quien haya pedido menos movimiento se queda con la luz quieta, no sin
   luz: la atmósfera es del diseño, el movimiento es el adorno. */
@media (prefers-reduced-motion: reduce) {
  .luz--alta, .luz--baja { animation: none; }
}

/* En móvil el texto va SOBRE el vídeo, igual que en escritorio.
   ══════════════════════════════════════════════════════════════════════
   Antes iba en banda arriba y el texto debajo, y tenía un motivo: con un
   clip 16:9, `cover` en vertical se comía casi todo el ancho y dejaba una
   franja del centro sin bombilla ni interruptor. Ese motivo desapareció con
   el clip vertical: es 9:16, o sea la pantalla de un teléfono, y `cover`
   apenas recorta los lados.

   El clip está compuesto para esto: bombilla en el tercio de arriba,
   interruptor sobre el centro, y el tercio de abajo es pared vacía. Ahí va
   el texto, alineado al fondo, con un velo de abajo arriba que le da fondo
   sin apagar la bombilla —la misma idea que el velo lateral de escritorio,
   girada—.

   La firma y los tres datos no caben sin pisar el interruptor del clip
   (47–57 % de la altura): fuera del hero en móvil. El titular, la
   entradilla y el botón sí, y eso es el hero. */
@media (max-width: 760px) {
  .hero {
    min-height: 100svh;
    align-content: end;
    padding: 110px 0 24px;
  }
  .hero::after {
    background: linear-gradient(
      to top,
      var(--fondo) 0%,
      color-mix(in srgb, var(--fondo) 90%, transparent) 30%,
      color-mix(in srgb, var(--fondo) 45%, transparent) 55%,
      transparent 78%
    );
  }
  .hero-texto > .firma,
  .hero-texto > .hero-datos { display: none; }

  /* El bloque de texto tiene que empezar por debajo del interruptor del
     clip, que acaba al 57 % de la altura. Medido: con los márgenes de
     escritorio medía ~400 px y la etiqueta pisaba el borde de la placa.
     Aquí cada margen a lo justo, y fuera la pista «Try it»: el botón ya
     dice «Turn off the lights», y esos 40 px son los que faltaban. */
  .hero-texto > .etiqueta { margin-bottom: 12px; }
  .hero-texto > .entradilla { margin-top: 16px; }
  .hero-acciones { margin-top: 16px; padding-left: 0; }
  .hero-pista { display: none; }
}

/* ── La página que no existe ───────────────────────────────────────────
   Centrada y corta. Una 404 se lee en dos segundos y lo único que tiene
   que hacer es devolverte a algún sitio, así que no lleva navegación ni
   nada más que pulsar. */
.perdida {
  min-height: 74vh;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(80px, 14vh, 180px) clamp(20px, 5vw, 40px) 60px;
  display: grid;
  align-content: center;
  gap: 4px;
}
.perdida-titulo {
  margin: 22px 0 0;
  font-size: clamp(38px, 6.5vw, 66px);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.perdida-texto {
  margin: 26px 0 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--tinta-media);
  max-width: 48ch;
}
.perdida-acciones {
  margin-top: 40px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}


/* ══════════════════════════════════════════════════════════════════════
   Lo que se toca con el dedo
   ══════════════════════════════════════════════════════════════════════
   Con ratón, un enlace de 21 px de alto se acierta siempre. Con el pulgar
   no: la norma pide 24 px y lo cómodo son 44, que es lo que mide la yema.

   Medido en la página antes de esto: los enlaces del pie a 21 px, las
   pastillas de color a 37 y la cadenita a 15 px de ANCHO.

   El truco de todo el bloque es agrandar la caja que recibe el toque sin
   mover lo que se ve —relleno hacia fuera, margen negativo que lo
   devuelve—. Nada cambia de sitio; solo hay más superficie donde acertar. */
@media (max-width: 620px) {
  /* Los enlaces del pie y los idiomas. Van en línea, así que el relleno
     vertical agranda la zona sensible sin tocar la altura del renglón; el
     `row-gap` de arriba ya deja sitio para que no se solapen. */
  .idiomas a,
  .idiomas .idioma-actual,
  .pie-enlaces a {
    display: inline-block;
    padding: 11px 0;
    margin: -11px 0;
  }

  /* Las pastillas de color del selector: 37 px se quedaban a un pelo. */
  .color-chip { min-height: 44px; }

  /* La marca de la barra: es el enlace a la portada y medía 27 px de alto. */
  .marca {
    padding-top: 9px;
    padding-bottom: 9px;
    margin-top: -9px;
    margin-bottom: -9px;
  }

  /* La cadenita es la más difícil de acertar de las diez: se dibuja como
     una cadena de 15 px de ancho. El relleno la ensancha a 47 sin moverla
     —el `translateX(-50%)` centra la caja entera, y un relleno simétrico
     deja el dibujo donde estaba—.

     Se hace aquí y no en `interruptores.css`, que es copia literal del
     escaparate y no se toca: re-sincronizarlo es volver a copiar el bloque,
     y un arreglo escondido dentro se perdería en la siguiente copia. */
  .muestra-escena .lightsoff-boton--cadenita {
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   El interruptor en pantallas de 320
   ══════════════════════════════════════════════════════════════════════
   Acoplado en la barra, el interruptor con su texto mide 201 px. Con la
   marca (88), el hueco (10) y su separación (26) son 325 px de contenido
   dentro de los 280 útiles de una pantalla de 320: se salía 45 px y quedaba
   cortado justo por el lado por el que se toca.

   Recortar márgenes no llega: hay que quitar el texto. Pero solo AHÍ.

   `.barra--posada` es la clase que el JavaScript pone cuando el interruptor
   ya se ha acoplado —la misma que enciende el regulador—, así que sirve
   para distinguir los dos sitios donde vive el mismo botón: en el hero
   conserva su «Turn off the lights», que es la frase que enseña para qué
   sirve, y arriba se queda en la tecla, que a esas alturas ya se ha
   entendido.

   Va al final del fichero a propósito: `.barra .interruptor` aparece más
   abajo con su `margin-left`, y una regla con la misma especificidad puesta
   antes no le gana. Aquí no hay nada después. */
@media (max-width: 374px) {
  .barra--posada .interruptor-texto { display: none; }
  .barra--posada .interruptor { padding-right: 9px; }
}


/* ══════════════════════════════════════════════════════════════════════
   La galería de interruptores en móvil
   ══════════════════════════════════════════════════════════════════════
   Mirado en un iPhone: el `minmax(196px, 1fr)` caía a UNA columna, y diez
   interruptores a tarjeta completa —escena de 240 px y un pie que reserva
   tres líneas para una nota de una— eran cinco pantallas de scroll con
   medio cuerpo en blanco cada una. Es una galería: se mira de un vistazo,
   comparando. Dos columnas, escena más baja, pie más prieto.

   La reserva de líneas de la nota se mantiene —es lo que iguala las
   escenas para que los diez se comparen a la misma altura—, pero medida
   para lo que ocupa una nota a este ancho, no para el de escritorio. */
@media (max-width: 620px) {
  .galeria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .muestra-escena {
    min-height: 112px;
    padding: 16px 10px;
    /* Los interruptores anchos —los que llevan texto— no se salen de una
       escena de 140 px: se recortan antes que romper la rejilla. */
    overflow: hidden;
  }
  /* Los dos que llevan rótulo —«Apagar la luz»— miden 160 px y la escena
     130: el texto se partía en dos líneas y se leía como un botón roto. Se
     encogen con `zoom` y no con `transform`: `zoom` cambia la caja de
     verdad, así que la escena los centra bien, y no pisa el `transform`
     que el propio botón usa al pulsarse. */
  .muestra-escena .lightsoff-boton--interruptor,
  .muestra-escena .lightsoff-boton--texto { zoom: 0.74; }
  .muestra-escena .lightsoff-texto { white-space: nowrap; }
  .muestra-pie { padding: 10px 12px 12px; gap: 3px; }
  .muestra-titulo { font-size: 13px; }
  .muestra-nota {
    font-size: 11.5px;
    line-height: 1.45;
    min-height: calc(11.5px * 1.45 * 3);
  }
}

/* La cadenita, de noche, sin rectángulo detrás.
   El área táctil que se le da más arriba ensancha su caja de 15 a 47 px. De
   día no se nota porque `.lightsoff-boton--cadenita` lleva `background:
   none`; de noche pierde contra `html.lightsoff-noche .lightsoff-boton`, que
   tiene más peso y pinta fondo y sombra en toda la caja —y con 47 px de caja
   se ve un bloque claro detrás de la cadena—. La página pone las dos clases
   de noche a la vez, así que se cubren las dos. */
html.noche .muestra-escena .lightsoff-boton--cadenita,
html.lightsoff-noche .muestra-escena .lightsoff-boton--cadenita {
  background: none;
  box-shadow: none;
  border: 0;
}


/* ══════════════════════════════════════════════════════════════════════
   Nunca una sola columna
   ══════════════════════════════════════════════════════════════════════
   Regla del merchant, y con razón: todo `repeat(auto-fit, minmax(270px, 1fr))`
   de la página cae a una columna por debajo de ~600 px, y una rejilla de seis
   ventajas o de cuatro métricas apilada de una en una deja de ser una
   rejilla: es una lista larga que hay que recorrer entera para compararla.
   A dos columnas se abarca de un vistazo, que es para lo que está.

   Lo que SÍ se queda apilado, a propósito, porque no son rejillas de
   elementos sino parejas texto + figura: `.seccion--dos`, `.argumento-cuerpo`
   y `.precio-fila`. Partirlas en dos sería un párrafo de 160 px.

   Cuando hay un número impar, el último ocupa la fila entera en vez de
   quedarse huérfano a media anchura. */
@media (max-width: 620px) {
  .ventajas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 14px;
  }
  .pasos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 14px;
  }
  .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .precio-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
  }
  .ventajas > :last-child:nth-child(odd),
  .pasos > :last-child:nth-child(odd),
  .metricas > :last-child:nth-child(odd),
  .app-lista > :last-child:nth-child(odd),
  .precio-lista > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  /* Los tres datos del hero, en fila que envuelve y no en columna. */
  .hero-datos {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 18px;
  }
}


/* El botón en el hero, en pantallas de 320.
   Vive en la barra y al hero solo baja en vertical, así que en el hero
   ocupa la misma columna que arriba: marca (88) + hueco (10) + separación
   (26) lo dejan en x = 144, y con sus 201 px se sale 25 por la derecha.
   Visto en captura: «Turn off the light—» cortado justo en el hero, que es
   donde más importa. Sin la separación y con un pelo menos de relleno
   termina en 315 de 320. Va al final del fichero por lo de siempre: la
   regla base está más abajo que el corte de 620 y hay que ganarle por
   orden. */
@media (max-width: 374px) {
  .barra .interruptor { margin-left: 0; padding-right: 14px; }
}


/* El precio de las fichas, en una línea.
   A 320 la tarjeta mide 135 px y el precio partía en dos: «168» arriba y
   «€» debajo, que se lee como un error de maquetación. El precio no parte
   nunca; si algo tiene que envolver es el nombre, que para eso es texto. */
@media (max-width: 620px) {
  .ficha-precio { white-space: nowrap; }
}





/* ══════════════════════════════════════════════════════════════════════
   El vuelo del interruptor, sin pasar por el hilo principal
   ══════════════════════════════════════════════════════════════════════
   El JavaScript de arriba ya no fuerza reflujo, pero sigue escribiendo un
   estilo por cuadro desde el hilo principal: si ese hilo está ocupado —y en
   un móvil lo está— el botón llega tarde igual, solo que menos.

   Donde el navegador lo soporta, el recorrido se declara como una animación
   atada al scroll. La lleva el COMPOSITOR: el botón y la página se mueven
   en el mismo cuadro, pase lo que pase en el hilo principal. No hay temblor
   posible porque no hay nada que pueda llegar tarde.

   Chrome 115+ y Safari 26+. Donde no esté, el JavaScript sigue haciendo su
   trabajo exactamente igual; esto solo lo mejora, no lo sustituye.

   El recorrido es `--baja-0`, que lo escribe el mismo JavaScript al medir. */
@keyframes lightsoff-vuelo {
  from { transform: translateY(var(--baja-0, 0px)); }
  to { transform: translateY(0); }
}

@supports (animation-timeline: scroll()) {
  .barra .interruptor {
    animation: lightsoff-vuelo linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px var(--baja-0, 1px);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   El muro
   ══════════════════════════════════════════════════════════════════════
   Una pared de producto a sangre y un interruptor en medio. La rejilla de
   arriba enseña cómo se ve una colección; esto enseña la escala —lo que
   pasa cuando son cuarenta y se apagan a la vez—, que es el argumento que
   no cabe en seis fotos.

   Ocupa la pantalla entera a propósito: una pared que no llega a los
   bordes no es una pared, es una rejilla con más fotos. */
.muro {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--fondo-hondo);
  transition: background var(--suelo) var(--paso);
}

/* La rejilla va en absoluto y DESBORDA por abajo a propósito: se piden
   cuarenta piezas y se ven las que quepan, que en un móvil son doce y en un
   monitor ancho cuarenta. Así la pared está siempre llena sin que nadie
   tenga que contar columnas. */
.muro-rejilla {
  position: absolute;
  inset: 0;
  display: grid;
  /* El suelo estuvo en 118 —tres columnas en un móvil de 390— cuando las
     piezas salían en lonchas de 129x51 y con tres ya costaba leerlas.
     Arreglada la proporción, a 76 px se ve la lámpara entera y caben
     cinco columnas: 40 piezas en vez de 15, que es lo que esta sección
     dice que enseña. En escritorio no cambia nada, porque ahí manda el
     techo de 150.

     El `vw` sube de 11 a 16,5 por el tablet: con 11 el suelo de 74 le
     daba 8 columnas de 94 px —tamaño de móvil en una pantalla que no lo
     es— y hacían falta 72 piezas para llenarlo. Con 48 pares eso son 24
     repetidas. A 16,5 el tablet se queda en 6 columnas y 42 piezas, por
     debajo de los 48 pares, y ningún ancho repite. */
  grid-template-columns: repeat(auto-fill, minmax(clamp(74px, 16.5vw, 150px), 1fr));
  /* `auto` y no `1fr`. Con `1fr` las filas se repartían la altura del muro,
     que con `inset: 0` es fija: en escritorio salían 5 filas y se notaba
     poco, pero en un móvil de 390 caben 3 columnas, o sea 14 filas para
     743 px — 51 px por fila. Las piezas quedaban en 129x51, proporción
     2,5, y `cover` recortaba cada lámpara a una tira horizontal. Con
     `auto` la fila mide lo que mide la pieza y la rejilla desborda por
     abajo, que es lo que este comentario decía desde el principio y no
     estaba pasando. */
  grid-auto-rows: auto;
  gap: 2px;
  pointer-events: none;
}

/* La pieza es `.ficha-marco` para heredar el escalonado, pero no debe
   parecer una ficha: sin borde, sin radio y llenando su celda, que es lo
   que hace que se lea como pared y no como catálogo.

   `aspect-ratio: auto` a propósito, contra el 1/1 que trae `.ficha-marco`.
   Con una proporción fija la pieza medía su ancho de columna —150 px—
   dentro de una fila de `1fr` —180— y sobraban 30: la pared salía con
   bandas blancas horizontales entre filas y la última cortada por la
   mitad. Llenando la celda no hay banda ni corte. */
.muro .muro-pieza {
  /* Proporción fija, y por eso las filas son `auto`: así la fila mide
     exactamente lo que la pieza y no hay ni banda ni recorte raro. Con
     filas de `1fr` esto mismo dejaba bandas blancas —de ahí venía el
     `aspect-ratio: auto` que había aquí—; arreglado el reparto de filas,
     la proporción puede volver.

     4/5 y no 1/1 aunque las fotos sean cuadradas: en vertical caben menos
     filas, y con 48 pares eso mantiene la pared sin repetir ni una. A 1/1
     harían falta 54 piezas en escritorio y volverían las repetidas. */
  aspect-ratio: 4 / 5;
  height: auto;
  border: 0;
  border-radius: 0;
  background: var(--fondo-hondo);
}
.muro-pieza img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* La pared es FONDO, y se comporta como tal.
   ═════════════════════════════════════════════════════════════════
   Un velo plano y flojo sobre todo el muro, nada más. Hubo antes un
   viñeteado radial —y luego uno con desenfoque— para abrir un claro en el
   centro, y no funcionó: medido, la luminancia detrás del titular iba de 15
   a 253 sobre 255. Contra cuarenta fotos distintas un degradado no gana,
   porque el peor píxel manda y siempre hay uno malo.

   Lo que sí gana es darle al texto su propia superficie. Ver `.muro-centro`. */
.muro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--fondo) 22%, transparent);
  transition: background var(--suelo) var(--paso);
}

/* La placa.
   ═════════════════════════════════════════════════════════════════
   El texto va sobre el fondo de la página, no sobre las fotos: así el
   contraste es el mismo que en el resto del sitio y no depende de qué
   lámpara haya caído detrás. El desenfoque del fondo deja adivinar la
   pared por debajo —que sigue siendo el argumento— sin que compita.

   `color-mix` al 86 % y no opaco: un rectángulo macizo sobre la pared se
   lee como un cartel pegado encima; con algo de transparencia se lee como
   parte de la misma escena. */
.muro-centro {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0;
  max-width: min(560px, calc(100% - 40px));
  padding: clamp(32px, 4.4vw, 52px) clamp(24px, 4vw, 48px) clamp(34px, 4.4vw, 54px);
  border-radius: var(--radio);
  border: 1px solid var(--linea-fina);
  background: color-mix(in srgb, var(--fondo) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  box-shadow: var(--sombra-alta);
  transition: background var(--suelo) var(--paso), border-color var(--lento) var(--paso);
}
/* Sobre fotos, el gris de las etiquetas del resto de la página se pierde.
   Aquí va en el ámbar de la marca, que además es el color de la luz. */
.muro-centro > .etiqueta {
  color: var(--ambar-hondo);
  margin-bottom: 18px;
}

.muro-titulo {
  margin: 0;
  font-size: clamp(32px, 5.6vw, 62px);
  font-weight: 200;
  line-height: 1.02;
  letter-spacing: -0.038em;
  color: var(--tinta);
  transition: color var(--lento) var(--paso);
}
.muro-pie {
  margin: 18px 0 0;
  max-width: 34ch;
  font-size: clamp(15px, 1.7vw, 17px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--tinta-media);
  transition: color var(--lento) var(--paso);
}
/* El interruptor del muro no vuela ni se acopla: vive aquí y se queda. */
.interruptor--muro { margin-top: 32px; }

@media (max-width: 620px) {
  .muro { min-height: 88svh; }
  .muro-rejilla { gap: 2px; }
  .muro-centro {
    max-width: calc(100% - 32px);
    padding: 28px 22px 30px;
  }
  .interruptor--muro { margin-top: 26px; }
}


/* ══════════════════════════════════════════════════════════════════════
   La página de colección
   ══════════════════════════════════════════════════════════════════════
   La rejilla sola se leía como una galería. Lo que la convierte en LA
   TIENDA DE ALGUIEN no son las fotos, son las cuatro cosas que rodean a
   cualquier colección de Shopify: migas, título, recuento con su orden, y un
   «ver más» al final. Son gratis y hacen todo el trabajo de reconocimiento.

   Van deliberadamente discretas —gris, pequeñas, sin botón macizo—: tienen
   que dar contexto, no competir con el producto, igual que en una tienda de
   verdad. */
.tienda-migas {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso);
}
.tienda-barra-sep { opacity: 0.45; }

.tienda-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  padding-bottom: 16px;
  margin-bottom: clamp(18px, 2.4vw, 28px);
  border-bottom: 1px solid var(--linea-fina);
  transition: border-color var(--lento) var(--paso);
}
.tienda-titulo {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 200;
  letter-spacing: -0.032em;
  color: var(--tinta);
  transition: color var(--lento) var(--paso);
}
.tienda-controles {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-size: 13px;
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso);
}
/* El selector de orden: el borde de abajo es lo que lo hace leer como un
   control y no como texto suelto, sin tener que dibujar una caja. */
.tienda-orden {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--linea);
  transition: border-color var(--lento) var(--paso);
}
.tienda-orden::after { content: " be"; opacity: 0.55; }

.tienda-mas {
  display: flex;
  justify-content: center;
  margin-top: clamp(26px, 3.4vw, 40px);
}
.tienda-mas span {
  padding: 11px 26px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--tinta-media);
  transition: color var(--lento) var(--paso), border-color var(--lento) var(--paso);
}

/* La honestidad de la simulación: se dice que es un ejemplo. Un montón de
   cromo de tienda sin esta línea se lee como que estas son NUESTRAS
   lámparas, y no lo son. */
.tienda-nota {
  margin: 20px 0 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 300;
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso);
}

/* ── La ficha, con lo que lleva una de verdad ─────────────────── */
.ficha-marca {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  transition: color var(--lento) var(--paso);
}
.ficha-precios { display: inline-flex; align-items: baseline; gap: 8px; }
.ficha-antes {
  font-size: 13px;
  color: var(--tinta-suave);
  text-decoration-thickness: 1px;
  transition: color var(--lento) var(--paso);
}

/* La señal de rebaja va sobre la foto, como en cualquier tema. En ámbar y
   no en rojo: el rojo de oferta es justo lo que hace barata a una tienda,
   y aquí además chocaría con el color de la luz. */
.ficha-senal {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fondo);
  background: var(--tinta);
  transition: background var(--lento) var(--paso), color var(--lento) var(--paso);
}
html.noche .ficha-senal { background: var(--ambar); color: #1d1103; }

@media (max-width: 620px) {
  .tienda-cabeza { padding-bottom: 12px; }
  .tienda-controles { width: 100%; justify-content: space-between; gap: 12px; }
  .ficha-marca { font-size: 10px; letter-spacing: 0.07em; }
  /* A dos columnas la ficha mide 165 px: nombre y precio en la misma fila
     dejan al nombre en cuatro líneas. Apilados. */
  .ficha-pie { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ficha-nombre { font-size: 13.5px; }
  .ficha-precios { justify-self: start; }
}


/* ── La bolsa de Shopify, en el rótulo del hero ────────────────────
   El símbolo oficial, tal cual lo publica Shopify en sus recursos de marca:
   sin recolorear, sin deformar y sin recortar —sus normas de uso lo piden, y
   además un logo ajeno retocado se nota—. Va junto al rótulo que ya dice
   «Shopify app», así que el texto alternativo va vacío: repetir «Shopify» en
   un lector de pantalla no añade nada.

   `vertical-align` en vez de flex: el rótulo es una línea de texto y meterlo
   en una caja flex le cambiaría el interlineado a los ocho idiomas. */
.marca-shopify {
  display: inline-block;
  width: 15px;
  height: auto;
  margin-right: 7px;
  vertical-align: -2px;
}