/* ═══════════════════════════════════════════════════════════════════ gigolosos — tokens de diseño ÚNICA fuente de verdad de color, tipografía, espaciado, material y movimiento. Ningún componente declara un valor literal. Si falta un token, se agrega acá; no se hardcodea en el componente. DOS DIRECCIONES CONVIVEN, y el orden importa para leer este archivo. Revisión del 31/07/2026 — "editorial premium". Tinta en vez de negro, luz en vez de sombra, filete en vez de caja, un acento por función. Es la escala que va a continuación y sigue sosteniendo casi todo el sitio: tipografía, espaciado, superficies, foco y estados. Revisión del 15/08/2026 — NEÓN. Decidida por Victor mirando cuatro variantes en pantalla, sobre la ficha real y en el teléfono. El criterio anterior —«un color nuevo exige una función nueva»— queda levantado: acá el color da presencia, no solo significado. Los tokens están en la sección NEÓN y se aplican al final de base.css y perfil.css, sobreescribiendo. Revisión del 14/09/2026 — PALETA DE GIGOLOSOS. La estructura es la heredada y cambian los valores. Victor eligió la variante «A · vino» con el PREMIUM en oro, mirando tres variantes inyectadas sobre la portada y una ficha reales. Los colores salen del sitio viejo y del logo del oso: el vino del trazo (#7B263E), el dorado de la palabra (#DFAC6E), la miel de la olla (#F1C28E), el amarillo de títulos y botones (#F1C40F) y el violeta del moño (#C77BFF). Se tomó la IDENTIDAD, no las parejas: el sitio viejo ponía blanco sobre amarillo (1.66:1) y rosa sobre amarillo (2.88:1). Acá el amarillo lleva texto oscuro encima. LOS NOMBRES DE LOS TOKENS SE CONSERVAN aunque ya no describan el color (--neon-cian es dorado, --magenta es vino). Renombrarlos toca todos los CSS y rompe el cherry-pick desde el código de origen. El nombre dice la FUNCIÓN que tenía allá; el valor es el de gigolosos. Lo que NO cambió con la dirección nueva, y no por inercia: · **WCAG AA en todos los estados.** Cada par está medido. Un dato que no se lee no sirve, y en una ficha lo que no se lee es un teléfono. · **La fotografía es lo único saturado.** El neón vive en filetes, halos y pastillas; nunca encima de una foto ni detrás de un párrafo largo. · **El tarifario conserva sus filetes y sus cifras en serif.** Es la pieza firma; rellenarlo lo volvería una tabla de colores. ═══════════════════════════════════════════════════════════════════ */ :root { /* LO PRIMERO, porque sin esto los controles nativos salen del esquema CLARO del sistema. Se vio el 29/08/2026: el desplegable ABIERTO de «Categoría» y «Comuna» se dibujaba con fondo blanco, y encima le llegaba el `color` claro que hereda del sitio — texto gris claro sobre blanco, ilegible. `color-scheme: dark` es lo que le dice al navegador que pinte en oscuro todo lo que dibuja ÉL y no nosotros: el popup del ``. No es cosmético: es la mitad del tema que el CSS no puede alcanzar. */ color-scheme: dark; /* ═══ COLOR ═══════════════════════════════════════════════════════ Negro con fondo de vino. La escala heredada era azul-tinta; acá toma el matiz del trazo del logo, para que las superficies apiladas se lean como el mismo material que la marca y no como grises sueltos. */ --tinta-0: #080506; /* el más profundo: backdrop del visor */ --noche: #0D0D0D; /* fondo base de página */ --carbon: #161012; /* superficie: tarjeta, panel */ --carbon-2: #1F1417; /* superficie elevada / hover */ --carbon-3: #281A1E; /* superficie sobre superficie */ /* Filetes por luz, no por relieve. En una interfaz oscura, el borde que se lee fino es el que aclara: un gris sólido se ve sucio, un blanco al 7 % se ve como un canto. */ --filete: rgba(255, 255, 255, .07); --filete-vivo: rgba(255, 255, 255, .14); --filete-oro: rgba(214, 178, 96, .38); --filete-rosa: rgba(199, 123, 255, .34); --filete-magenta: rgba(223, 172, 110, .38); /* Texto cálido, heredado: evita el look clínico sin recurrir a un acento de color. */ --hueso: #EDE9E1; --texto-2: #C6C3BC; --humo: #8D95A3; --humo-tenue: #59616F; /* NO cumple AA: ornamento y celdas vacías */ /* ── Acentos. Cada uno con UNA función, ninguna decorativa. ── --oro → beneficio pagado y verificación --lapis → foco e interacción (acá violeta: el moño del logo) --rosa → señal de viaje/tour (acá violeta, ver abajo) Nada más lleva color. */ --oro: #D6B260; --oro-alto: #EBD8A0; --oro-bajo: #96762E; --oro-velo: rgba(214, 178, 96, .10); --lapis: #C77BFF; --lapis-velo: rgba(199, 123, 255, .12); /* --rosa YA NO ES ROSA (14/09/2026): Victor pidió sacar los rosados que quedaran, y éste era el último que se veía —la señal de viaje de la tarjeta y la franja de viaje de la ficha—. Pasa al violeta claro del moño del logo, el mismo valor que --lapis. Se descartaron la miel (es la pastilla de comuna, en la misma tarjeta) y el oro alto (es PREMIUM y verificado). Compartir valor con el foco no confunde: el foco es un anillo que aparece con el teclado, y esto es texto en una pastilla. Medido en el peor caso, sobre --vidrio-denso compuesto encima de una foto blanca: 5.51:1 (el rosa daba 5.44:1). Sobre --neon-sup, 6.95:1. */ --rosa: #C77BFF; --rosa-velo: rgba(199, 123, 255, .12); /* ── Marca: el vino del logo ───────────────────────────────────────── Se llama --magenta por herencia; el nombre no describe el color: acá es el vino del trazo del oso, #7B263E. Es oscuro, así que el relleno lleva texto BLANCO y no --tinta-0, que encima da 2.12:1. Las tres paradas del degradado se midieron con blanco encima, no solo la del medio: en un degradado a 135° la etiqueta cruza la parada clara, y ahí es donde el contraste se cae primero. --magenta-luz #8A2E48 8.19:1 --magenta #7B263E 9.59:1 ← el tono del logo --magenta-sombra #5D0D23 13.57:1 --magenta-claro es la variante para texto y filete SOBRE fondo oscuro —el botón de la cabecera—, donde el vino sería ilegible (2.03:1). Es el dorado de la palabra del logo: 9.50:1 sobre --noche. Función: acción primaria y marca. NO reemplaza al oro, que sigue significando beneficio pagado y verificación — un botón y una señal de PREMIUM tienen que poder distinguirse. OJO: con --magenta-claro y --neon-relleno dorados, el oro de PREMIUM queda cerca de la marca. Victor lo eligió así el 14/09/2026 después de ver la variante con PREMIUM en violeta; si la señal deja de distinguirse, éste es el lugar. Convive con --rosa (violeta, señal de viaje) porque nunca comparten tratamiento: --rosa solo se usa como texto y filete, nunca como relleno. */ --magenta: #7B263E; --magenta-luz: #8A2E48; --magenta-sombra: #5D0D23; --magenta-claro: #DFAC6E; --magenta-velo: rgba(123, 38, 62, .12); /* El único blanco puro del sistema. Existía porque --hueso no alcanzaba AA sobre el color de marca anterior; sobre el vino sí alcanza (7.92:1), pero el botón de marca sigue en blanco (9.59:1) para que un cambio de paleta no cambie reglas de base.css. No se usa en ningún otro sitio: el texto del sitio es --hueso, que es cálido a propósito. */ --blanco: #FFFFFF; --error: #E08A90; --exito: #7FC29B; /* ═══ NEÓN ════════════════════════════════════════════════════════ Dirección elegida por Victor el 15/08/2026, mirando cuatro variantes en pantalla. Reemplaza a «un acento por función» como criterio de color: acá el color da presencia, no solo significado. Lo que NO cambia y no se negocia: WCAG AA. Cada pareja de abajo está MEDIDA, no estimada. En gigolosos los tokens conservan el nombre y la función heredados, con los colores del logo: --neon-magenta y --neon-relleno → amarillo #F1C40F --neon-cian → dorado #DFAC6E --neon-rosa → miel #F1C28E sobre --neon-fondo (#0D0D0D) sobre la pastilla rellena --neon-magenta 11.70:1 AAA texto --tinta-0 sobre --neon-cian 9.50:1 AAA --neon-magenta 12.22:1 AAA --neon-rosa 11.89:1 AAA --neon-violeta-claro 7.45:1 AAA --neon-verde 11.05:1 AAA LA PASTILLA LLEVA TEXTO OSCURO, no blanco: el blanco sobre el amarillo da 1.66:1, y es justo el error del sitio viejo de gigolosos en botones, franjas de tarjeta y tarifas. Es el mismo criterio que ya usaba el botón de oro, que lleva --tinta-0 encima. */ --neon-fondo: #0D0D0D; --neon-sup: #1F0A10; --neon-sup-alta: #2E0E18; --neon-magenta: #F1C40F; --neon-cian: #DFAC6E; --neon-rosa: #F1C28E; --neon-verde: #00E07A; --neon-violeta: #7A2BFF; /* filete y halo; NUNCA relleno con texto */ /* Desde el 16/09/2026 NINGUNA regla lo usa: era la parada de cierre del degradado de .titular__acento, en la portada, y ahí se leía rosado. Se queda definido porque es el moño del logo y es color de marca. */ --neon-violeta-claro: #C77BFF; /* admite texto oscuro encima; es el moño del logo */ --neon-relleno: #F1C40F; /* El degradado va del amarillo al dorado del logo, que es como lo lleva la variante A que eligió Victor. Antes iba a violeta claro; el violeta queda acá para el foco y el acento del titular. Medido en las dos paradas con --tinta-0 encima —12.22:1 y 9.92:1—, porque en un degradado el punto que falla nunca es el del medio. */ --neon-gradiente: linear-gradient(90deg, var(--neon-relleno), var(--neon-cian)); --neon-filete: rgba(241, 196, 15, .35); --neon-filete-cian: rgba(223, 172, 110, .40); /* El halo es lo que hace que esto se lea como neón y no como color plano. Va en la caja, nunca en el texto de párrafo: un resplandor detrás de un texto largo lo vuelve ilegible. */ --neon-halo: 0 0 24px rgba(123, 38, 62, .45); --neon-halo-cian: 0 0 16px rgba(241, 196, 15, .16); --neon-brillo: 0 0 12px rgba(241, 196, 15, .60); /* La escala del halo, de menor a mayor presencia. Estos valores estaban escritos a mano dentro de base.css y perfil.css cuando entró el neón, que es justo lo que este archivo existe para evitar: si mañana cambia --neon-relleno, un halo suelto se queda con el tono viejo y la incoherencia no da error, solo se ve mal. OJO: --neon-halo (arriba) es VINO, rgba(123, 38, 62), y esta escala es AMARILLA, rgba(241, 196, 15), que es --neon-relleno. Son distintos a propósito y así se aprobaron en la variante A: el halo de las cajas tiñe de vino, el de pastillas y botones brilla en dorado. Los rgba repiten a mano el valor del token porque CSS no deja ponerle alfa a una variable hex: al cambiar --neon-relleno hay que cambiarlos. */ --neon-halo-pastilla: 0 0 14px rgba(241, 196, 15, .35); --neon-halo-boton: 0 0 20px rgba(241, 196, 15, .45); --neon-halo-boton-alto: 0 0 28px rgba(241, 196, 15, .65); --neon-halo-foto: 0 0 34px rgba(241, 196, 15, .28); --neon-halo-verde: 0 0 14px rgba(0, 224, 122, .55); /* Los dos brillos que van sobre TEXTO, y son la excepción a la regla de arriba: se permiten porque caen sobre una cifra corta y un nombre, nunca sobre un párrafo. */ --neon-brillo-cifra: 0 0 10px rgba(223, 172, 110, .50); --neon-brillo-nombre: 0 0 22px rgba(241, 196, 15, .40); /* Velo de la categoría activa en el teléfono. A la luz del día un filete de 2 px no se ve y una pastilla sí. Desde el 30/08/2026 los dos rellenan también las pastillas de comuna y edad del pie de la tarjeta, sobre fotografía. MEDIDO en el peor caso posible —el velo de la foto al 94 % compuesto sobre blanco puro, que es el fondo más claro que la pastilla puede llegar a tener—. Con la paleta de gigolosos la comuna (miel sobre velo amarillo) da 7.85:1 y la edad (dorado sobre su velo) 7.06:1, contra los 4.5:1 que pide AA. Antes se reprodujeron los números de la paleta anterior con el mismo cálculo, para asegurar que el método es el mismo. El segundo velo va más bajo (.10) porque son dos colores de distinta luminancia, no un descuido. */ --neon-velo: rgba(241, 196, 15, .14); --neon-velo-cian: rgba(223, 172, 110, .10); /* Presencia: la señal «en línea». Es una función nueva —ni beneficio pagado, ni interacción, ni viaje— y por eso lleva token propio en vez de reutilizar --exito a escondidas. Comparte su valor, y eso es deliberado: el verde de «está conectada» es una convención tan asentada que cualquier otro color obligaría a leer la etiqueta para entender la señal. El alias deja escrito que son dos funciones distintas con el mismo valor, no un uso de más. */ --presencia: var(--exito); /* Contraste medido sobre --noche (#0D0D0D), no estimado: --hueso 16.05:1 AAA --oro 9.62:1 AAA --texto-2 11.04:1 AAA --oro-alto 13.76:1 AAA --humo 6.44:1 AA --lapis 7.13:1 AAA --rosa 7.03:1 AAA --error 7.60:1 AAA --exito 9.34:1 AAA --humo-tenue queda en 3.11:1 y por eso es ornamento, nunca texto. Oro sobre --carbon: 9.31:1. Sobre las superficies vino, --humo da 6.28:1 en --neon-sup y 5.84:1 en --neon-sup-alta. Botones: el de oro da 10.05:1 (--tinta-0 sobre --oro). El de marca da 9.59:1 en su parada media y 8.19:1 en la clara, con --blanco encima. --magenta-claro sobre --noche: 9.50:1. */ /* ═══ TIPOGRAFÍA ══════════════════════════════════════════════════ Instrument Serif carga la voz editorial; Instrument Sans hace el trabajo de interfaz. Autoalojadas y subseteadas, nunca desde CDN. */ --serif: "Instrument Serif", Georgia, "Times New Roman", serif; --sans: "Instrument Sans", system-ui, -apple-system, sans-serif; /* Fluida en los tamaños expresivos, fija en los de dato: una tabla de tarifas que cambia de cuerpo entre breakpoints se lee inestable. */ /* Subidos el 29/08/2026 con la composición nueva. Los dos extremos están MEDIDOS, no elegidos redondos: · 2.75rem es el mínimo a 320 px —el ancho más chico que este proyecto probó— y no desborda: el título envuelve. · 5.5rem es el máximo que deja el titular de la portada en DOS líneas. La columna del titular en el grid del hero mide 620 px (es `1.15fr`), y a 6rem la segunda línea pedía 646: el título se iba a tres líneas y empujaba las cifras fuera de su sitio. Se bajó el cuerpo en vez de ensanchar la columna porque esto era un encargo de tipografía, no de composición. Sigue siendo mayor que los 5rem que había antes. */ --t-hero: clamp(2.75rem, 7.6vw, 5.5rem); --t-display: clamp(2.75rem, 6.5vw, 5.25rem); --t-titulo: clamp(2.5rem, 6.2vw, 4.5rem); --t-seccion: clamp(1.5rem, 2.6vw, 2.125rem); /* La cifra del directorio: los perfiles publicados, las regiones, las categorías. Tiene token propio porque NO es un título de sección aunque hasta el 29/08/2026 usara su tamaño — es un dato, y el comentario de portada.css dice para qué está: «son el argumento de que el sitio tiene contenido real». A --t-seccion, contra un titular de 84 px, ese argumento se decía en voz baja. */ --t-cifra: clamp(2.5rem, 4vw, 3.25rem); /* Subido de 1.3125rem el 30/08/2026, con la meta en pastillas: al ganar peso visual la línea de abajo, el nombre al cuerpo viejo dejaba de mandar en su propio pie. Es la misma corrección que el titular recibió el 29/08, un nivel más abajo. */ --t-tarjeta: 1.4375rem; /* El carrusel es la vitrina y su tarjeta es más grande que la de la grilla, así que el nombre acompaña. Tiene token propio porque la regla vive en `portada.css` —que carga DESPUÉS de `listado.css` y por eso gana— y un literal allá dejaría el tamaño fuera de este archivo. */ --t-tarjeta-carrusel: 1.625rem; --t-tarjeta-destacada: clamp(1.5rem, 2.4vw, 2.125rem); --t-dato: 1.0625rem; --t-cuerpo: 1rem; --t-menor: .9375rem; --t-meta: .8125rem; --t-etiqueta: .6875rem; --peso-normal: 400; --peso-medio: 500; --peso-fuerte: 600; --alto-apretado: .96; /* display: el serif pide menos de 1 */ --alto-titulo: 1.12; --alto-medio: 1.35; --alto-cuerpo: 1.65; /* El serif pide tracking negativo al crecer; la versalita lo pide positivo o se empasta. */ --track-hero: -.035em; /* Composición del titular, elegida el 29/08/2026 mirando cinco variantes en pantalla sobre la portada y un listado reales. Va acá y no en base.css porque son medidas, no reglas: el apriete y la interlínea de un titular son del sistema igual que un tamaño. -.05em es más de lo que pide un texto corrido, y es a propósito: en un serif de display a 80 px el espacio entre letras se ve como un hueco, no como aire. La interlínea baja a .9 por lo mismo — a este tamaño 1.0 abre un canal entre las dos líneas del título. */ --track-titular: -.05em; --alto-titular: .9; --track-display: -.025em; --track-titulo: -.015em; --track-etiqueta: .18em; /* ═══ ESPACIADO ═══════════════════════════════════════════════════ */ --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.25rem; --e-6: 1.5rem; --e-8: 2rem; --e-10: 2.5rem; --e-12: 3rem; --e-16: 4rem; --e-20: 5rem; --e-24: 6rem; --e-32: 8rem; /* Aire entre secciones. Fluido: en un teléfono, 7rem de separación es una pantalla entera perdida. */ --aire: clamp(3.5rem, 8vw, 7rem); --aire-corto: clamp(2rem, 4vw, 3.5rem); --paso: clamp(1.25rem, 4vw, 3rem); /* margen lateral */ --ancho-max: 1320px; --ancho-medio: 980px; --ancho-texto: 62ch; --col-tarjeta: 232px; /* ═══ FORMA ═══════════════════════════════════════════════════════ Radio casi nulo: el lenguaje es de filete y canto, no de pastilla. La pastilla completa existe solo en las señales. */ --radio: 3px; --radio-2: 6px; --radio-pastilla: 999px; --grosor-filete: 1px; --borde: var(--grosor-filete) solid var(--filete); --borde-vivo: var(--grosor-filete) solid var(--filete-vivo); --grosor-foco: 2px; --sep-foco: 3px; --offset-subrayado: .14em; /* ESTOS TRES ESTÁN ATADOS A `RECORTES` EN edicion.py, y nada mantiene esa relación sincronizada. Son los recortes que sufre una foto subida desde el panel, y de ellos sale la zona segura donde cabe la marca de agua: el peor recorte horizontal lo hace la proporción más angosta (3/4) y el peor vertical la más ancha (4/5). Si acá aparece una proporción fuera de ese rango, `RECORTES` deja de describir la realidad y la marca vuelve a caerse por el borde en parte del catálogo, que es exactamente lo que ya pasó una vez. Había un cuarto, `--ratio-hero: 16 / 10`, que no usaba ningún `aspect-ratio` en todo el sitio. Se borró el 26/08/2026: un token apaisado y sin dueño esperando a que alguien lo aplicara a una foto es justo la forma en que esta trampa se dispara sola. */ --ratio-retrato: 3 / 4; --ratio-destacado: 4 / 5; --ratio-ficha: 4 / 5; /* La miniatura de cada auto en /autos-para-sexo-en-chile/. Apaisada —4/3, no 3/4— porque un auto se fotografía de lado y recortarlo a vertical le corta el capó o la cola. NO ENTRA EN `RECORTES` de edicion.py, y esa es la diferencia que importa: esa constante lista los recortes que sufre una foto SUBIDA desde el panel, para calcular dónde cabe la marca de agua. Estas once imágenes son del sitio, viven en static/ y no llevan marca. */ --ratio-auto: 4 / 3; --foto-auto: 7rem; /* Logo de agencia. Caja cuadrada y fija en las dos vistas, con el logo en `contain` adentro: un logo NO se recorta —al revés que una fotografía, donde `cover` es lo correcto—, así que la caja manda y la imagen se acomoda. Fijar los dos lados es además lo que evita la trampa de los atributos width/height del , que el HTML mapea a propiedades CSS: declarar uno solo dejaría pasar el otro. */ --logo-agencia: 8rem; /* ficha /agencia// */ --logo-agencia-mini: 4.5rem; /* listado de agencias */ /* ═══ MATERIAL ════════════════════════════════════════════════════ Lo que separa una interfaz oscura cara de una barata no son las sombras: es la luz. Una superficie oscura se lee sólida cuando tiene un filo superior claro —como el canto de una lámina— y un cuerpo con un degradado mínimo. La sombra solo la despega del fondo. */ /* El token más importante de esta sección: la línea de luz que le da canto a la superficie. */ --filo: inset 0 var(--grosor-filete) 0 rgba(255, 255, 255, .06); --filo-fuerte: inset 0 var(--grosor-filete) 0 rgba(255, 255, 255, .10); --sup-1: linear-gradient(180deg, var(--carbon-2), var(--carbon)); --sup-2: linear-gradient(180deg, var(--carbon-3), var(--carbon-2)); /* Luz cenital de la página. Fija, no scrollea: es una fuente de luz, no una textura. */ --luz-pagina: radial-gradient(120% 70% at 50% -20%, rgba(123, 38, 62, .22), transparent 60%), radial-gradient(90% 50% at 85% 5%, rgba(241, 196, 15, .05), transparent 55%); /* Grano. Una capa oscura plana se ve digital; con grano se ve como material impreso. SVG de ruido en data-URI, sin petición de red. Es el truco que más cambia la sensación por byte gastado. */ --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); --grano-opacidad: .04; /* Velo sobre fotografía. Cinco paradas y no dos: con dos, el degradado corta la imagen en una diagonal visible. La curva suave deja respirar el rostro y da contraste al texto de abajo. */ --velo-foto: linear-gradient( to top, rgba(9, 12, 17, .94) 0%, rgba(9, 12, 17, .80) 22%, rgba(9, 12, 17, .38) 46%, rgba(9, 12, 17, .08) 68%, rgba(9, 12, 17, 0) 84%); --velo-foto-hover: linear-gradient( to top, rgba(9, 12, 17, .96) 0%, rgba(9, 12, 17, .86) 26%, rgba(9, 12, 17, .48) 52%, rgba(9, 12, 17, .14) 72%, rgba(9, 12, 17, 0) 88%); /* Oro: siempre degradado y siempre en línea. Un relleno dorado plano es la diferencia exacta entre premium y bisutería. */ --oro-linea: linear-gradient(135deg, var(--oro-alto), var(--oro), var(--oro-bajo)); --oro-suave: linear-gradient(135deg, rgba(235, 216, 160, .16), rgba(214, 178, 96, .06)); /* Vino de marca, con la misma construcción que el oro: degradado de tres paradas y nunca un plano. La parada del medio es el tono literal del logo. */ --magenta-linea: linear-gradient(135deg, var(--magenta-luz), var(--magenta), var(--magenta-sombra)); --magenta-suave: linear-gradient(135deg, rgba(223, 172, 110, .16), rgba(123, 38, 62, .10)); /* Vidrio */ /* Fondo del visor de fotos: más denso que el vidrio de la cabecera porque detrás hay una página entera que tiene que desaparecer. */ --velo-visor: rgba(6, 9, 13, .82); --vidrio: rgba(16, 21, 29, .72); --vidrio-denso: rgba(11, 15, 21, .90); --desenfoque: saturate(150%) blur(18px); /* Elevación en dos capas: una corta que asienta el objeto, una larga que lo separa del fondo. Ninguna difusa y grande — ese es el halo barato del rubro. */ --sombra-1: 0 1px 2px rgba(4, 6, 10, .40), 0 3px 8px -3px rgba(4, 6, 10, .45); --sombra-2: 0 2px 4px rgba(4, 6, 10, .45), 0 12px 28px -10px rgba(4, 6, 10, .60); --sombra-3: 0 4px 8px rgba(4, 6, 10, .50), 0 28px 56px -18px rgba(4, 6, 10, .75); --sombra-4: 0 8px 16px rgba(4, 6, 10, .55), 0 48px 96px -32px rgba(4, 6, 10, .85); --halo-oro: 0 0 0 1px var(--filete-oro), 0 12px 40px -16px rgba(214, 178, 96, .45); --halo-magenta: 0 0 0 1px var(--filete-magenta), 0 12px 40px -16px rgba(123, 38, 62, .55); --halo-lapis: 0 0 0 1px rgba(199, 123, 255, .45), 0 10px 32px -14px rgba(199, 123, 255, .40); /* Filetes internos de las señales sobre fotografía. */ --canto-oro: inset 0 0 0 1px var(--filete-oro); /* Contorno OSCURO para una señal sobre fotografía. Existe desde el 30/08/2026 y por la misma razón que el contorno de la marca de agua: un color fijo falla contra la foto del color contrario. Un filete dorado sobre una sábana blanca no separa nada —lo vio Victor— y por eso la pastilla lleva los dos, oscuro por fuera y oro por dentro. Medido: sobre foto blanca el contorno da 14.11:1 contra la foto. */ --canto-oscuro: 0 0 0 1px rgba(4, 6, 10, .85); /* La brasa de la celda PREMIUM. Elegida por Victor el 30/08/2026 entre tres variantes vistas EN MOVIMIENTO —una captura no distingue un resplandor fijo de uno que respira—. Los dos extremos del ciclo, y 6 s porque a menos se lee como parpadeo y a más deja de percibirse como algo vivo. */ --brasa-baja: 0 0 18px -8px rgba(214, 178, 96, .40); --brasa-alta: 0 0 34px -4px rgba(235, 216, 160, .75); --brasa-ciclo: 6s; /* El resplandor difuso de `--halo-oro`, suelto. Se necesita aparte porque la señal PREMIUM quiere ese brillo pero NO el anillo dorado que `--halo-oro` trae pegado: el suyo es oscuro. */ --resplandor-oro: 0 12px 40px -16px rgba(214, 178, 96, .45); --canto-rosa: inset 0 0 0 1px var(--filete-rosa); --canto-magenta: inset 0 0 0 1px var(--filete-magenta); /* ═══ MOVIMIENTO ══════════════════════════════════════════════════ Una sola curva en todo el sitio: arranque decidido, llegada suave. Sin rebotes — el rebote es simpático, no caro. */ --curva: cubic-bezier(.22, .68, .30, 1); --curva-foto: cubic-bezier(.18, .78, .26, 1); --trans-rapida: .16s var(--curva); --trans-media: .26s var(--curva); --trans-suave: .34s var(--curva); --trans-lenta: .58s var(--curva-foto); --zoom-foto: 1.05; /* Cuánto se levanta un elemento al pasar el cursor. Tres pasos según el peso de la pieza: mientras más grande, más se levanta. */ --alza-1: 1px; --alza-2: 2px; --alza-3: 3px; } /* Quien pidió menos movimiento recibe el mismo diseño quieto: el material —luz, grano, degradados, oro— se mantiene íntegro; se apaga solo lo que se desplaza. */ @media (prefers-reduced-motion: reduce) { :root { --trans-rapida: 0s; --trans-media: 0s; --trans-suave: 0s; --trans-lenta: 0s; --zoom-foto: 1; --alza-1: 0px; --alza-2: 0px; --alza-3: 0px; } }