/* ============================================================ DYRECO · Dirección C — NAVE tokens.css — paleta, tipografía, retícula, ritmo, movimiento Fondo carbón · la foto manda · el amarillo es luz. ============================================================ */ :root { /* --- 1. Paleta ------------------------------------------- Carbón dominante. El amarillo NO rellena superficies: es luz (filetes, cifras, CTA, barrido sobre foto). */ --fondo: #0E0E10; /* carbón, fondo dominante */ --sup: #16161A; /* superficie elevada (tarjetas) */ --sup-2: #1E1E24; /* segunda elevación */ --linea: #2A2A31; /* filetes de 1 px */ --linea-alta: #3A3A44; /* filete en hover / foco */ --texto: #F2F2F0; /* texto principal */ /* ⚠️ ACLARADO EL 6-sep-2026 (#8C8C95 → #A2A2AA), a petición del cliente: los párrafos se leían grises sobre el carbón. Sube el contraste contra el fondo de 5,79:1 a 7,61:1 y CONSERVA el escalón de jerarquía contra --texto, que pasa de 2,97:1 a 2,26:1: el titular sigue leyéndose como titular. Es el color de TODO el texto secundario del sitio —párrafos, enlaces del pie, rótulos de ficha, un icono del mapa y el punto de estado de contacto—, así que el cambio es una sola línea y llega a las ocho páginas a la vez. */ --apagado: #A2A2AA; /* secundario — NO bajar de aquí */ --amarillo: #FFED00; /* LUZ */ /* Sobre amarillo, el texto va SIEMPRE casi negro */ --sobre-amarillo: #0E0E10; /* Rojo de error de formulario. Vivía como literal `#FF6B6B` en estilos.css (dos veces) y como token propio en el :root de p-presupuesto.css: contacto y presupuesto resolvían el mismo rojo por caminos distintos. Sube aquí. */ --error: #FF6B6B; /* --- CANALES DE LA PALETA ------------------------------------- La paleta no se podía cambiar desde aquí porque casi nadie la usaba por token: el carbón se escribía a mano 171 veces con 54 alfas distintas, el texto 32 con 14 y el amarillo 24 con 13. Tokenizar "una transparencia concreta" (--tinta-60, --tinta-88, --am-16) no resuelve nada: siempre hace falta la alfa 55.ª. Con los canales sueltos cualquier alfa sigue siendo un token: background: rgb(var(--fondo-rgb) / .72); box-shadow: 0 26px 68px rgb(var(--negro-rgb) / .55); Sintaxis CSS Color 4, soportada por todo lo que renderiza esta web. ⚠️ Los scrims y las sombras se construyen SIEMPRE así. Un `rgba(14,14,16,α)` literal nuevo en una hoja de página es un defecto, no un atajo. */ --fondo-rgb: 14 14 16; /* --fondo #0E0E10 */ --texto-rgb: 242 242 240; /* --texto #F2F2F0 */ --am-rgb: 255 237 0; /* --amarillo #FFED00 */ --negro-rgb: 0 0 0; /* negro puro: viñetas y sombras */ --blanco-rgb: 255 255 255; /* blanco puro: solo hero y wordmark */ /* Transparencias de trabajo con nombre propio: solo las que se repiten de verdad. Todo lo demás se escribe con los canales de arriba. */ --am-04: rgb(var(--am-rgb) / .04); --am-10: rgb(var(--am-rgb) / .10); --am-30: rgb(var(--am-rgb) / .30); /* --- 2. Tipografía --------------------------------------- Condensada muy alta contra humanista muy aireada. */ /* Las dos pilas llevan delante de la fuente de sistema una cara de RESPALDO CON MÉTRICAS AJUSTADAS (fuentes.css, al final): ocupa exactamente lo mismo que la woff2 que va a sustituirla, así que el `swap` cambia la forma de las letras pero no mueve nada. Sin ellas el CLS de carga de la Home era 0,108 en Slow 4G — por encima del umbral 0,1 de Core Web Vitals— y el salto salía del H1 del hero y de la cabecera. ⚠️ El orden importa: la de Arial Narrow es la más parecida a la condensada, pero no existe en Android ni en casi ningún Linux, y una cara `local()` que no resuelve se descarta sola y pasa a la siguiente. */ --display: 'Saira Condensed', 'Saira Condensed respaldo', 'Saira Condensed respaldo 2', 'Arial Narrow', system-ui, sans-serif; --lectura: 'Public Sans', 'Public Sans respaldo', system-ui, -apple-system, sans-serif; /* Escala fluida — sin saltos por breakpoint. El H1 vive dentro del hero, que mide 100dvh: si solo escala con el ANCHO se sale por arriba en cuanto la ventana es baja (portátil de 600-750 px, móvil apaisado). Por eso los tres términos del clamp conocen el alto: · suelo min(2.9rem, 6.6dvh) — cede solo en ventanas muy bajas · ideal min(7.2vw, 10.5dvh) — el 7.2vw del brief, con techo de alto · techo 7rem — el del brief, intacto A 1440x1000 sigue dando los mismos 103,7 px de siempre. */ --fs-h1: clamp(min(2.9rem, 6.6dvh), min(7.2vw, 10.5dvh), 7rem); /* Nombres de división (H3). Iban a 5.2vw = 74,9 px, un 30 % POR ENCIMA del H2 de su propia sección (57,6 px) y a 10 px del H1: el nivel 3 leía como nivel 1 y el nivel 2 desaparecía, cuatro veces seguidas. Ahora queda declaradamente entre el H2 y el H3 corriente: 44,6 px a 1440 frente a 57,6 del H2 y 28,8 del H3. El peso del rótulo lo sostienen la condensada, el 800 y el filete amarillo con la numeración, no el tamaño. */ --fs-rotulo: clamp(1.9rem, 3.1vw, 3.2rem); /* nombres de división */ --fs-rotulo-hero: clamp(1.5rem, 2.6vw, 2.4rem); /* rótulo de escena del hero */ /* Teléfono del pie: es la conversión principal de una ferretería con mostrador y necesita cuerpo propio. Tomaba prestado --fs-rotulo-hero, así que retocar el rótulo del hero movía el teléfono del pie sin querer. */ --fs-tel-pie: clamp(1.5rem, 2.6vw, 2.4rem); --fs-cifra: clamp(3rem, 5.6vw, 5.75rem); /* barra de confianza */ --fs-h2: clamp(2.05rem, 4vw, 4.15rem); --fs-h3: clamp(1.375rem, 2vw, 2rem); --fs-h4: clamp(1.125rem, 1.35vw, 1.375rem); --fs-body: clamp(1rem, 1.05vw, 1.125rem); --fs-sm: clamp(.875rem, .95vw, .9375rem); --fs-kicker: clamp(.6875rem, .82vw, .8125rem); --fs-micro: .75rem; /* Cuerpo propio del PIE (6-sep-2026). El pie iba con --fs-sm (14 px a 1440) y --fs-micro (12 px fijos) y el cliente lo pidió un punto más grande. No se tocan los tokens generales —moverían el cuerpo pequeño de las ocho páginas—: el pie tiene ahora su propia pareja, un escalón por encima. --fs-pie: 14 → 15 px a 1440 · 15 → 17 a 1920 --fs-pie-micro: 12 → 13 px fijos (copyright y legales) */ --fs-pie: clamp(.9375rem, 1.05vw, 1.0625rem); --fs-pie-micro: .8125rem; --lh-display: .92; --lh-rotulo: .90; --lh-titulo: 1.02; --lh-body: 1.72; --lh-corto: 1.5; --ls-display: .005em; --ls-kicker: .22em; --ls-nav: .12em; /* --- 2.bis · MEDIDA DE LECTURA --------------------------- 🔴 LA `ch` MIENTE. Es el ancho del «0», y en Public Sans el cero es bastante más ancho que la letra media del cuerpo: `--medida: 66ch` valía 646 px y renderizaba 86 CARACTERES REALES por línea, veinte por encima del tope de la casa. De ahí salían veintiuna familias de bloque pasadas de medida en las once páginas (medido el 8-sep-2026 reconstruyendo las líneas con `Range.getClientRects()`, que es la única prueba que vale aquí: contar `ch` no lo es). Y UNA SOLA CIFRA NO PUEDE SERVIR PARA TODOS. La misma caja mete muchos más caracteres con letra pequeña que con letra grande: a 646 px, el cuerpo de 16 px daba 92 caracteres y el de 14 px, 104. Así que la medida es una ESCALERA por tamaño de texto, en PÍXELES y MEDIDA, no un número redondo elegido a ojo. La densidad medida en esta tipografía es de 0,436 px por carácter y por píxel de cuerpo (16 px → 6,97 px/carácter; 14 px → 6,02; 19,4 px → 8,39). O sea que 66 caracteres caben en 28,75 × el cuerpo. Cada peldaño se dimensiona con el cuerpo MÁS PEQUEÑO de su banda —que es el que más caracteres empaqueta— y se le deja un 4-5 % de margen, porque el salto de línea es discreto y una palabra larga descoloca la cuenta: --medida-l 520 px · 19-21 px → entradillas y leads grandes --medida 440 px · 16-18 px → --fs-body, el cuerpo corriente --medida-s 400 px · 14-15 px → --fs-sm, --fs-pie, notas y pies --medida-xs 340 px · 12-13 px → --fs-micro, letra legal de forms Son las MISMAS cifras que `css/p-articulo.css` ya tenía medidas y en producción (`--art-med`, `--art-med-b`, `--art-med-s`): el sitio hereda esa escalera en vez de inventarse una segunda. Si algún día hay que moverla, se mueve aquí y se vuelve a medir con `_tools/medida_sitio.py `. ⚠️ `--medida` conserva el nombre por compatibilidad —lo leen catorce reglas de seis hojas— y sigue siendo el peldaño del cuerpo corriente, así que esas catorce quedan bien sin tocarlas. Lo que cambia es que ahora vale lo que dice. ⚠️ ES UN TOPE, NO UNA ANCHURA. Un bloque puede ser MÁS ESTRECHO por composición (un claim a 30ch, una tarjeta de tres líneas): eso no se toca. Lo que no puede es pasarse. ⚠️ El tope no crece con la ventana a propósito. A 1920 el cuerpo sube a 18 px y la misma caja da 56 caracteres: menos, no más. Correcto. */ /* ⚠️ `--medida-l` HOY NO LA LEE NINGUNA HOJA DE PÁGINA: ningún bloque de prosa del sitio pasa de 18 px. Está declarada porque es el peldaño que YA usa la plantilla de artículo con otro nombre (`--art-med`, los mismos 520 px), y porque una escalera con un hueco invita a inventarse el valor que falta. Cuando p-articulo.css se vuelva a tocar, ese `--art-med` es esta línea. */ --medida-l: 520px; /* 19-21 px */ --medida: 440px; /* 16-18 px — cuerpo corriente */ --medida-s: 400px; /* 14-15 px */ --medida-xs: 340px; /* 12-13 px */ /* --- 3. Retícula — cinematográfica ------------------------ */ --max: 1720px; --gutter: 40px; --gap: 32px; --gap-s: 16px; /* --- 4. Ritmo vertical — muy aireado ---------------------- */ --sec-y: clamp(96px, 10vw, 176px); --bloque: clamp(40px, 4.5vw, 80px); --pieza: clamp(20px, 2vw, 32px); /* Aquí vivía `--hero-pin: 360dvh` con cinco líneas de comentario y un override a 300dvh por debajo de 780 px. El hero dejó de estar fijado por scroll (estilos.css §06: mide 100dvh y se acabó) y el token no lo leía nadie: solo servía para hacer creer que el pin del hero se controla desde este fichero. Fuera los tres. */ /* --- 5. Imagen -------------------------------------------- */ --radio: 2px; /* casi recto, pero no del todo */ /* Junta del mosaico del hero de división: el hilo de carbón que separa las seis fotos y las hace leer como seis piezas y no como un collage. Vivía en el :root de p-rotulacion.css como --rot-junta; sube al subir el componente. */ --junta-mosaico: 3px; /* Separación del raíl de cuatro pasos: donde cae el nodo amarillo sobre la línea. Vivía en el :root de p-maquinaria.css; sube con el componente. */ --rail-x: clamp(30px, 3vw, 46px); --foto: brightness(.78) contrast(1.08) saturate(.92); --foto-plana: brightness(.94) contrast(1.24) saturate(.88); /* fotos flojas */ /* Las mismas fotos flojas a sangre y a 100dvh en el hero: al lado de rotulación se iban de luz y rompían el carbón. Se corrige subiendo el CONTRASTE (1.30, el más alto de la web), no bajando el brillo hasta el .78 de las buenas: siguen siendo las más claras de las cuatro escenas. */ --foto-plana-hero: brightness(.85) contrast(1.30) saturate(.85); /* Recetas de scrim. Antes había un solo `--scrim` que no usaba nadie mientras cada sección se inventaba el suyo. Estas tres son las que se repiten de verdad; para cualquier otra, canales + alfa. */ --scrim-v: linear-gradient(180deg, rgb(var(--negro-rgb) / .62) 0%, rgb(var(--negro-rgb) / .15) 26%, rgb(var(--negro-rgb) / .82) 100%); --scrim-lateral: linear-gradient(90deg, rgb(var(--fondo-rgb) / .72) 0%, rgb(var(--fondo-rgb) / .10) 62%); --scrim-pie: linear-gradient(180deg, rgb(var(--fondo-rgb) / 0), rgb(var(--fondo-rgb) / .55)); --sombra-texto: 0 2px 40px rgb(var(--negro-rgb) / .5); /* --- 6. Movimiento — suave, largo, cinematográfico -------- */ --ease: cubic-bezier(.22,.61,.36,1); --ease-suave: cubic-bezier(.16,1,.3,1); --dur-reveal: 760ms; --stagger: 110ms; --dur-hover: 900ms; --dur-ui: 280ms; --alto-cab: 76px; } @media (max-width: 900px) { :root { --gutter: 24px; --gap: 20px; --alto-cab: 64px; } } /* Ventana MUY baja (móvil apaisado, portátil recortado). El recorte de la cabecera iba atado al ANCHO (--alto-cab:64px solo por debajo de 900 px) y un iPhone apaisado mide 932 y un Pixel 915: se quedaban con los 76 px de escritorio y el `padding-top` del stage se llevaba 77 px de un presupuesto de 430. Aquí lo pide el ALTO, que es de lo que va el problema. */ @media (max-height: 560px) { :root { --alto-cab: 56px; } } /* Móvil pequeño tumbado (≤430 px de alto y ≤780 de ancho): aquí no cabe nada y hasta la cabecera tiene que ceder. */ @media (max-height: 430px) and (max-width: 780px) { :root { --alto-cab: 50px; } }