/* ============================================================================
NEGRA MATEA · identidad visual — fuente única de variables
v2 · agosto 2026 · LA PALETA DEL PÓSTER
----------------------------------------------------------------------------
Este archivo es la ÚNICA fuente de color, tipografía, radios, sombras y
escalas de la marca. Landing, marketing, generador y EL ESPEJO cuelgan de acá.
Cómo se usa:
y después solo variables: color: var(--tinta); font-family: var(--fuente-texto);
QUÉ CAMBIÓ RESPECTO DE LA v1
----------------------------
La v1 construía una gama de tonos de piel inventada por nosotros. Está entera
e intacta en «paleta-v1-piel.css»: no se borró, se puede volver.
Esta v2 la reemplaza por una paleta que **no inventamos**: es la que la marca
ya usa. Ahí está toda la diferencia — la otra había que enseñarla; a esta su
gente ya la reconoce.
**La interfaz de tokens NO cambió.** Los mismos nombres (--fondo, --texto,
--acento, --linea-*, los pulsos, .en-negro, las variables del claim) siguen
existiendo. Cambiaron los valores. Quien enlazó este archivo no reescribe
nada. Lo único que se jubila es la escala --piel-NN: sigue viva por
compatibilidad, pero ya no es piel. Ver la sección 0.
============================================================================
EL ARGUMENTO DE LA PALETA
-------------------------
Fuente: respaldo/referencias/ig-negrxq-feria-muralla-cafe.png — el póster de
la feria en Muralla Café, publicado por la propia marca e ilustrado por un
tercero. **Vive fuera del repo a propósito**: `respaldo/` está gitignoreado.
Es un pantallazo de Instagram con arte de otro autor y material del cliente,
así que no corresponde que se publique con el código. En disco sigue ahí para
consultarlo.
**Tomamos su paleta, no su estilo de ilustración**: el dibujo es de otro autor.
El sistema gráfico sigue siendo nuestro.
CÓMO SE MUESTREÓ — y por qué importa
------------------------------------
El archivo es un pantallazo, y el visor de Instagram le superpone un degradado
oscuro en el borde superior. Si uno cuentagotea ahí, saca valores apagados y
corridos. Dos personas ya cayeron en esa trampa el mismo día.
El método que da los valores buenos, y que hay que repetir si alguien
re-muestrea: recortar SOLO el área del póster (fuera de la interfaz de
Instagram), contar los píxeles exactos y quedarse con los colores planos que
superan el 0,4 % de la superficie. El póster es de tintas planas: los colores
verdaderos aparecen como picos enormes en el conteo, y todo lo demás es
antialias del dibujo.
valor real (muestreo limpio) valor si NO se descuenta el degradado
amarillo #F8E65A #E9D94F ← apagado y verdoso
negro #03040E #0E0F15 ← levantado
azul #2452CA #2651C2 (casi igual: la franja está abajo)
coral #EA7A4F #EB7D51 (casi igual: está lejos del borde)
Los dos que se corren son justamente los dos que mandan: el amarillo, que es
el papel de la marca, y el negro, que es el protagonista.
Con el muestreo limpio, el póster tiene exactamente CUATRO colores planos, y
ninguno es blanco:
· negro azulado #03040E — 18 % de la superficie · la mano y el espejo
· amarillo ácido #F8E65A — 17 % · el campo donde pasa todo
· azul eléctrico #2452CA — 5 % · los rellenos que saltan
· coral #EA7A4F — 2 % · la línea de todo el dibujo
Tres cosas salen de ahí y mandan sobre lo demás:
1. **El papel de esta marca es amarillo, no blanco.** El damero de las camisas
que parece blanco es coral sobre el mismo amarillo del fondo: blanco puro
es el 0,05 % del póster. Una pieza sobre fondo blanco está fuera de la
marca aunque se vea prolija.
2. **El negro sigue siendo el protagonista**, como en la v1 y por la misma
razón: es la mano y es el espejo, es masa y es tinta. Cambió de temperatura
—ahora es azulado, no cálido—, no de jerarquía.
3. **El coral dibuja, no escribe.** En el póster es siempre línea o relleno de
ilustración, jamás texto sobre amarillo. No es gusto: coral sobre amarillo
da 2,2:1 y es ilegible. Las reglas de la sección 9 están medidas, no
opinadas.
============================================================================ */
/* Tipografía — Google Fonts.
En producción, reemplazar este @import por, en el :
El @import queda activo para que el archivo funcione solo. */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Archivo:ital,wght@0,300..800;1,300..800&display=swap');
:root {
/* ==========================================================================
1 · LOS CUATRO COLORES — muestreados del póster, sin retocar
========================================================================== */
--amarillo: #F8E65A; /* el campo. Es el papel de la marca. */
--azul: #2452CA; /* el relleno que salta: el traje, el perchero. */
--coral: #EA7A4F; /* la línea. Dibuja el mundo entero del póster. */
--negro: #03040E; /* la mano y el espejo. Masa y tinta. Protagonista. */
/* Derivados — mínimos y con oficio. Cada uno existe porque hacía falta. */
--amarillo-hondo: #C9B62F; /* amarillo apagado: bordes y estados. NO es texto */
--azul-claro: #6E8FE0; /* el azul que SÍ se lee sobre negro (6,5:1) */
--azul-hondo: #16307A; /* profundidad, AGUA, texto grave sobre amarillo */
--coral-claro: #F3A98A; /* coral aclarado: texto chico sobre negro */
--coral-hondo: #A8441E; /* el coral que SÍ se lee sobre amarillo (4,7:1) */
/* La única concesión que no viene del póster, y se declara: un cartel no
necesita superficie de lectura larga; un documento sí. --hueso es el
amarillo desaturado al mínimo. Si una pieza cabe en amarillo, va en
amarillo: --hueso no es el fondo por defecto de nada. */
--hueso: #F6F1E2;
/* Escalones del negro, para superficies elevadas en modo oscuro.
Todos llevan el azul del negro: acá no hay gris neutro. */
--negro-02: #0B0D1B;
--negro-03: #151827;
--negro-04: #232739;
/* ==========================================================================
0 · COMPATIBILIDAD — la escala --piel-NN, jubilada
--------------------------------------------------------------------------
La marca ya NO tiene gama de piel. Estas variables siguen existiendo para
que nada de lo cableado se caiga, y hoy son una escala neutra fría derivada
del negro del póster.
MIGRACIÓN: cambiar --piel-NN por los tokens semánticos (--fondo, --texto,
--superficie, --borde) o por los cuatro colores. Dos avisos:
· --piel-01 YA NO es el fondo de la marca. El fondo es --amarillo.
Quien lo usaba como fondo de página debe usar var(--fondo).
· --piel-05 era el tono cálido de trabajo. Hoy es un neutro sin carácter:
su reemplazo real es --coral.
========================================================================== */
--piel-01: #F6F1E2; /* era lino · hoy es --hueso */
--piel-02: #E7E1D2;
--piel-03: #CFCBC0;
--piel-04: #ADAAA6;
--piel-05: #86858A;
--piel-06: #63636E;
--piel-07: #454758;
--piel-08: #2B2E42;
--piel-09: #151827;
--piel-10: #03040E; /* sigue siendo el negro protagonista */
/* Alias históricos: válidos, apuntando a la paleta nueva. */
--negra: var(--negro); /* el color de la marca. Si hay uno solo, es este */
--tinta: var(--negro);
--papel: var(--amarillo); /* OJO: el papel de esta marca es amarillo */
--carne: var(--coral); /* el «tono de trabajo» hoy es el coral */
/* Nombres de la v1 que otras piezas ya consumen, remapeados con criterio:
el destello era «la luz» → hoy la luz es el amarillo
el hilo era «la costura, la intersección» → hoy es el coral, que es la línea
el espejo era «el único frío» → hoy es el azul */
--destello: var(--amarillo);
--destello-alto: #FFF6A8;
--destello-bajo: var(--amarillo-hondo);
--hilo: var(--coral);
--hilo-tinta: var(--coral-hondo);
--hilo-suave: var(--coral-claro);
--espejo: var(--azul-claro);
--espejo-alto: #C3D2F5;
--espejo-hondo: var(--azul-hondo);
/* ==========================================================================
2 · TOKENS SEMÁNTICOS — usar ESTOS en las piezas
Modo claro por defecto = campo amarillo, tinta negra.
========================================================================== */
--fondo: var(--amarillo); /* fondo de página. Amarillo, no blanco */
--fondo-alt: var(--hueso); /* franja de respiro / lectura larga */
--superficie: var(--hueso); /* tarjeta sobre el amarillo */
--superficie-calida: var(--amarillo);
/* OJO — --texto es un COLOR, no una tipografía. La fuente es --fuente-texto.
Si escribes font-family:var(--texto) heredas un hexadecimal, la declaración
se cae entera y el navegador aterriza en Times sin avisar. Ya le pasó a
marketing. Regla: lo que parte con --fuente- es tipografía; --texto* es tinta. */
--texto: var(--negro); /* cuerpo */
--texto-suave: #2A2C3C; /* bajadas y pies, sobre amarillo */
--texto-tenue: #4C4F63; /* metadatos */
--texto-invertido: var(--amarillo); /* texto sobre negro */
--borde: rgba(3, 4, 14, .22);
--borde-fuerte: rgba(3, 4, 14, .48);
--borde-tenue: rgba(3, 4, 14, .11);
--acento: var(--azul); /* el que ACCIONA sobre amarillo */
--acento-contraste: var(--amarillo);
--foco: var(--azul-hondo);
--fondo-oscuro: var(--negro);
--superficie-oscura: var(--negro-03);
--borde-oscuro: rgba(248, 230, 90, .22);
/* ==========================================================================
3 · LAS LÍNEAS — cada una toma un color del póster, por lo que hace ahí
Uso: filete de tarjeta, punto de lista, fondo de badge. Nada más: ninguna
línea tiene logo, tipografía ni tono propios.
========================================================================== */
--linea-ronda: var(--coral); /* la mano que recoge. El gesto. */
--linea-perchero: var(--azul); /* el perchero del póster ES azul */
--linea-closet-adentro: var(--negro); /* el ancla. Ver la nota de abajo */
--linea-espejo: var(--azul-claro); /* el reflejo: el azul aclarado */
--linea-vuelta: var(--coral-hondo); /* la costura: el coral profundo */
--linea-de-dia: var(--amarillo); /* el día. El campo. */
--linea-agua: var(--azul-hondo); /* la raíz ética. No se lanza aún */
/* La puerta del isotipo. Es coral: es la intersección, y el coral es el color
de lo que aparece donde dos cosas se cruzan. Sobre fondo coral se invierte
al amarillo — eso se declara en la pieza, no acá.
ESTA VARIABLE FALTABA y su ausencia era invisible: un var() sobre una
variable inexistente no falla ni avisa, se come el respaldo en silencio.
Los respaldos habían quedado en #F0B357 —el destello de la paleta v1, la de
tonos de piel— así que el isotipo de la landing salía con un color de una
paleta muerta que ya no es ninguno de los cuatro. */
--iso-luz: var(--coral);
/* CLÓSET ADENTRO es negro, y sobre fondo negro el negro no existe. Regla:
sobre oscuro, la línea ancla se invierte al amarillo. Ya está resuelto
dentro de .en-negro — basta con usar var(--linea-closet-adentro) y envolver
la sección oscura en la clase.
Pares canónicos de filete + texto chico sobre fondo oscuro, ya probados:
LA VUELTA → filete --coral-hondo · texto --coral-claro
EL PERCHERO → filete --azul · texto --azul-claro
El color pleno aguanta como masa; para texto chico va siempre el aclarado. */
/* ==========================================================================
4 · PULSOS — regla Operaria: de oscuro a brillante. Nunca al revés.
La paleta ordenada por luminancia ES un pulso:
negro (0,001) → azul (0,107) → coral (0,320) → amarillo (0,773).
========================================================================== */
--pulso-marca: linear-gradient(90deg, var(--negro) 0%, var(--azul) 38%, var(--coral) 70%, var(--amarillo) 100%);
--pulso-luz: linear-gradient(90deg, var(--negro) 0%, var(--amarillo) 100%);
--pulso-hilo: linear-gradient(90deg, var(--negro) 0%, var(--coral) 100%);
--pulso-espejo: linear-gradient(180deg, var(--negro) 0%, var(--azul) 60%, var(--azul-claro) 100%);
--pulso-piel: var(--pulso-marca); /* alias v1 */
--gama-completa: linear-gradient(90deg, var(--negro) 0%, var(--azul-hondo) 18%, var(--azul) 36%, var(--coral-hondo) 55%, var(--coral) 72%, var(--amarillo) 100%);
--velo-foto: linear-gradient(0deg, rgba(3,4,14,.94) 0%, rgba(3,4,14,.58) 42%, rgba(3,4,14,0) 100%);
/* ==========================================================================
5 · TIPOGRAFÍA — sin cambios respecto de la v1
Display: Bodoni Moda · Texto: Archivo (Omnibus-Type)
========================================================================== */
--fuente-display: 'Bodoni Moda', 'Times New Roman', Georgia, serif;
--fuente-texto: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
--fuente-etiqueta:var(--fuente-texto);
--peso-liviano: 300; --peso-normal: 400; --peso-medio: 500;
--peso-fuerte: 700; --peso-negro: 800;
--t-micro: 0.6875rem;
--t-mini: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
--t-pie: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
--t-cuerpo: clamp(1rem, 0.96rem + 0.22vw, 1.0625rem);
--t-guia: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
--t-h4: clamp(1.0625rem,1.0rem + 0.35vw, 1.25rem);
--t-h3: clamp(1.375rem, 1.25rem + 0.7vw, 1.75rem);
--t-h2: clamp(1.75rem, 1.45rem + 1.5vw, 2.75rem);
--t-h1: clamp(2.375rem, 1.8rem + 3.0vw, 4.5rem);
--t-titan: clamp(3rem, 1.9rem + 6.5vw, 8rem);
--alto-apretado: 1.02; --alto-titulo: 1.14; --alto-cuerpo: 1.62; --alto-suelto: 1.75;
--track-titan: -0.03em; --track-titulo: -0.015em; --track-normal: 0;
--track-etiqueta: 0.16em; --track-ancho: 0.28em;
/* El claim y su bajada. La bajada NUNCA mide lo mismo que la primera línea:
el chiste depende del tiempo que pasa entre una y otra. */
--claim-razon: 0.42; /* tamaño de la bajada respecto de la primera línea.
Excepción: si la primera línea baja de 24 px
(tarjeta, etiqueta, firma) sube a 0.55, o la bajada
se vuelve ilegible. Nunca llega a 1. */
--claim-aire: 0.30em;
--claim-alto: 0.98;
/* ==========================================================================
6 · ESPACIO, MEDIDAS Y RADIOS
========================================================================== */
--e-1:.25rem; --e-2:.5rem; --e-3:.75rem; --e-4:1rem; --e-5:1.5rem;
--e-6:2rem; --e-7:3rem; --e-8:4rem; --e-9:6rem; --e-10:8rem;
--e-seccion: clamp(3.5rem, 2rem + 7vw, 8rem);
--e-margen: clamp(1.25rem, 0.6rem + 3vw, 3rem);
--ancho-texto: 68ch; --ancho-pieza: 1180px; --ancho-angosto: 760px;
/* El póster es de cartel: cantos vivos y formas macizas. Los radios bajan. */
--r-xs: 0; --r-sm: 3px; --r-md: 6px; --r-lg: 12px; --r-xl: 20px; --r-pill: 999px;
--r-arco: 999px 999px 4px 4px;
/* ==========================================================================
7 · SOMBRAS — con el azul del negro. Nunca gris.
========================================================================== */
--sombra-1: 0 1px 2px rgba(3,4,14,.10), 0 1px 1px rgba(3,4,14,.06);
--sombra-2: 0 4px 14px rgba(3,4,14,.14), 0 1px 3px rgba(3,4,14,.08);
--sombra-3: 0 14px 38px rgba(3,4,14,.20), 0 3px 8px rgba(3,4,14,.10);
--sombra-4: 0 30px 70px rgba(3,4,14,.32), 0 8px 18px rgba(3,4,14,.16);
--sombra-tela: 0 2px 0 rgba(3,4,14,.08) inset, 0 10px 26px rgba(3,4,14,.18);
--sombra-brillo: 0 0 0 1px rgba(248,230,90,.55), 0 8px 30px rgba(248,230,90,.28);
--anillo-foco: 0 0 0 3px rgba(36,82,202,.55), 0 0 0 1px var(--negro);
/* ==========================================================================
8 · MOVIMIENTO Y CAPAS
========================================================================== */
--dur-rapido:140ms; --dur-medio:260ms; --dur-lento:520ms; --dur-escena:900ms;
--ease:cubic-bezier(.22,.61,.36,1);
--ease-entra:cubic-bezier(.16,.84,.44,1);
--ease-sale:cubic-bezier(.55,.06,.68,.19);
--z-fondo:0; --z-base:1; --z-sobre:10; --z-fijo:100;
--z-velo:900; --z-modal:1000; --z-aviso:1100;
}
/* ============================================================================
BLOQUE OSCURO — envolver una sección con class="en-negro" y los tokens se dan
vuelta solos, incluida la inversión de la línea ancla.
============================================================================ */
.en-negro {
--fondo: var(--negro);
--fondo-alt: var(--negro-02);
--superficie: var(--negro-03);
--superficie-calida: var(--negro-04);
--texto: var(--amarillo);
--texto-suave: #E6DDB4;
--texto-tenue: #B9B18E;
--texto-invertido: var(--negro);
--borde: rgba(248, 230, 90, .22);
--borde-fuerte: rgba(248, 230, 90, .46);
--borde-tenue: rgba(248, 230, 90, .10);
--acento: var(--coral); /* sobre negro el que acciona es el coral */
--acento-contraste: var(--negro);
--linea-closet-adentro: var(--amarillo); /* el negro no existe sobre negro */
background: var(--fondo);
color: var(--texto);
}
/* Campo amarillo explícito, para volver al claro dentro de un bloque oscuro. */
.en-amarillo {
--fondo: var(--amarillo); --fondo-alt: var(--hueso);
--superficie: var(--hueso); --texto: var(--negro);
--texto-suave:#2A2C3C; --texto-tenue:#4C4F63; --texto-invertido: var(--amarillo);
--borde: rgba(3,4,14,.22); --borde-fuerte: rgba(3,4,14,.48); --borde-tenue: rgba(3,4,14,.11);
--acento: var(--azul); --acento-contraste: var(--amarillo);
--linea-closet-adentro: var(--negro);
background: var(--fondo); color: var(--texto);
}
@media (prefers-color-scheme: dark) {
.respeta-sistema {
--fondo:var(--negro); --fondo-alt:var(--negro-02); --superficie:var(--negro-03);
--texto:var(--amarillo); --texto-suave:#E6DDB4; --texto-tenue:#B9B18E;
--borde:rgba(248,230,90,.22); --borde-fuerte:rgba(248,230,90,.46);
--acento:var(--coral); --acento-contraste:var(--negro);
background:var(--fondo); color:var(--texto);
}
}
@media (prefers-reduced-motion: reduce) {
:root { --dur-rapido:1ms; --dur-medio:1ms; --dur-lento:1ms; --dur-escena:1ms; }
}
/* ============================================================================
9 · REGLAS DE USO — medidas, no opinadas
----------------------------------------------------------------------------
Contrastes calculados sobre los cuatro colores del póster:
sobre AMARILLO negro 16,0:1 ✓ · azul-hondo 9,5:1 ✓ · azul 5,3:1 ✓ ·
coral-hondo 4,7:1 ✓
coral 2,2:1 ✗ ← ILEGIBLE. El coral NO escribe acá.
amarillo-hondo 1,6:1 ✗ ← solo bordes y estados apagados.
sobre NEGRO hueso 18,1:1 ✓ · amarillo 16,0:1 ✓ · coral-claro 10,6:1 ✓ ·
coral 7,2:1 ✓ · azul-claro 6,5:1 ✓
azul 3,1:1 ✗ ← solo titular grande, nunca cuerpo.
sobre HUESO negro 18,1:1 ✓ · azul 5,9:1 ✓ · coral-hondo 5,3:1 ✓
coral 2,5:1 ✗ ← ILEGIBLE también acá.
1. **El papel es amarillo.** Blanco puro es el 0,05 % del póster: una pieza
sobre fondo blanco está fuera de la marca aunque se vea prolija. Para
textos muy largos existe --hueso, y solo para eso.
2. **El coral dibuja, no escribe.** Línea, ilustración, filete, masa. Si hay
que escribir en coral sobre claro, se usa --coral-hondo.
3. **El azul pleno no va como texto sobre negro.** Para eso está --azul-claro.
4. Todo pulso va de oscuro a brillante: negro → azul → coral → amarillo.
Nunca al revés, aunque el póster haga lo contrario en su pie.
5. **Nada de gris neutro.** Los neutros llevan el azul del negro.
6. Los cuatro colores no se degradan entre sí dentro de una ilustración: el
póster es plano y esta paleta es plana. El degradado existe solo como
pulso de marca, y una vez por pieza.
7. El claim va SIEMPRE en --fuente-display sobre color plano, nunca sobre una
imagen de cuerpo, y COMPLETO con su bajada:
Déjame entrar en tu clóset. ← display, grande
y no vas a salir más. ← cursiva, más chica (--claim-razon)
8. El nombre completo en las piezas es NEGRA MATEA. «La Negra» solo en la
etiqueta de autor «intervenido por La Negra».
9. Crédito al pie de toda pieza: Diseñado por Operaria → https://operaria.cl
DÓNDE HAY COPIAS DE ESTOS VALORES (si cambias un hex, hay que ir a mano):
· brandbook/index.html — bloque :root copiado, para abrirse con doble clic.
· generador/index.html — bloque :root copiado: es una PWA que tiene que
abrir y exportar sin conexión.
Cualquier otra pieza enlaza este archivo y no copia nada.
============================================================================ */