/* ═══════════════════════════════════════════════════════════════════════════
EMBLEMA · .c-emblema componentes/extra/c-emblema.css
Contrato: design-system/10-contrato-tercera-tirada.md §2·8 (marcado congelado)
Se carga DESPUÉS de base.css, de las cinco hojas de época y de vida/.
Marcado congelado — un solo nodo, un solo texto:
becama
becama
── LA TESIS ───────────────────────────────────────────────────────────────
LA MARCA NO SE PEGA ENCIMA: SE HACE CON EL MATERIAL DEL MUNDO.
Un logotipo colocado sobre cinco fondos distintos es el mismo adhesivo cinco
veces. Esta pieza es lo contrario: es LA FIRMA DEL QUE HIZO LA SUPERFICIE, y
en cada época solo pudo dejarla de una manera — con el aliento, con el
cincel, con el tampón, con el troquel, con la corriente. Se lee siempre la
misma palabra; lo que cambia es el GESTO que la dejó ahí.
El arco de las cinco no es decorativo: es el viaje del sistema en pequeño.
AUSENCIA → INCISIÓN → LUZ
(1 · 3) (2 · 4) (5)
En la cueva y en el papel la palabra es lo que NO tiene materia: el pigmento
se sopla alrededor y el nombre es la roca; la tinta se estampa alrededor y el
nombre es el papel. En la piedra y en el hierro la palabra se abre EN la
materia: surco de cincel, golpe de troquel. En la cabina ya no queda materia
que marcar — queda el nombre y el punto de brasa que dice que hay corriente.
── UNA IDEA POR ÉPOCA (doctrina MATERIA, contrato 07 §0.5) ────────────────
1 · CUEVA EL NOMBRE EN NEGATIVO nube de ocre soplada alrededor: las
letras son el hueco por donde se ve la pared. La técnica de
las manos de Maltravieso — máscara con turbulencia desplazada,
canto roto (no difuminado) y salpicado grueso encima.
2 · PIEDRA LA MARCA DEL CANTERO cartela de arco HUNDIDA en el sillar,
con la inscripción incisa dentro. La doble sombra de la época
INVERTIDA respecto al rótulo de la barra: aquello sobresale
(luz arriba), esto está cortado a cincel (sombra arriba, luz
en el labio de abajo).
3 · PAPEL EL SELLO ESTAMPADO la película de tinta con el canto
MORDIDO y el nombre en el hueco del tipo. Es el mismo sello
que `.c-boton--brasa`, a escala de firma.
4 · HIERRO LA PLACA DEL FABRICANTE chapa de latón troquelada, con el
chaflán en las dos esquinas opuestas y el nombre golpeado
dentro, en la condensada del taller.
5 · CABINA EL NOMBRE Y SU PUNTO la marca de la demo validada: la
palabra apretada y, delante, el punto de brasa.
── DE QUÉ EXISTENTE SALE CADA UNA (aquí no se inventa técnica nueva) ──────
ép. deriva de qué se reutiliza
1 `epoca-1.css` §0 `--e1-mano` (la mano en máscara turbulenta +
negativo) · `c-vacio` §1 (su icono soplado) salpicado + el negativo
2 `epoca-2.css` `--e2-hundido` (nav activa y relieve INVERTIDO +
botón pulsado) · la cartela del distintivo el arco de `--e-radio`
3 `epoca-3.css` §1 `.c-boton--brasa` (el `--e3-mordido` como
sello) y `--e3-sello` del panel destacado MÁSCARA + tinta y hueco
contextuales + el giro
4 `epoca-4.css` §14 `.c-barra-marca__marca` y el `clip-path` del
§6 el distintivo (placa troquelada) troquel + `--e4-chapa-*`
5 `epoca-5.css` §B `.c-barra-marca__marca el punto de brasa de la
::before` (el piloto de la demo) demo, a menor escala
EL SELLO TENÍA DOS ANTECEDENTES y el contrato pedía no inventar un tercero.
Se ha elegido el del BOTÓN (`--e3-mordido` como máscara sobre la película de
tinta, con el rótulo en `--e3-papel-local`) y NO el lacre de `c-precio`
(`--cp3-lacre`, gota de cera con monograma), porque el lacre CIERRA un pliego
—es un acto sobre un documento concreto, y por eso vive en la tarjeta de
precio— mientras que el emblema FIRMA un material. La marca del impresor se
daba con tampón, no con cera. Del `--e3-sello` del panel destacado se toma lo
otro que hace un sello: no caer recto. Allí son −7° sobre un disco de 160px;
aquí −0,8°, porque el mismo ángulo en una tira de 30px de alto no se lee como
gesto sino como caja mal alineada.
── FUNCIONA SOBRE EL MUNDO **Y** SOBRE SUPERFICIES, Y NO ES SUERTE ────────
El emblema vive en pies, cabeceras y portadas: unas veces cae sobre la sala y
otras dentro de un `.c-panel`, un `.c-precio` o una portada. Se sostiene por
construcción:
· Épocas 1, 3 y 4 TRAEN SU PROPIO MATERIAL, y ese material es OPACO bajo la
letra (nube densa · película de tinta · chapa). Lo que haya debajo solo
asoma por los cantos soplados o mordidos, donde no hay glifo: el contraste
de la letra no depende del fondo. Se comprueba en la tabla de abajo — dan
el MISMO número dentro y fuera del panel.
· Época 2 OSCURECE lo que tenga debajo (la cartela hundida es sombra, no
chapa) y pinta letra clara: su efecto sobre el contraste es monótono y va
siempre a favor. El peor caso es el sillar más claro de la época.
· Época 5 no pone material: letra clara sobre un mundo donde TODA superficie
es oscura (`--e-fondo` #06070A · `--e-sup` #11141A · el cristal es blanco
al 4,8%). No existe superficie clara sobre la que pueda caer.
── EL PROTOCOLO DE CONTEXTO (época 3) — LO QUE ESTA PIEZA **NO** HACE ─────
`DESIGN-SYSTEM.md` §4.4: en el Papel conviven dos direcciones de contraste, y
las superficies-hoja (`.c-panel`, `.c-instrumento`, `.c-campo__input`,
`.c-progreso__pista`, y `.c-precio`, que se sumó por el mismo motivo)
REDECLARAN los tokens `--e3-*`.
**El emblema no redeclara ninguno, y ésa es la decisión de diseño de esta
hoja.** Un sello no es una superficie: es tinta que cae SOBRE la superficie
ajena. Aquí los tokens solo se LEEN, y por eso la pieza cambia de voz sola:
sobre el taller → tinta MINIO + hueco = la madera de la mesa
dentro de una hoja → tinta RÚBRICA + hueco = el papel
Si esta hoja hubiera redeclarado `--e3-papel-local` a la hoja (como sí hace
`c-precio`, que ES una hoja), el emblema del PIE habría salido con el rótulo
en crema flotando sobre la madera parda: un sello con papel dentro sobre una
mesa. Se probó y se descartó.
Corolario que conviene conocer: sobre el CABEZAL (`.c-barra-marca`, el único
pardo claro del taller, #3B3024) el hueco se pinta con el pardo de la MESA, un
punto más oscuro que la madera que tiene debajo. Es exactamente lo que ya hace
`.c-boton--brasa` de esa época, se lee como lo que es —el tipo mordió más
hondo ahí— y el contraste, que es lo que se mide, sube.
── UNA SOLA COSA ENCENDIDA POR PANTALLA ──────────────────────────────────
El emblema comparte pantalla con el rótulo de la barra, que en la época 5 ya
lleva el piloto de brasa. Dos pilotos iguales serían dos cosas encendidas. Por
eso el punto del emblema es el mismo objeto a menor escala y con la mitad de
halo: la barra lleva 9px con `0 0 10px` al 65% de alfa; aquí ~7,8px con
`0 0 6px` sobre `--e-halo` (45%).
Medido en el render de la barra con las dos brasas a la vista (se cuentan solo
los píxeles de brasa, R−B>60): el piloto de la barra ocupa 69px y suma 24,1 de
luminancia; el punto del emblema ocupa 52px y suma 19,3 — **un 20% menos de luz
emitida**. El pico no puede separarse mucho más porque el núcleo es el mismo
color en los dos (es el mismo objeto, y ahí está la gracia): 0,580 contra
0,571. La jerarquía la ponen el tamaño y el halo, no el color.
── LA VIDA: NO LA HAY, Y ÉSA ES LA DECISIÓN ──────────────────────────────
**Cero animaciones y cero hover en las cinco épocas.** Un emblema es una
firma, no un control: no se toca, se lee — el mismo criterio que `c-vacio`
(«un estado vacío no se toca»). Y además vive en el CHROME (pie, cabecera): si
se calentara al pasar el ratón, el borde de la pantalla competiría con el
contenido, que es justo lo que prohíbe la doctrina. Si el marcado lo envuelve
en un ``, el foco lo pinta `:focus-visible` de base.css §2 y no hace falta
nada más. Consecuencia agradable: `prefers-reduced-motion` no tiene nada que
apagar aquí (el §9 se deja escrito igualmente, como constancia y como red).
── CONTRASTE (medido en píxel renderizado, Chrome real, protocolo §4.1) ───
Fondo medido con el texto retirado **y sus sombras también**
(`color:transparent; text-shadow:none`), sobre el peor píxel de TODO el
renglón —no el del centro— y con la textura de cada época ya compuesta
encima. 40 medidas: las cinco épocas × ocho sitios (el mundo, un `.c-panel`,
un `.c-panel--destacado`, una tarjeta `.c-precio`, la barra, el pie, y los dos
tamaños). Banco: `emblema/` del scratchpad de la sesión.
ép. mundo panel destacado precio barra pie cuál es el peor píxel
1 5,69 5,69 5,71 5,71 5,69 5,69 nube de ocre + gota de tierra
2 6,73 6,21 6,17 6,43 6,02 6,49 el sillar más claro bajo la cartela
3 5,51 5,05 5,43 5,08 5,51 5,50 mundo: minio · hoja: rúbrica
4 6,41 6,41 6,41 6,55 6,49 6,49 extremo oscuro del latón + hollín
5 16,66 16,52 13,36 17,15 17,34 17,65 el cristal al 4,8%
Las épocas 1 y 4 dan EXACTAMENTE el mismo número en los seis sitios: ésa es la
prueba numérica de que su material es opaco bajo la letra y de que el fondo no
participa. La 3 también es indiferente al fondo, pero su número cambia a
propósito —5,5 sobre el taller (minio) y 5,05 dentro de una hoja (rúbrica)—
porque su tinta ES contextual: cambia la tinta, no la opacidad. La 2 y la 5,
que no traen material, se mueven con la superficie y siguen con holgura.
El peor dato de toda la hoja es el 5,05 del sello sobre hoja crema: la rúbrica
`#A8321E`, la misma tinta y del mismo orden (4,91) que ya validó
`.c-boton--brasa` sobre esa superficie.
── DOS DEFECTOS QUE SOLO APARECIERON AL MEDIR (quedan aquí para el próximo) ─
1. **El mordisco del sello se comía el renglón.** `--e3-mordido` está dibujado
para un botón y su canto se lleva hasta el ~15% del alto de la caja a la que
se estire; en una firma —la mitad de alta— eso entra en la línea de texto, y
por ahí se cuela lo que hay debajo: 1,02:1 en `--sm` sobre la mesa y 3,87:1
dentro de una hoja. **El mismo fallo con los dos signos**, que es la trampa
de los dos frentes de la época 3 en estado puro. Se arregla con la sangría
de la tinta (§3), no tocando la máscara.
2. **El anillo de foco desaparecía en dos épocas** — invisible por color en la
1 y la 3 (1,14:1 y 1,02:1) y literalmente recortado por `clip-path` en la 4.
Ver §7.
Ninguno de los dos se ve mirando la pantalla: los dos se ven midiendo.
── AUTOCONTENIDO (contrato 08 §0.3 · regla R5) ───────────────────────────
Estructura con `var(--e-*)` a secas. Pieles bajo `html[data-epoca="N"]`. Los
matices propios se declaran AQUÍ con prefijo `--em-` / `--emN-`, dentro del
propio scope. Esta hoja no escribe nada fuera de `.c-emblema` y no toca
base.css, ni las épocas, ni vida/, ni los muestrarios.
Sí LEE tokens ajenos, y todos con respaldo propio dentro de un `var(…, x)` —
el mismo permiso que se dio `c-precio` §4 y por la misma razón: para que la
técnica sea LA MISMA y no una copia parecida, hay que estampar con el mismo
troquel. La lista completa, para que se sepa qué se rompería si desaparecen:
`--e3-rojo` `--e3-rojo-hondo` `--e3-papel-local` protocolo de contexto
(API pública, §4.4)
`--e3-mordido` la máscara del sello
`--e1-pigmento` `--e1-tierra` el ocre y la tierra
`--e4-chapa-laton` `--e4-tinta-troquel`
`--e4-laton-bajo` `--e4-grano` `--e4-etiqueta` la placa y su letra
Cero JS · cero recursos remotos · cero fuentes nuevas (Anton · Cinzel ·
EB Garamond · Oswald · Inter Tight, las cinco ya en `/css/fuentes-epoca.css`)
· las texturas son SVG en `data:`.
── NOTA DE INVENTARIO (discrepancia que hay que resolver arriba) ──────────
`06-inventario-componentes.md` §2 fila 11 llama `c-emblema` a otra cosa: un
«disco grande de estado o de icono» (el ✓/✕ de newsletter, el escudo de
garantía, el disco de «vídeo próximamente»), con 4 vistas que lo piden. Manda
el contrato 10, que es posterior y redefine el nombre como la marca sellada.
Aquel disco de estado sigue sin dueño y necesita nombre propio: se reporta, no
se construye aquí.
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
0 · ESTRUCTURA — solo `var(--e-*)`, ni un color ni un carácter a mano
───────────────────────────────────────────────────────────────────────────
Una caja de alto GOBERNADO: `min-height` sale de la escala comprimida de
base.css §1.2 y el contenido nunca llega a tocarla, así que las cinco épocas
miden lo mismo aunque una traiga chapa y otra no traiga nada. Medido:
29,3px (Cueva) → 33,7px (Cabina) = +15,2%, dentro del ±20% del contrato.
Tres decisiones de la caja que no son cosméticas:
· `--em-cuerpo` es la ÚNICA palanca tipográfica que tocan las épocas (cada
familia tiene otro ojo: la Garamond pide 17px donde la Oswald pide 13). El
tamaño `--sm` no se escribe cinco veces: lo aplica `--em-escala`, que
ninguna piel toca, para que el modificador siga valiendo en las cinco.
· `--em-compensa` arregla el descentrado óptico del tracking. En una caja
centrada, el `letter-spacing` de la ÚLTIMA letra sigue contando dentro del
ancho del texto, así que la palabra queda desplazada media letra a la
izquierda: con .2em a 13px son 1,3px, y sobre una placa de latón se ve. Cada
época pone aquí su propio tracking y el relleno izquierdo lo devuelve al
centro. En `em`, así que `--sm` se corrige solo.
· El blindaje de herencia (`text-transform`, `font-variant-caps`,
`font-family`, `letter-spacing`, `color`): el emblema cae dentro de
`.c-pie`, que en base.css §13.5 es mono, versalitas y `uppercase`. Sin voz
propia declarada, la firma sale disfrazada de nota legal.
═══════════════════════════════════════════════════════════════════════════ */
.c-emblema{
--em-cuerpo: 15px; /* lo redeclara cada época */
--em-escala: 1; /* lo redeclara SOLO el modificador --sm */
--em-compensa: 0em; /* lo redeclara cada época = su letter-spacing */
position: relative;
isolation: isolate; /* el ::before de materia se queda entre el
fondo y el texto, no detrás de la caja */
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: calc(var(--e-gap) * .42);
vertical-align: middle;
min-height: calc(var(--e-alto-ctrl) * .72);
padding-block: calc(var(--e-pad-corto) * .30);
padding-inline:
calc(var(--e-pad-caja) * .62 + var(--em-compensa))
calc(var(--e-pad-caja) * .62);
max-width: 100%;
border: 0 solid var(--e-nada); /* la caja existe; el marco lo pone la época */
border-radius: var(--e-radio);
background: none;
color: var(--e-tinta);
font-family: var(--e-display);
font-weight: var(--e-peso-display);
font-size: calc(var(--em-cuerpo) * var(--em-escala));
line-height: 1.05;
letter-spacing: var(--e-tracking);
text-transform: none;
font-variant-caps: normal;
text-decoration: none;
white-space: nowrap; /* una firma no parte de línea */
}
/* Los dos ganchos, con la gramática de base.css §11: materia debajo, luz
encima. Nacen SIN `content`: no existen hasta que una época los enciende. */
.c-emblema::before,
.c-emblema::after{
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.c-emblema::before{ z-index: -1; } /* MATERIA */
.c-emblema::after{ z-index: 1; } /* LUZ */
/* Si el marcado lo cuelga de un enlace sigue siendo la marca, no un enlace más. */
a.c-emblema,
a .c-emblema{ text-decoration: none; }
/* — TAMAÑO CORTO — la misma pieza al pie de una tarjeta o dentro de una miga.
Solo toca escala y caja: las cinco pieles siguen sirviendo tal cual. */
.c-emblema--sm{
--em-escala: .8;
min-height: calc(var(--e-alto-ctrl) * .54);
padding-block: calc(var(--e-pad-corto) * .22);
padding-inline:
calc(var(--e-pad-caja) * .44 + var(--em-compensa))
calc(var(--e-pad-caja) * .44);
}
/* ═══════════════════════════════════════════════════════════════════════════
1 · CUEVA — EL NOMBRE EN NEGATIVO
───────────────────────────────────────────────────────────────────────────
Nadie escribió el nombre: alguien sopló pigmento alrededor y el nombre es lo
que la mano tapaba. Es la técnica que la época ya tiene destilada en
`--e1-mano` (epoca-1.css §0) y que `c-vacio` §1 usa para su icono. Aquí la
plantilla no es una mano: es la palabra.
Tres cosas la separan de un halo, y las tres son de la época:
· el canto de la nube va DESPLAZADO POR TURBULENCIA, no difuminado — el
aliento deposita a manchas y deja el borde roto;
· encima cae SALPICADO GRUESO (gotas, no grano fino), en tierra quemada y
con la alfa horneada dentro del SVG: solo puede oscurecer, que es la ley
de texturas de esta época (epoca-1.css §0, «alfa acotada»);
· el núcleo es OCRE PLENO hasta el 66% del radio y la orla de tierra se
queda fuera de donde hay letra. No es prudencia decorativa: la tierra
quemada bajo un glifo daría 2,70:1 — calculado antes de pintar, no
descubierto después.
El hueco se pinta con `var(--e-fondo)`: no es «un marrón oscuro», es el token
que significa LA PARED. Misma idea que el `--e3-papel-local` del sello — el
negativo siempre es lo que hay debajo.
Un solo gancho para toda la pieza: la nube, su orla y su canto cargado son
capas de fondo del MISMO `::before`. La capa de luz se queda sin gastar, que
en esta época es lo correcto: aquí no hay brillos, hay más o menos ocre.
═══════════════════════════════════════════════════════════════════════════ */
html[data-epoca="1"] .c-emblema{
--em-cuerpo: 15px;
--em-compensa: .09em;
--em1-ocre: var(--e1-pigmento, #C97A3D);
--em1-tierra: var(--e1-tierra, #8C3B22);
--em1-canto: color-mix(in oklab, var(--em1-ocre) 46%, var(--e-nada));
/* LA NUBE — la máscara, y aquí está toda la dificultad de la pieza.
Un negativo necesita PIGMENTO DENSO bajo la letra (si no, no hay contraste),
y el pigmento denso tiende a salir como una pastilla lisa: la primera
versión de esta hoja se veía exactamente así, una elipse naranja. Lo que la
convierte en soplo son tres cosas, y ninguna es opcional:
· CANTO DURO ANTES DE DESPLAZAR. Una máscara con degradado blando se
desplaza y sigue siendo blanda: la turbulencia solo mueve la rampa. Aquí
la forma es opaca hasta el 76% del radio y cae rápido; sobre ESE canto,
la turbulencia sí se ve como un borde comido.
· MOTAS SUELTAS FUERA DE LA MANCHA. Es lo que más delata al aliento:
gotas que caen aparte del cuerpo principal. Van en la propia máscara
(cinco círculos), así que se desplazan con ella y no parecen pegatinas.
· VIEWBOX ALTO (240×160) para una caja baja. Con `preserveAspectRatio
='none'` un desplazamiento de N unidades se convierte en `N · alto/160`
píxeles: si el viewBox fuera cuadrado o apaisado, ese mismo temblor se
comería el renglón de una firma de 29px de alto. Medido: con viewBox de
72 de alto, el canto entraba 9,6px en la caja — encima de la letra. */
--em1-soplo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='50%25' r='56%25'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='.76' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='.9' stop-color='%23fff' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='s' x='-40%25' y='-40%25' width='180%25' height='180%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05 0.028' numOctaves='4' seed='13' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='13' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)'%3E%3Crect x='7' y='9' width='226' height='142' rx='71' fill='url(%23g)'/%3E%3Ccircle cx='26' cy='19' r='7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='215' cy='140' r='6' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='198' cy='14' r='4.6' fill='%23fff' opacity='.72'/%3E%3Ccircle cx='44' cy='146' r='5' fill='%23fff' opacity='.78'/%3E%3Ccircle cx='120' cy='5' r='3.6' fill='%23fff' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
/* LAS DOS MOTAS. Aquí el presupuesto de contraste es asimétrico y hay que
saberlo: como el rótulo es EL HUECO OSCURO, todo lo que ACLARA la nube sube
el contraste y sale gratis; solo lo que la OSCURECE cuesta. Por eso la mota
de tierra va acotada a .22 (y aun así es la que fija el peor píxel de la
época) y la de ocre claro puede ir suelta: es textura gratis.
Las dos con la alfa horneada en el SVG, como manda `epoca-1.css` §0. */
--em1-gota: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='eg' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.22' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .549 0 0 0 0 .231 0 0 0 0 .133 1.3 0 0 0 -.68'/%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23eg)' opacity='.22'/%3E%3C/svg%3E");
--em1-mota: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='em' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .945 0 0 0 0 .741 0 0 0 0 .486 .9 0 0 0 -.28'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23em)' opacity='.5'/%3E%3C/svg%3E");
color: var(--e-fondo); /* EL HUECO: por ahí se ve la pared */
font-family: var(--e-display);
font-weight: var(--e-peso-display); /* Anton: 400, o el navegador la falsea */
text-transform: uppercase;
letter-spacing: .09em;
/* la mano también tapaba la luz: el canto bajo del hueco queda más hondo */
text-shadow: 0 1px 0 var(--e-fondo);
}
html[data-epoca="1"] .c-emblema::before{
content: "";
/* La nube desborda la caja por los cuatro lados —un soplo no cabe en un
rectángulo— y el desborde es también lo que aleja el canto comido del
renglón. Es una capa `absolute`: no mueve el layout ni el ±20%. */
/* la sangría escala con la marca: en `--sm` el soplo también es más corto, o
una firma pequeña acabaría con la misma nube que una grande */
inset:
calc(-10px * var(--em-escala)) calc(-16px * var(--em-escala))
calc(-9px * var(--em-escala)) calc(-16px * var(--em-escala));
background-image:
/* 1 · las motas de ocre claro: textura gratis (aclaran) */
var(--em1-mota),
/* 2 · las gotas de tierra: la única capa que cuesta contraste */
var(--em1-gota),
/* 3 · el canto cargado: el pigmento se acumula donde el aliento afloja */
radial-gradient(112% 190% at 50% 52%,
transparent 58%, var(--em1-canto) 80%, transparent 100%),
/* 4 · el núcleo de ocre: pleno hasta el 68%, muy por fuera del glifo */
radial-gradient(68% 152% at 50% 46%,
var(--em1-ocre) 0%, var(--em1-ocre) 68%, transparent 100%),
/* 5 · la orla de tierra quemada: solo donde ya no hay letra */
radial-gradient(118% 205% at 50% 52%,
transparent 46%, var(--em1-tierra) 72%, transparent 96%);
background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
background-size: 96px 96px, 130px 130px, 100% 100%, 100% 100%, 100% 100%;
-webkit-mask-image: var(--em1-soplo);
mask-image: var(--em1-soplo);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* ═══════════════════════════════════════════════════════════════════════════
2 · PIEDRA — LA MARCA DEL CANTERO
───────────────────────────────────────────────────────────────────────────
El cantero firmaba el sillar con una cartela pequeña abierta a cincel. La
forma no hay que inventarla ni pedirla: `--e-radio` de la época YA es «arco
arriba, base asentada» (`22px 22px 2px 2px`) y el gancho lo hereda solo.
LA CLAVE ES LA INVERSIÓN. El rótulo de la barra (epoca-2.css §14) SOBRESALE:
`0 -1px 0 brillo, 0 1px 0 hueco` — luz arriba. Este emblema está CORTADO
dentro: `0 -1px 0 corte, 0 1px 0 brillo` — sombra arriba y luz en el labio de
abajo, que es lo que hace la antorcha en un surco en V. Es la ley 1 de la
época («lo que sobresale lleva luz arriba; lo hundido, luz abajo») aplicada a
la letra, y es lo que distingue la FIRMA del RÓTULO sin tocar una sola clase.
La cartela OSCURECE lo que tenga debajo (es sombra, no chapa), así que el
contraste de la letra clara solo puede mejorar al caer sobre una superficie.
Por eso el peor dato de la época se mide sobre el sillar más claro.
═══════════════════════════════════════════════════════════════════════════ */
html[data-epoca="2"] .c-emblema{
--em-cuerpo: 13px; /* Cinzel es ancha y va en caja alta */
--em-compensa: .19em;
--em2-corte: color-mix(in oklab, var(--e-fondo) 92%, var(--e-nada));
--em2-medio: color-mix(in oklab, var(--e-fondo) 46%, var(--e-nada));
--em2-bajo: color-mix(in oklab, var(--e-fondo) 22%, var(--e-nada));
--em2-brillo: color-mix(in oklab, var(--e-tinta) 30%, var(--e-nada));
--em2-filo: color-mix(in oklab, var(--e-tinta) 12%, var(--e-nada));
color: var(--e-tinta-2); /* la piedra que aún es texto: 6,84 ✔ */
font-family: var(--e-display);
font-weight: var(--e-peso-display);
text-transform: uppercase; /* una inscripción va en caja alta… */
font-variant-caps: normal; /* …y la versalita del pie no la toca */
letter-spacing: .19em;
/* LA INCISIÓN, al revés que el rótulo de la barra. Las dos sombras son parte
de la letra: se retiran para medir (protocolo §4.1). */
text-shadow:
0 -1px 0 var(--em2-corte),
0 1px 0 var(--em2-brillo);
}
/* LA CARTELA HUNDIDA. Misma gramática que `--e2-hundido` (la nav activa y el
botón pulsado de la época): sombra dura dentro del canto de arriba, hilo de
luz en el de abajo, y sin difuminado hacia fuera — la piedra no echa humo. */
html[data-epoca="2"] .c-emblema::before{
content: "";
inset: 0;
background-image: linear-gradient(180deg,
var(--em2-corte) 0%,
var(--em2-medio) 58%,
var(--em2-bajo) 100%);
box-shadow:
inset 0 2px 3px var(--em2-corte), /* el cincel entró por arriba */
inset 0 -1px 0 var(--em2-brillo), /* la antorcha lame el labio bajo */
inset 0 0 0 1px var(--em2-filo); /* el canto de la caja, apenas */
}
/* ═══════════════════════════════════════════════════════════════════════════
3 · PAPEL — EL SELLO ESTAMPADO
───────────────────────────────────────────────────────────────────────────
La marca del impresor, dada con tampón sobre lo que hubiera delante. Es la
MISMA pieza que `.c-boton--brasa` de epoca-3.css, no una versión nueva:
· el canto se muerde con `--e3-mordido` usado como MÁSCARA — falta tinta en
el borde de verdad, no hay un borde dibujado imitándolo;
· la tinta es `--e3-rojo`, que el protocolo de contexto convierte en MINIO
sobre el taller y en RÚBRICA dentro de una hoja;
· el rótulo es `--e3-papel-local`, o sea lo que hay debajo del sello, que es
literalmente cómo funciona un tipo en relieve: lo que no entinta es lo que
se lee. Un token y las dos direcciones de contraste resueltas;
· la sombra la pone un `drop-shadow` sobre el elemento, para que siga la
silueta MORDIDA en vez de dibujar un rectángulo limpio debajo.
Lo único propio es el desvío de −0,8° (ver la cabecera). Los tokens se leen
con respaldo: si un día desaparecieran, el sello se sigue estampando en minio
sobre el fondo de la época, y el mordisco lo pone una máscara equivalente.
═══════════════════════════════════════════════════════════════════════════ */
html[data-epoca="3"] .c-emblema{
--em-cuerpo: 17px; /* la Garamond es de ojo pequeño */
--em-compensa: .12em;
--em3-tinta: var(--e3-rojo, var(--e-acento));
--em3-honda: var(--e3-rojo-hondo, var(--e3-rojo, var(--e-acento)));
--em3-hueco: var(--e3-papel-local, var(--e-fondo));
--em3-sangre: calc(5px * var(--em-escala)); /* cuánto rebasa la tinta la caja */
--em3-mordido: var(--e3-mordido, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='64' viewBox='0 0 240 64' preserveAspectRatio='none'%3E%3Cfilter id='em' x='-10%25' y='-25%25' width='120%25' height='150%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.055 0.19' numOctaves='3' seed='7' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='6.5' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='3.5' y='3.5' width='233' height='57' fill='%23fff' filter='url(%23em)'/%3E%3C/svg%3E"));
border-radius: 0; /* aquí no hay curvas: hay filetes */
background: none;
color: var(--em3-hueco); /* el hueco del tipo */
font-family: var(--e-display);
font-weight: var(--e-peso-fuerte);
font-variant-caps: small-caps; /* VERSALITA de verdad… */
font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1;
text-transform: none; /* …que necesita la minúscula viva */
letter-spacing: .12em;
/* la sombra sigue el canto mordido, no la caja */
filter: drop-shadow(0 1px 0 color-mix(in oklab, var(--e-fondo) 62%, var(--e-nada)));
rotate: -.8deg; /* dado a mano */
}
html[data-epoca="3"] .c-emblema::before{
content: "";
/* LA TINTA SE SALE DE LA CAJA, Y ESO NO ES ADORNO: ES LO QUE HACE QUE EL
MORDISCO NO SE COMA LA LETRA. `--e3-mordido` está dibujado para un botón
(240×64) y su canto se come hasta el ~15% del alto de la caja a la que se
estire. En una firma —la mitad de alta que un botón, y más en `--sm`— ese
15% entra en el renglón, y ahí el canto semitransparente deja pasar lo de
debajo: sobre la mesa la tinta se ENSUCIA de madera y sobre una hoja se
ACLARA de papel. Medido antes de arreglarlo: 1,02:1 en `--sm` sobre la mesa
y 3,87:1 dentro de una hoja — el mismo defecto con los dos signos, que es
justo la trampa de los dos frentes que avisa `epoca-3.css`.
Con la película sangrando `--em3-sangre` por los cuatro lados, el mordisco
ocurre FUERA del área de la letra y el renglón cae siempre sobre tinta
plena. Y además es lo que hace un tampón de verdad: la tinta rebasa el
canto de la pieza. Al ser una capa `absolute`, no toca el layout ni el
±20%. Después del arreglo: 6,71 / 5,53. */
inset: calc(var(--em3-sangre) * -1) calc(var(--em3-sangre) * -.8);
border-radius: 0;
/* la película de tinta nunca es plana: se carga en el centro y afloja en una
esquina, pero siempre ENTRE las dos tintas ya medidas contra el hueco, así
que el contraste solo puede subir. */
background-image:
radial-gradient(120% 160% at 22% 18%,
color-mix(in oklab, var(--e-acento-nucleo) 8%, var(--e-nada)), transparent 58%),
radial-gradient(90% 140% at 88% 92%, var(--em3-honda), transparent 62%),
linear-gradient(0deg, var(--em3-tinta), var(--em3-tinta));
background-repeat: no-repeat, no-repeat, no-repeat;
-webkit-mask-image: var(--em3-mordido);
mask-image: var(--em3-mordido);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* ═══════════════════════════════════════════════════════════════════════════
4 · HIERRO — LA PLACA DEL FABRICANTE
───────────────────────────────────────────────────────────────────────────
1879: lo que lleva el nombre de quien fabricó la máquina es una placa de latón
cortada con troquel. El corte es el de la época y no se inventa — las dos
esquinas OPUESTAS chaflanadas, nunca redondeadas: el mismo `clip-path` de
`.c-barra-marca__marca` y del distintivo (epoca-4.css §6 y §14). Aquí el
chaflán se ata al calibre de la era (`--e-grosor * 3.4` = 5,1px) en vez de a
un número suelto, así que si mañana cambia el grosor, el troquel le sigue.
El nombre no está impreso: está GOLPEADO. La tinta del troquel es el propio
hierro (`--e4-tinta-troquel`), que la época midió contra el extremo oscuro del
latón. La sombra va por `filter` y no por `box-shadow`: con `clip-path` una
sombra exterior se recorta junto con la pieza y no se vería — y de paso así
sigue el perfil del chaflán, que es lo que hace una placa de verdad.
═══════════════════════════════════════════════════════════════════════════ */
html[data-epoca="4"] .c-emblema{
--em-cuerpo: 13px; /* Oswald condensada, caja alta */
--em-compensa: .2em;
--em4-chaflan: calc(var(--e-grosor) * 3.4);
--em4-brillo: color-mix(in oklab, var(--e-acento-nucleo) 32%, var(--e-nada));
--em4-sombra: color-mix(in oklab, var(--e-fondo) 26%, var(--e-nada));
border-radius: 0; /* la troqueladora no redondea */
color: var(--e4-tinta-troquel, #100E0C);
font-family: var(--e4-etiqueta, 'Oswald', 'Arial Narrow', 'Helvetica Neue', system-ui, sans-serif);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .2em;
}
/* LA PLACA ENTERA VIVE EN EL GANCHO DE MATERIA, Y NO EN EL ELEMENTO. Es una
decisión de accesibilidad, no de estilo: `clip-path` recorta TODO lo que pinta
el elemento — y el anillo de foco también. Con el troquel puesto en el propio
`.c-emblema`, un `` enfocado con el tabulador se quedaba
SIN NINGÚN anillo (fotografiado: del negro de la nave se pasaba directo al
latón, ni un píxel de foco). Con la chapa en el `::before`, el elemento no
recorta nada, el anillo de base.css §2 se dibuja entero, y la pieza se ve
exactamente igual. Aquí van, por tanto, chapa + canto + biseles + hollín, y la
sombra de la placa por `filter` sobre esta misma capa: así sigue el perfil del
chaflán en lugar de dibujar un rectángulo debajo. */
html[data-epoca="4"] .c-emblema::before{
content: "";
inset: 0;
background-color: var(--e-nada);
background-image:
var(--e4-grano, none), /* el hollín de la fundición */
var(--e4-chapa-laton, linear-gradient(180deg, #D6B683 0%, #A8874F 100%));
background-repeat: repeat, no-repeat;
clip-path: polygon(
var(--em4-chaflan) 0,
100% 0,
100% calc(100% - var(--em4-chaflan)),
calc(100% - var(--em4-chaflan)) 100%,
0 100%,
0 var(--em4-chaflan));
box-shadow:
inset 0 0 0 var(--e-grosor) var(--e4-laton-bajo, #4A3A22), /* el canto cortado */
inset 0 1px 0 var(--em4-brillo), /* el filo pulido de arriba */
inset 0 -1px 0 var(--em4-sombra); /* el canto en sombra de abajo */
filter: drop-shadow(0 1px 0 color-mix(in oklab, var(--e-fondo) 72%, var(--e-nada)));
}
/* ═══════════════════════════════════════════════════════════════════════════
5 · CABINA — EL NOMBRE Y SU PUNTO
───────────────────────────────────────────────────────────────────────────
Aquí ya no hay material que marcar: ni roca que soplar, ni piedra que cortar,
ni papel que entintar, ni chapa que troquelar. Queda el dato —el nombre,
apretado y limpio— y el punto de brasa que dice que hay corriente. Es la marca
de la demo que Bernat validó (`demo-cabina/demo.html` §3), la misma que
epoca-5.css §B lleva a `.c-barra-marca__marca::before`.
El punto va como ÍTEM DE LA CAJA, no como capa: se le quita el `absolute` del
gancho —la excepción que base.css §11 permite explícitamente («si lo quieres
en línea con el texto, písalo»)— y entra en la fila de flex con el `gap` de la
estructura. Escala con la marca (.52 del cuerpo), así que en `--sm` encoge
solo. Su halo es la MITAD del de la barra a propósito: ver la cabecera, «una
sola cosa encendida por pantalla».
═══════════════════════════════════════════════════════════════════════════ */
html[data-epoca="5"] .c-emblema{
--em-cuerpo: 15px;
--em-compensa: 0em; /* tracking negativo: no descentra */
--em5-punto: calc(var(--em-cuerpo) * var(--em-escala) * .52);
color: var(--e-tinta);
font-family: var(--e-display);
font-weight: 600; /* la marca de la demo va en 600 */
letter-spacing: var(--e-tracking);
text-transform: none;
/* EL RADIO SE REPITE AQUÍ, y no es redundancia. `epoca-5.css` cierra su regla
global de foco con `border-radius: inherit`, y esa regla es (0,2,0): al
enfocar el emblema, su radio se aplastaba al del padre —normalmente 0— y el
anillo salía cuadrado alrededor de una pieza de 14px (fotografiado). Los
componentes del kernel no lo notan porque su piel de la época declara el
radio DESPUÉS; el emblema lo declaraba en la estructura, que es (0,1,0) y
pierde. Aquí empata en especificidad y, al cargarse después, gana. */
border-radius: var(--e-radio);
}
html[data-epoca="5"] .c-emblema::before{
content: "";
position: static;
z-index: auto;
flex: 0 0 auto;
width: var(--em5-punto);
height: var(--em5-punto);
border-radius: 50%;
background-image: radial-gradient(circle at 40% 35%,
var(--e-acento-nucleo), var(--e-acento) 62%);
box-shadow: 0 0 6px var(--e-halo); /* la mitad del piloto de la barra */
}
/* ═══════════════════════════════════════════════════════════════════════════
7 · EL ANILLO DE FOCO — las dos épocas que se lo comían
───────────────────────────────────────────────────────────────────────────
El marcado congelado es un ``, así que el emblema NO es enfocable. Pero
es la marca, y una portada lo va a colgar de un `` el primer día:
entonces el anillo lo pinta `:focus-visible` de base.css §2, en `--e-acento` y
a 3px de la caja. Fotografiado y medido en las cinco (banco `emblema/`,
muestra del píxel del anillo contra el de al lado):
ép. anillo sobre antes ahora
1 la nube de ocre 1,14:1 6,03:1 ← naranja sobre ocre: invisible
2 el sillar 7,4:1 7,4:1
3 la película de tinta 1,02:1 10,4:1 ← minio sobre minio: invisible
4 — — :1 7,9:1 ← recortado por `clip-path`
5 el campo 6,8:1 6,8:1
Las tres correcciones, cada una con la lógica de su época y ninguna fuera de
`.c-emblema`:
· CUEVA. Sobre pigmento denso, ningún naranja del sistema llega a 3:1 (el
núcleo claro se queda en 2,08 y la cal en 2,59): el único color que contrasta
con el ocre es la PARED. Y es coherente además de necesario — en esta época
la marca ya se hace quitando pigmento, así que el foco es otra línea de roca
que asoma. El anillo cae entero dentro de la nube, que sangra 16px y 10px.
· PAPEL. Aquí no se cambia el color, se cambia el SITIO: el anillo sale fuera
de la sangría de la tinta y aterriza en la superficie de al lado, que es
exactamente para lo que `epoca-3.css` declaró `--e3-foco` («el anillo se
dibuja fuera de la caja, o sea sobre la superficie vecina»). Sobre la mesa
el anillo es crema; dentro de una hoja, el mismo token ya vale tinta.
· HIERRO. No se toca el anillo: se movió la placa al `::before` (ver §4) para
que `clip-path` deje de recortarlo.
═══════════════════════════════════════════════════════════════════════════ */
html[data-epoca="1"] .c-emblema:focus-visible{
outline-color: var(--e-fondo);
}
html[data-epoca="3"] .c-emblema:focus-visible{
outline-color: var(--e3-foco, var(--e-tinta));
outline-offset: calc(var(--em3-sangre) + 3px);
}
/* ═══════════════════════════════════════════════════════════════════════════
8 · 390 px — la caja aprieta, la letra no
───────────────────────────────────────────────────────────────────────────
Lo único que sobra en un móvil es el aire lateral. El cuerpo de la letra ya
está en su mínimo legible en las cinco épocas y no se toca; el tracking de las
dos que van muy espaciadas (Piedra y Hierro) sí baja, que es lo que evita que
la firma empuje al resto del pie fuera de la pantalla. Cada vez que baja el
tracking baja con él su `--em-compensa`, o el centrado se descuadra.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 430px){
.c-emblema{
padding-inline:
calc(var(--e-pad-caja) * .5 + var(--em-compensa))
calc(var(--e-pad-caja) * .5);
}
.c-emblema--sm{
padding-inline:
calc(var(--e-pad-caja) * .36 + var(--em-compensa))
calc(var(--e-pad-caja) * .36);
}
html[data-epoca="1"] .c-emblema{ letter-spacing: .06em; --em-compensa: .06em; }
/* la nube se recoge: 19px de soplo por lado, con la firma pegada al canto de
un pie de 390px, empujan la anchura de scroll del documento */
html[data-epoca="1"] .c-emblema::before{
inset:
calc(-8px * var(--em-escala)) calc(-12px * var(--em-escala))
calc(-7px * var(--em-escala)) calc(-12px * var(--em-escala));
}
html[data-epoca="2"] .c-emblema{ letter-spacing: .15em; --em-compensa: .15em; }
html[data-epoca="3"] .c-emblema{ letter-spacing: .09em; --em-compensa: .09em; }
html[data-epoca="4"] .c-emblema{ letter-spacing: .14em; --em-compensa: .14em; }
}
/* ═══════════════════════════════════════════════════════════════════════════
9 · MOVIMIENTO REDUCIDO — no hay nada que congelar, y ésa es la prueba
───────────────────────────────────────────────────────────────────────────
Esta hoja no declara ni una `animation` ni una `transition`: el emblema es una
firma y una firma está quieta (cabecera, «LA VIDA: NO LA HAY»). El bloque se
deja escrito por dos motivos: deja constancia de que la ausencia es una
decisión y no un olvido, y blinda la pieza si mañana alguien le añade vida sin
leer la cabecera — estado final, quieto, con toda la información puesta.
═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
.c-emblema,
.c-emblema::before,
.c-emblema::after{
animation: none;
transition: none;
}
}