/* Tono «noche» del sitio "taller_a_medida" (theme.estilo = "noche"). ------------------------------------------------------------------ «Un taller de noche, con las luces encendidas»: el sitio entero es oscuro y cálido, y el cobre de la marca es la luz de la página. Es la minimalista con un segundo atributo, NO una hoja aparte: la plantilla escribe , así que todo lo de taller-minimal.css (disposición, medidas, momentos) sigue valiendo y este archivo solo redefine COLOR, LETRA, fondos por sección, bordes, la luz ambiente y las cifras. Si algo de acá repite una disposición (display, grillas, medidas), está mal: eso ya lo hace la minimalista. Se carga DESPUÉS de taller-minimal.css y solo cuando el estilo es «noche». Todos sus selectores empiezan con html[data-tono="noche"] (0,1,1); los que pisan algo de la minimalista con el mismo selector ganan por orden, y los de las paletas llevan además [data-paleta] (0,2,1) para ganar también al bloque `theme.minimal` del cliente. Nunca se fuerza la prioridad con la bandera de importancia. No lleva ningún dato de un cliente: la marca (--cobre, --cobre-claro, --negro, --hueso) llega por el `theme` y las dos paletas son de la plantilla. Se ajustan por dato con `theme.noche` (ver _colores_noche en el .py). Reglas que este archivo cumple: - La luz ambiente es solo `transform` sobre un degradado radial: sin `filter`, sin `blur`, sin `backdrop-filter`, sin WebGL. - Nada nace invisible: la luz y los marcos se ven sin JavaScript y con movimiento reducido (la luz no se desplaza: solo respira, con opacidad). - Los 6 FX Core siguen en «noche»; lo que cambia es el color con que se ven. - El bloque de movimiento reducido es lo ÚLTIMO de este archivo. Bases de 21st.dev (React + Tailwind, traducidas a CSS plano; la ficha de ninguna declara licencia; los originales están en el banco de comparación): - «aura» de lukedarrendesigns, https://21st.dev/@lukedarrendesigns/components/aura: degradados radiales apilados con el grano encima y sin blur (luz ambiente). No su paleta azul ni la viñeta. - «Radial Glow Background» de meghtrix, https://21st.dev/@meghtrix/components/radial-glow-background: la composición de «bosque», una mancha verde en una esquina sobre casi negro. - «Spotlight» de kevingirelli, https://21st.dev/@kevingirelli/components/spotlight: el filete iluminado del borde de las cifras, recortado con `mask`. No la luz que cruza la tarjeta entera ni el `motion`. - «Count Up» de unlumen, https://21st.dev/@unlumen/components/count-up: en taller.js (contador de las cifras). No el resorte ni el deslizar por dígito. Estructura: 1 variables y paletas · 2 letra · 3 fondos por sección · 4 etiquetas y cabezas · 5 barra, burbuja y llamados · 6 tablones, galería y piedra · 7 luz ambiente · 8 imaginar · 9 cifras · 10 legado, contacto y pie · 11 FX y detalles · 12 movimiento reducido (siempre al final). */ /* ====================================================================== 1. Variables y las dos paletas Contrastes calculados con la fórmula WCAG: texto ≥ 4,5:1, bordes de campos ≥ 3:1. Los nombres con prefijo `--n-` son los de la paleta; abajo se asignan a los de la minimalista (--fondo, --tinta…) en y también en .cierre y .pie, donde la minimalista los vuelve a definir. ====================================================================== */ /* «grafito»: negro cálido, el negro y el cobre del logo. */ html[data-tono="noche"][data-paleta="grafito"]{ --n-fondo:#0E0D0C; --fondo-2:#141311; --fondo-3:#1B1917; --n-tinta:#F2EFE9; --n-tinta-2:#B8B2AA; --etiqueta:var(--cobre-claro); --n-borde:#2A2724; --n-borde-campo:#78716C; --n-panel:rgba(14,13,12,.88); --luz-a:rgba(181,86,30,.08); --luz-b:rgba(242,239,233,.045); } /* «bosque»: casi negro con tinte verde (el cobre con pátina). La etiqueta es bronce: sobre verde-negro el cobre claro se vuelve naranja y pelea con el verde. */ html[data-tono="noche"][data-paleta="bosque"]{ --n-fondo:#121613; --fondo-2:#171C18; --fondo-3:#1E2520; --n-tinta:#F2EFE9; --n-tinta-2:#B8B2AA; --etiqueta:#C9A55E; --n-borde:#2A322C; --n-borde-campo:#6F7A72; --n-panel:rgba(18,22,19,.88); --luz-a:rgba(93,138,112,.11); --luz-b:rgba(181,86,30,.07); } /* Lo común a las dos. */ html[data-tono="noche"][data-paleta]{ --fondo:var(--n-fondo); --tinta:var(--n-tinta); --tinta-2:var(--n-tinta-2); --borde:var(--n-borde); --borde-campo:var(--n-borde-campo); --panel:var(--n-panel); --campo:var(--fondo-2); --blanco:var(--fondo-3); --cobre-texto:var(--cobre-claro); /* enlaces y números encendidos */ --cobre-suave:color-mix(in srgb,var(--cobre) 22%,transparent); /* el trazo detrás de los nombres */ --marco:rgba(242,239,233,.10); /* el filete de 1 px de las fotos */ --f-serif:"Newsreader","Newsreader-respaldo","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Noto Serif",serif; --polvo-alfa:.14; --polvo-max:24; --tilt-max:1; color-scheme:dark; /* los controles nativos (select, barras, dialog) salen oscuros */ } /* El cierre y el pie: la minimalista los pinta de negro y les invierte los neutros; acá toman los de la paleta. Con 3 clases de especificidad ganan sin importar el orden. */ html[data-tono="noche"][data-paleta] .cierre, html[data-tono="noche"][data-paleta] .pie{ --fondo:var(--n-fondo); --tinta:var(--n-tinta); --tinta-2:var(--n-tinta-2); --borde:var(--n-borde); --borde-campo:var(--n-borde-campo); --panel:var(--n-panel); --cobre-texto:var(--cobre-claro); background:var(--fondo);color:var(--tinta)} html[data-tono="noche"] .cierre{border-top:0} /* entre secciones no hay líneas: el cambio de tono separa */ /* «mixta» (Enrique, 2026-10-28: «puede ser ambos»): la base es «grafito» —el negro y el cobre del logo— y tres tramos van en «bosque»: la piedra, los pasos y el final (legado, contacto y pie). Al bajar, el sitio alterna cálido y verde, como la referencia alterna sus tonos. Son los mismos valores de las dos paletas: nada nuevo que medir en contraste. En los tramos verdes se repiten también las variables derivadas (--fondo, --tinta…): una variable que usa var() se resuelve donde se declara, y las de ya vienen calculadas. */ html[data-tono="noche"][data-paleta="mixta"]{ --n-fondo:#0E0D0C; --fondo-2:#141311; --fondo-3:#1B1917; --n-tinta:#F2EFE9; --n-tinta-2:#B8B2AA; --etiqueta:var(--cobre-claro); --n-borde:#2A2724; --n-borde-campo:#78716C; --n-panel:rgba(14,13,12,.88); --luz-a:rgba(181,86,30,.08); --luz-b:rgba(242,239,233,.045); } html[data-tono="noche"][data-paleta="mixta"] #piedra, html[data-tono="noche"][data-paleta="mixta"] #pasos, html[data-tono="noche"][data-paleta="mixta"] .cierre, html[data-tono="noche"][data-paleta="mixta"] .pie{ --n-fondo:#121613; --fondo-2:#171C18; --fondo-3:#1E2520; --n-tinta:#F2EFE9; --n-tinta-2:#B8B2AA; --etiqueta:#C9A55E; --n-borde:#2A322C; --n-borde-campo:#6F7A72; --n-panel:rgba(18,22,19,.88); --luz-a:rgba(93,138,112,.11); --luz-b:rgba(181,86,30,.07); --fondo:var(--n-fondo); --tinta:var(--n-tinta); --tinta-2:var(--n-tinta-2); --borde:var(--n-borde); --borde-campo:var(--n-borde-campo); --panel:var(--n-panel); --campo:var(--fondo-2); --blanco:var(--fondo-3); } /* «crema» (Enrique, 2026-10-31: «ya no quiero el verde bosque… el color que dijimos y el negro arriba, tipo elegante»): la misma alternancia que «mixta», pero los tramos que eran verdes —la piedra, los pasos y el final (legado, contacto y pie)— van en un crema cálido con tinta oscura. Arriba (inicio, cinta, Lo que hacemos, Trabajos) e «Imagina tu mueble» siguen en grafito. Contrastes sobre #F3EEE6 (WCAG): tinta 14,8:1, tinta-2 6,5:1, cobre de texto 6,3:1, borde de campos 3,4:1. Dentro del cierre y del pie la minimalista usa --hueso como color del texto (son campos negros): ahí también pasa a tinta, y el cobre claro de sus enlaces, al profundo. */ html[data-tono="noche"][data-paleta="crema"]{ --n-fondo:#0E0D0C; --fondo-2:#141311; --fondo-3:#1B1917; --n-tinta:#F2EFE9; --n-tinta-2:#B8B2AA; --etiqueta:var(--cobre-claro); --n-borde:#2A2724; --n-borde-campo:#78716C; --n-panel:rgba(14,13,12,.88); --luz-a:rgba(181,86,30,.08); --luz-b:rgba(242,239,233,.045); } html[data-tono="noche"][data-paleta="crema"] #piedra, html[data-tono="noche"][data-paleta="crema"] #pasos, html[data-tono="noche"][data-paleta="crema"] .cierre, html[data-tono="noche"][data-paleta="crema"] .pie{ --n-fondo:#F3EEE6; --fondo-2:#EDE6DA; --fondo-3:#E7DED0; --n-tinta:#1F1B17; --n-tinta-2:#5B534B; --etiqueta:#8F3F12; --n-borde:#DCD3C7; --n-borde-campo:#8A8178; --n-panel:rgba(243,238,230,.94); --luz-a:rgba(181,86,30,.07); --luz-b:rgba(31,27,23,.035); --fondo:var(--n-fondo); --tinta:var(--n-tinta); --tinta-2:var(--n-tinta-2); --borde:var(--n-borde); --borde-campo:var(--n-borde-campo); --panel:var(--n-panel); --campo:var(--fondo-2); --blanco:var(--fondo-3); --hueso:#1F1B17; --hueso-2:#5B534B; --cobre-claro:#8F3F12; --cobre-texto:#8F3F12; --marco:rgba(31,27,23,.10); color-scheme:light; /* El color del texto se hereda YA calculado desde (claro, de la paleta oscura): cada tramo crema fija el suyo, o los títulos quedaban casi blancos sobre crema. */ color:var(--tinta); } /* Las palabras del legado parten tenues y se encienden al bajar: sobre crema, tenues de tinta. */ html[data-tono="noche"][data-paleta="crema"].js-reveal .cierre .pal:not(.on){color:rgba(31,27,23,.32)} /* Partículas sobre crema: cobre y dorado (los puntos claros no se verían). */ html[data-tono="noche"][data-paleta="crema"] :is(#piedra,#pasos,.cierre,.pie) .polvo{color:#B5561E; --polvo-brillo:#C9A55E;--polvo-alfa:.5} /* Respaldo de la serif: mientras baja Newsreader (`swap`) se ve Palatino con un ajuste de tamaño, así el salto de letra casi no mueve el texto. Va DESPUÉS de Newsreader en la pila: antes, ganaría siempre y Newsreader nunca se vería en Windows. */ @font-face{font-family:"Newsreader-respaldo"; src:local("Palatino Linotype"),local("Palatino"),local("Book Antiqua");size-adjust:104%} /* ====================================================================== 2. Letra: títulos en serif de peso medio, texto en Archivo El h1 de la escena NO se toca: por eso no se redefine --f-titulo. ====================================================================== */ html[data-tono="noche"] body{font-size:1rem} @media (min-width:900px){html[data-tono="noche"] body{font-size:1.0625rem}} html[data-tono="noche"] h2{font-family:var(--f-serif);font-weight:500; font-size:clamp(2.25rem,1.5rem + 3vw,4rem);line-height:1.05;letter-spacing:-.01em; text-wrap:balance} html[data-tono="noche"] h3, html[data-tono="noche"] .servicio-nombre, html[data-tono="noche"] .banda-texto h3, html[data-tono="noche"] .servicio-rotulo, html[data-tono="noche"] .piedra-nombre{font-family:var(--f-serif);font-weight:500; font-size:1.625rem;line-height:1.2;letter-spacing:0} /* Las palabras de los títulos tras su máscara: la serif tiene descendentes más largas. */ html[data-tono="noche"] .m{padding-bottom:.18em;margin-bottom:-.18em} /* Bajadas de cabeza: Archivo 400 en tinta-2. */ html[data-tono="noche"] .frase-grande{font-size:1rem;line-height:1.6;color:var(--tinta-2)} @media (min-width:900px){html[data-tono="noche"] .frase-grande{font-size:1.0625rem}} /* La frase grande del legado, en serif. Los dos selectores igualan a los de la minimalista (con y sin `legado-solo`). */ html[data-tono="noche"] #legado .frase-grande, html[data-tono="noche"] #legado .legado-solo .frase-grande{font-family:var(--f-serif);font-weight:500; font-size:clamp(1.625rem,1.2rem + 1.8vw,2.5rem);line-height:1.25;letter-spacing:0;color:var(--tinta)} html[data-tono="noche"] #legado .legado-solo h2{font-family:var(--f-serif);font-weight:500; font-size:1.625rem;letter-spacing:0} /* Ticker: Archivo 400, separadores en el color de las etiquetas. */ html[data-tono="noche"] .ticker-pista li{font-weight:400} html[data-tono="noche"] .ticker-pista li::after{color:var(--etiqueta)} /* ====================================================================== 3. Fondos por sección: el ritmo de tres tonos escena (suya) → ticker --fondo → 01 --fondo → 02 --fondo-2 → 03 --fondo-3 → 04 --fondo → 05 --fondo-2 → 06 --fondo-3 → 07 y pie --fondo. ====================================================================== */ html[data-tono="noche"] #hacemos, html[data-tono="noche"] #pasos.campo{background:var(--fondo)} html[data-tono="noche"] #trabajos, html[data-tono="noche"] #imaginar{background:var(--fondo-2)} html[data-tono="noche"] #piedra, html[data-tono="noche"] #legado{background:var(--fondo-3)} /* Las tres que llevan luz: su propio plano de apilado, para que la luz no se escape. */ html[data-tono="noche"] #hacemos, html[data-tono="noche"] #pasos, html[data-tono="noche"] #contacto{isolation:isolate} /* Los dos tonos del ritmo en el cierre: el legado tapa el lienzo de partículas y el grano (solo se ven en el contacto, que no tiene fondo propio, y en el pie). */ /* ====================================================================== 4. Etiquetas y cabezas de sección Etiqueta: Archivo 500, mayúsculas, 14 px, tracking .12em, color metal. El «01 · Lo que hacemos» sale de la plantilla (número + texto del menú). ====================================================================== */ html[data-tono="noche"] .seccion-num, html[data-tono="noche"] .filtros button, html[data-tono="noche"] .datos dt, html[data-tono="noche"] .visor-cerrar{letter-spacing:.12em;color:var(--etiqueta)} html[data-tono="noche"] .campo-fila label{color:var(--etiqueta);letter-spacing:.12em;text-transform:uppercase} /* La línea de 1 px de cada cabeza se queda, en --borde. El contador de trabajos: la cifra en serif y el texto como etiqueta. */ html[data-tono="noche"] .contador{font:500 .875rem/1.45 var(--f-texto);letter-spacing:.12em; text-transform:uppercase;color:var(--etiqueta)} html[data-tono="noche"] .contador .cnt{font-family:var(--f-serif);font-size:1.625rem;line-height:1; letter-spacing:0;text-transform:none;color:var(--tinta)} /* ====================================================================== 5. Barra, burbuja y llamados ====================================================================== */ html[data-tono="noche"] .marca-logo-claro{display:block} /* la plantilla no escribe el oscuro si hay claro */ /* La burbuja es la misma y única: cobre con texto blanco fijo (el hueso daría 4,2:1). Al pasar el cursor «se enciende» (cobre claro con texto negro, 7,3:1); no cambia de forma. */ html[data-tono="noche"] .llamado:hover, html[data-tono="noche"] .llamado:active{background:none} /* el botón «píldora + disco» se invierte por piezas */ html[data-tono="noche"] .cierre-llamado .enlace-llamado-texto{font-family:var(--f-serif);font-weight:500} html[data-tono="noche"] .llamado:focus-visible{outline-color:var(--hueso)} /* Enlaces secundarios del tablón abierto. */ html[data-tono="noche"] .servicio-texto .enlace{color:var(--cobre-claro);text-decoration-color:currentColor} /* El llamado gigante del cierre, en serif y en cobre claro (el disco magnético es el de la minimalista). */ html[data-tono="noche"] .enlace-llamado.cierre-llamado{font-family:var(--f-serif);font-weight:500; letter-spacing:-.01em} /* «Crear imagen →»: contorno de tinta; al pasar el cursor se rellena de hueso con texto negro. */ html[data-tono="noche"] .enlace.grande:not(:disabled):hover{background:var(--tinta);color:var(--negro)} /* ====================================================================== 6. Tablones, galería y piedra ====================================================================== */ /* Marcos: un filete de 1 px al .10 (decorativo), hacia adentro, que no cambia el layout. Donde la foto es un hijo posicionado (que taparía el `outline` de su padre) el filete es un pseudoelemento encima. */ html[data-tono="noche"] .servicio-foto, html[data-tono="noche"] .caso-fotos figure, html[data-tono="noche"] .caso-ad figure, html[data-tono="noche"] .legado-foto img{outline:1px solid var(--marco);outline-offset:-1px} html[data-tono="noche"] .caso-fotos figure, html[data-tono="noche"] .caso-ad figure, html[data-tono="noche"] .legado-foto img{border-radius:var(--radius-foto)} html[data-tono="noche"] .trabajo .marco::before, html[data-tono="noche"] .banda-imagenes::after, html[data-tono="noche"] .imaginar-marco::after{content:"";position:absolute;inset:0;z-index:2; border-radius:inherit;outline:1px solid var(--marco);outline-offset:-1px;pointer-events:none} @media (max-width:899px){html[data-tono="noche"] .banda-imagenes{position:relative}} /* 01 · Los seis tablones: cerrados sobre --fondo-2, número en la etiqueta, hover más claro. */ html[data-tono="noche"] .servicio-cabeza::before, html[data-tono="noche"] .piedra-franja::before{color:var(--etiqueta)} @media (min-width:1000px){ html[data-tono="noche"] .servicio-cabeza:hover{background:var(--fondo-3)} /* El panel plano sobre la foto: borde fino y radio chico (la tarjeta de Kitchen Lux). */ html[data-tono="noche"] .servicio-texto{border:1px solid var(--borde);border-radius:var(--radius)} } /* Acordeón del teléfono: el «+» abierto se rellena de hueso con la X negra. */ html[data-tono="noche"] .servicio[open] .servicio-signo::before, html[data-tono="noche"] .servicio[open] .servicio-signo::after, html[data-tono="noche"] .piedra-panel[open] .piedra-signo::before, html[data-tono="noche"] .piedra-panel[open] .piedra-signo::after{background:var(--negro)} /* 02 · Trabajos: el velo de la galería sube a .55 con --fondo-2 (sobre oscuro el .45 casi no se nota). */ html[data-tono="noche"] .trabajo .marco::after{background:var(--fondo-2)} html[data-tono="noche"].js-reveal .galeria.velada .trabajo .marco::after{opacity:.55} /* «Antes» / «Después»: etiqueta sobre el panel plano. */ html[data-tono="noche"] .caso-ad figcaption{background:var(--panel)} html[data-tono="noche"] .caso-ad figcaption b{color:var(--etiqueta);font-weight:500;letter-spacing:.12em; text-transform:uppercase} /* El visor de fotos. */ html[data-tono="noche"] .visor{background:var(--fondo)} html[data-tono="noche"] .visor::backdrop{background:rgba(0,0,0,.82)} html[data-tono="noche"] .visor-cerrar{border-color:var(--borde-campo)} html[data-tono="noche"] .visor-cerrar:hover{background:var(--hueso);color:var(--negro)} /* 03 · La piedra: la sección «de la muestra», la más clara. El panel plano con borde fino. */ html[data-tono="noche"] .banda-imagenes figcaption{font-weight:500;letter-spacing:.12em; text-transform:uppercase;color:var(--etiqueta)} @media (min-width:900px){ html[data-tono="noche"] .banda-texto{border:1px solid var(--borde);border-radius:var(--radius)} } /* 04 · Cuatro pasos: la línea gris se ve (--borde desaparecería sobre oscuro) y los números, en serif, se encienden de metal al pasar la línea. */ html[data-tono="noche"] .pasos::before{background:var(--borde-campo)} html[data-tono="noche"] .paso::before{font-family:var(--f-serif);font-weight:500;letter-spacing:0; color:var(--etiqueta)} /* ====================================================================== 7. Luz ambiente (solo en 01, 04 y 07) Dos manchas radiales muy tenues que derivan en diagonal durante medio minuto. Solo `transform`: cada mancha se rasteriza una vez y el compositor la mueve. Sin blur, sin cursor, sin color que cambie. La pausa fuera de pantalla la pone taller.js (`.en-pantalla`). ====================================================================== */ html[data-tono="noche"] .luz{position:absolute;inset:0;z-index:0;pointer-events:none;contain:strict} html[data-tono="noche"] .luz::before, html[data-tono="noche"] .luz::after{content:"";position:absolute;width:90vw;height:90vw; max-width:900px;max-height:900px;border-radius:50%;will-change:transform; animation:luz-deriva 32s ease-in-out infinite alternate} html[data-tono="noche"] .luz::before{top:-22%;left:-18%; background:radial-gradient(closest-side,var(--luz-a),transparent 72%)} html[data-tono="noche"] .luz::after{display:none;bottom:-28%;right:-12%; background:radial-gradient(closest-side,var(--luz-b),transparent 72%); animation-duration:40s;animation-delay:-14s} @media (min-width:900px){ html[data-tono="noche"] .luz::before, html[data-tono="noche"] .luz::after{width:70vw;height:70vw} html[data-tono="noche"] .luz::after{display:block} } @keyframes luz-deriva{to{transform:translate(6%,4%)}} /* Con JavaScript, la luz se detiene fuera de pantalla. Sin él, corre siempre (son tres capas). */ html[data-tono="noche"].js-reveal .luz::before, html[data-tono="noche"].js-reveal .luz::after{animation-play-state:paused} html[data-tono="noche"].js-reveal .luz.en-pantalla::before, html[data-tono="noche"].js-reveal .luz.en-pantalla::after{animation-play-state:running} /* «Pausar movimiento» (botón del pie): la luz se queda donde está. Sin forzar con «important» (esta hoja no lo usa): el selector con .mov-pausado le gana por especificidad a la regla de arriba y al bloque de movimiento reducido del final. */ html[data-tono="noche"].mov-pausado.js-reveal .luz.en-pantalla::before, html[data-tono="noche"].mov-pausado.js-reveal .luz.en-pantalla::after, html[data-tono="noche"].mov-pausado .luz::before, html[data-tono="noche"].mov-pausado .luz::after{animation-play-state:paused} /* ====================================================================== 8. Imagina tu mueble: la caja sobre --fondo-3 ====================================================================== */ html[data-tono="noche"] .imaginar-caja{background:var(--fondo-3)} /* Las píldoras: contorno, texto de tinta, fondo transparente y la flecha en hueso. */ html[data-tono="noche"] .campo-fila select{background-color:transparent;color:var(--tinta); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F2EFE9' stroke-width='1.25'/%3E%3C/svg%3E")} html[data-tono="noche"] .campo-fila select option{background:var(--fondo-3);color:var(--tinta)} /* El marco del resultado: el filete en vez del borde, sobre --fondo-3 para que se distinga. */ html[data-tono="noche"] .imaginar-marco, html[data-tono="noche"] .imaginar-marco[data-ejemplo]{border:0;background:var(--fondo-3)} /* ====================================================================== 9. Cifras (ui_copy.cifras) Tarjeta de borde fino, apenas más oscura que el --fondo-3 de la sección. Al pasar el cursor se enciende el filete del borde cerca del puntero (taller.js escribe --mx y --my en la tarjeta). Sin cursor fino, sin JavaScript o con movimiento reducido: borde quieto. ====================================================================== */ html[data-tono="noche"] .cifras{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px; padding-top:0;border-top:0} html[data-tono="noche"] .cifra{position:relative;isolation:isolate;padding:24px; border:1px solid var(--borde);border-radius:var(--radius);background:var(--fondo-2)} html[data-tono="noche"] .cifra-valor{font-family:var(--f-serif);font-weight:500; font-size:clamp(2.5rem,2rem + 2vw,3.5rem);line-height:1;letter-spacing:0;color:var(--tinta)} html[data-tono="noche"] .cifra-sufijo{color:var(--etiqueta)} html[data-tono="noche"] .cifra-etiqueta{margin-top:8px;font-weight:500;letter-spacing:.12em; color:var(--etiqueta)} @media (max-width:699px){ /* Una columna; cada tarjeta es una fila: el valor a la izquierda y la etiqueta a la derecha. */ html[data-tono="noche"] .cifras{grid-template-columns:1fr} html[data-tono="noche"] .cifra{display:grid;grid-template-columns:auto 1fr;align-items:baseline; gap:16px;padding:16px 20px} html[data-tono="noche"] .cifra-valor{font-size:2.5rem} html[data-tono="noche"] .cifra-etiqueta{margin-top:0} } /* El filete iluminado: un degradado radial centrado en el puntero, recortado al borde de 1 px con dos máscaras que se restan. Sin puntero encima el centro queda fuera de la tarjeta, así que no se ve nada. Donde no existe `mask-composite`, el degradado llenaría la tarjeta: no se pinta. */ @supports (mask-composite:exclude){ html[data-tono="noche"] .cifra::before{content:"";position:absolute;inset:-1px;z-index:-1; padding:1px;border-radius:inherit;pointer-events:none; background:radial-gradient(160px circle at var(--mx,-300px) var(--my,-300px), color-mix(in srgb,var(--etiqueta) 35%,transparent),transparent 70%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude} } /* ====================================================================== 10. Legado, contacto y pie ====================================================================== */ /* Las palabras de la frase: apagadas al .45 de tinta hasta que se leen (al .30 casi no se leían en el teléfono). */ html[data-tono="noche"].js-reveal .pal{color:rgba(242,239,233,.45); color:color-mix(in srgb,var(--tinta) 45%,transparent)} html[data-tono="noche"].js-reveal .pal.on{color:var(--tinta)} /* Los datos del contacto: etiqueta en metal, enlaces en cobre claro (ya vienen de --cobre-texto). */ html[data-tono="noche"] .datos dd{color:var(--tinta)} /* Partículas con brillo en TODAS las secciones (Enrique, 2026-10-28: «partículas que se mueven», «movimiento de puntero» donde no hay nada): del color de las etiquetas de cada tramo (cobre en grafito, bronce en bosque), un 30 % en hueso. Sin líneas (--polvo-red:0; Enrique: «solo puntos brillantes que al pasar el ratón interactúen»): las que quedan cerca del puntero crecen y brillan. 80 es el tope por lienzo; taller.js pone menos en una pantalla angosta (más puntos se medían caros: con la CPU frenada, de 65 a 80 en el computador los cuadros perdidos pasaban de 25 a 35 %). */ html[data-tono="noche"] .polvo, html[data-tono="noche"] .cierre .polvo, html[data-tono="noche"] .pie .polvo{color:var(--etiqueta);--polvo-brillo:var(--hueso); --polvo-alfa:.9;--polvo-max:80;--polvo-red:0} /* El nombre grande del pie, en serif, recortado por el borde; el logo 3D de metal es la pieza que más brilla. */ html[data-tono="noche"] .pie .nombre-grande{font-family:var(--f-serif);font-weight:500;letter-spacing:-.03em} html[data-tono="noche"] .pie .lema p{font-family:var(--f-serif);font-weight:500;letter-spacing:-.025em} html[data-tono="noche"] .pasos-franja-titulo{font-family:var(--f-serif);font-weight:500} /* ====================================================================== 11. FX y detalles de todo el sitio El cursor ya es de tinta (hueso) en la minimalista; acá los puntos laterales y su rótulo. ====================================================================== */ html[data-tono="noche"] .punto::before{border-color:var(--borde-campo)} html[data-tono="noche"] .punto[aria-current="true"]::before{background:var(--cobre-claro); border-color:var(--cobre-claro)} html[data-tono="noche"] .puntos.sobre-oscuro .punto:not([aria-current="true"])::before{border-color:var(--borde-campo)} html[data-tono="noche"] .punto::after{letter-spacing:.12em;color:var(--etiqueta)} html[data-tono="noche"] .puntos.sobre-oscuro .punto::after{background:var(--panel);color:var(--etiqueta)} /* ====================================================================== 12. Movimiento reducido (siempre al final) Con «reducir movimiento»: suave, no quieto (el dueño dijo que un sitio quieto se sentía frío). La luz ya no se desplaza: RESPIRA, solo opacidad que sube y baja lento, y por eso no marea. No hay filete que siga al puntero. Las palabras del legado y los números de los pasos se encienden igual (es color, no movimiento), así que acá ya no se fuerzan a su estado final. ====================================================================== */ @keyframes luz-respira{from{opacity:.6}to{opacity:1}} @media (prefers-reduced-motion:reduce){ html[data-tono="noche"] .luz::before, html[data-tono="noche"] .luz::after{transform:none;will-change:opacity; animation:luz-respira 8s ease-in-out infinite alternate} html[data-tono="noche"] .luz::after{animation-duration:11s;animation-delay:-4s} html[data-tono="noche"] .cifra::before{display:none} }