/* ========================================================================== 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 . 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; aspect-ratio: 4 / 5; 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; } .ficha-pie { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 15px 2px 0; } .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; aspect-ratio: 4 / 3; 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; } .comparador-tapa { position: absolute; inset: 0; width: 50%; overflow: hidden; } .comparador-tapa img { width: auto; height: 100%; max-width: none; } .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. ═════════════════════════════════════════════════════════════════════ Aquí ponía `display: none`, y era cierto que una pastilla vertical pegada al borde izquierdo no cabe al lado del contenido en un móvil. Lo que no se sigue de ahí es quitarla: el regulador es la mitad de lo que vende esta página —apagar del todo, o dejarlo a media luz— y en móvil se quedaba sin enseñar. Un móvil tiene un sitio para esto y no es el lateral: es abajo, en la franja donde llega el pulgar sin recolocar la mano. Así que el mismo mando, tumbado, centrado y flotando sobre el contenido. `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: 14px; padding: 10px 20px; } /* El estado visible también cambia: el `translateY(-50%)` de la versión de escritorio lo centraba en vertical, y aquí lo sacaría de sitio. */ .barra--posada ~ .regulador, .regulador--visible { transform: translateX(-50%); } /* Tumbado. Sin `writing-mode` vuelve a ser un rango normal, y entonces la derecha es más luz, que es lo que espera el dedo al arrastrar. */ .regulador-mando { writing-mode: horizontal-tb; direction: ltr; width: min(48vw, 220px); height: 24px; cursor: ew-resize; } /* Sitio al final de la página para que el mando no tape la última línea del pie de forma permanente. */ .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; } } /* ── El vídeo en pantalla vertical ──────────────────────────────────── Un móvil en vertical contra un clip 16:9: `cover` se comería casi todo el ancho y dejaría una franja del centro, sin bombilla y sin interruptor. Así que en vertical no va a sangre: va en banda arriba, con su proporción intacta, y el texto debajo. Se ve entero, que es lo que importa. */ @media (max-width: 760px) { .hero { min-height: 0; align-content: start; padding-top: 0; } /* Con el vídeo en banda, la barra flotante se le come el borde de arriba. Aquí sí lleva fondo desde el principio. */ .barra { background: color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .ambiente { margin-top: 72px; } .ambiente { position: relative; height: auto; aspect-ratio: 16 / 9; margin-bottom: clamp(24px, 6vw, 40px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%); } /* Con el vídeo en banda, el velo lateral no pinta nada: el texto ya no está encima. */ .hero::after { display: none; } /* Los dos vídeos, en la misma casilla. ════════════════════════════════════════════════════════════════════ Hay dos: el de apagar y el de encender, y el que no toca lleva `visibility: hidden`. En ancho normal da igual, porque van en absoluto y no ocupan. Aquí arriba pasan a `relative` para ir en banda —y entonces el escondido reclama su propia fila de la rejilla—. Eso eran 331 px de página en blanco entre el vídeo y el titular, medidos en un móvil de 375: el visitante abría la web y veía un hueco. `visibility: hidden` esconde, pero no quita sitio; eso solo lo hace no estar en el flujo, o compartir casilla. Comparten casilla, que además es lo que ya hacían en ancho normal. La fila del texto se nombra a mano: con la casilla 1 ocupada por los dos vídeos, el colocado automático podía meter el texto ahí dentro. */ .hero > .ambiente { grid-area: 1 / 1; } .hero > .hero-texto { grid-row: 2; } } /* ── 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; } }