/* ============================================================================= TOKENS · Sistema de diseño "La Cinta" · el azul del logotipo ----------------------------------------------------------------------------- Arquitectura en 3 capas. Regla de oro para que el sitio siga siendo mantenible: 1. PRIMITIVAS — escalas crudas. Nunca se usan directamente en un componente. 2. SEMÁNTICAS — el único vocabulario que consumen los componentes. 3. COMPONENTE — declaradas en la hoja de cada bloque, siempre derivadas de (2). El sistema es el de Arco Portuario, heredado entero: capas, contextos `.on-dark`, pastillas con color Y trama, las cuatro capas de movimiento reducido y la hoja de impresión. Lo que cambia es el mundo. --------------------------------------------------------------------------- EL MUNDO · EL AZUL DEL LOGOTIPO Hasta septiembre de 2026 el campo era un verde petróleo casi negro, la identidad provisoria «Entre ríos». Llegó el logotipo de Mesopotámico S.A. —blanco sobre un azul saturado, #2339c5— y en la reunión de seguimiento de septiembre de 2026 se pidió llevar el sitio a ese azul: «un color dentro de la gama del fondo del logo, que no sea oscuro», porque el petróleo era demasiado oscuro para ese logo y dejaba al sitio igual a todos los demás. · EL CAMPO es el azul del logo llevado un escalón abajo (#192c8c): azul real, no un azul noche. El logo blanco se lee sobre él sin caja propia. Gobierna la cabecera, la portada, el pie y todas las superficies profundas. NO es el azul exacto del logo a propósito: a esa luz una superficie grande grita, y el pedido fue «dentro de la gama», no «el mismo». · EL ACENTO es la barranca: el latón arenoso de las barrancas de Paraná y Diamante con el sol bajo. Es la luz del sistema —interacción, foco, subrayado activo, la traza de la portada— y sobre el campo profundo es lo único que se enciende. Latón sobre azul real: se queda. · EL PAPEL es frío con una gota del mismo azul: tarifas, normativa y trámites se leen de día, sobre un documento, y ese documento pertenece al mismo mundo que el campo. Los neutros conservan la luminosidad y el croma que tenían con el petróleo; cambió sólo el tono, así que cada par de contraste del papel quedó donde estaba. La escena física decide la luz: alguien parado en la banquina de la RN 18 a las 23:40 con el brillo al 40 %, y alguien de la guardia con la pestaña abierta todo el día en Paraná. Las dos cosas, cada una en su superficie. COLOR — estrategia "Comprometida", la misma de Arco: un solo color saturado gobierna del 30 al 60 % de la superficie. El azul no es un acento: es el campo. EL LATÓN NO ES ÁMBAR DE SEÑAL. Precaución y demoras son naranjas saturados del semáforo vial; el acento está corrido hacia el amarillo (41° de tono contra 34°) y con la mitad de croma, y nunca pinta una pastilla de estado. Una señal además lleva siempre su trama o su forma: el color nunca es el único portador. SIN MANUAL DE MARCA TODAVÍA. Hay logotipo pero no hay manual (requerimiento §21): la rampa sale del logo y no de una paleta entregada. Toda la identidad cromática sale de las rampas `--marca-*` y `--acento-*`: cambiar esas dos rampas —acá o desde Personalizar tema— cambia el sitio entero sin tocar un componente. Los nombres son de ROL y no de color a propósito: el día que llegue la paleta definitiva no hay que volver a renombrar. Después de cambiarlas hay que correr `npm run contraste` (PETG art. 61.7: 4,5:1). ========================================================================== */ :root { /* ===================================================================== 1. PRIMITIVAS · COLOR ===================================================================== */ /* --- Marca · el azul del logotipo. El 600 ES el fondo del logo (#2339c5), medido sobre el archivo entregado. La rampa se arma en OKLCH con el tono del logo (267,9°): los claros bajan croma cerca del blanco en lugar de sostenerlo por simetría. EL EXTREMO OSCURO ESTÁ COMPRIMIDO A PROPÓSITO. Del 600 al 950 hay menos distancia que en una rampa corriente porque el 950 es el campo, y el pedido fue que el campo no sea oscuro: queda en L 0,35, donde el petróleo estaba en 0,25. El 900 y el 800 —las superficies que se apoyan sobre el campo, como la marquesina— se separan de él por poco, y las bandas se distinguen por su filete, no por el salto de luz. El 500 es el trazo de la traza en el mapa. --- */ --marca-25: #f5f8ff; --marca-50: #ebf1ff; --marca-100: #d7e3ff; --marca-200: #b7cbff; --marca-300: #8facfc; --marca-400: #6084f2; --marca-500: #3e60e1; --marca-600: #2339c5; /* ◄ MARCA · el fondo del logotipo */ --marca-700: #1f33b3; --marca-800: #1c2fa3; --marca-900: #1a2d97; --marca-950: #192c8c; /* ◄ el campo: cabecera, portada y pie */ --marca-990: #101e60; /* --- Neutros. Fríos y con una gota del mismo azul: el papel del documento pertenece al mismo mundo que el campo, no a una escala gris genérica. --- */ --n-0: #ffffff; --n-25: #fbfcfd; --n-50: #f4f5f8; --n-100: #eaecf0; --n-200: #dadde4; --n-300: #bec3ce; --n-400: #9196a2; /* n-500 alimenta el texto tenue: oscurecido respecto del gris "natural" de la escala para llegar a 4,5:1 también sobre el papel (4,9:1), que es lo que exige el Art. 61.7 del pliego. */ --n-500: #606571; --n-600: #4e525d; --n-700: #3b3f48; --n-800: #272a31; --n-900: #16191e; --n-950: #0c0d10; /* --- Acento · la barranca. Latón arenoso, el SEGUNDO color del sistema. El 300 es el que se lee sobre el campo profundo (7,7:1); el 600 es el que hace de texto sobre papel y por eso está oscurecido: más luminoso no llega a 4,5:1. --- */ --acento-25: #fbf8f1; --acento-50: #f5eee0; --acento-100: #ebdec1; --acento-200: #dcc696; --acento-300: #cdae6a; /* ◄ acento sobre campo profundo */ --acento-400: #b99341; --acento-500: #9f7b2d; /* ◄ ACENTO · el latón de la barranca */ --acento-600: #856623; --acento-700: #6b521c; --acento-800: #544118; --acento-900: #3d2f12; --acento-950: #29200d; /* --- Naranja de señalización transitoria. YA NO es el acento del sistema ni, desde septiembre de 2026, el color del ESTADO «obras»: ése pasó a violeta por pedido del cliente y vive en `--sig-obra`. Lo que queda acá es el naranja del aviso de borrador, el sello provisorio y el aviso de maqueta: cosas que advierten «esto todavía no es definitivo». Sigue siendo el color del cono y del cartel, sólo que ahora nombra al borrador y no a la obra. Un color de señalización usado como adorno pierde el significado por el que se lo eligió. --- */ --obra-50: #fff2e4; --obra-100: #ffe0c2; --obra-200: #ffc186; --obra-300: #ff9f45; --obra-400: #fa8305; --obra-500: #e57200; /* ◄ naranja de obra · señalización, no marca */ /* Oscurecido respecto del naranja "natural" de la escala: como también hace de color de texto en los avisos de obra, tiene que llegar a 4,5:1 sobre el papel y sobre la superficie hundida. A #c45f00 se quedaba en 4,21. */ --obra-600: #b05200; --obra-700: #9d4b00; --obra-800: #7a3a02; /* --- Señales operativas. El semáforo del estado de la traza. Cada estado se codifica ADEMÁS por marca (trama, forma o ícono): el color nunca es el único portador de información. --- */ --sig-fluido: #17663f; --sig-fluido-bg: #e3f2ea; --sig-precaucion: #8a5600; --sig-precaucion-bg: #fdf0d8; --sig-demoras: #a15c00; --sig-demoras-bg: #fdeedb; /* OBRAS ES VIOLETA, NO NARANJA (pedido del cliente, septiembre de 2026). Venía en #9d4b00 sobre #fff2e4 y era el tercer naranja de la escala: precaución, demoras y obras se confundían entre sí. Sacar obras del naranja deja sólo dos, que ya es la mitad del problema. EL VIOLETA ES EL ÚNICO HUECO LIBRE de la señalización: fluido es verde, corte es rojo, precaución y demoras son naranjas, informativo es el azul de la marca. Medido en grados de tono, el estado más cercano queda a 60°. LO QUE SE PIERDE, DICHO: el naranja era el color de la señalización vial transitoria real, la del cono y el cartel en la ruta. Esa correspondencia entre la pantalla y el asfalto se entrega a cambio de la distinción. La rampa `--obra-*` NO se toca: sigue siendo la del aviso de borrador y el sello provisorio, que es otra cosa. Contraste 8,43:1 sobre su fondo, mejor que el 5,54:1 del naranja. */ --sig-obra: #5a2f8a; --sig-obra-bg: #f5effb; --sig-corte: #b3121f; --sig-corte-bg: #fdeaea; --sig-info: #01447f; --sig-info-bg: #e6effa; /* Rojo de emergencia. Reservado exclusivamente al canal de asistencia: si aparece en otro lado, pierde la fuerza justo donde hace falta. */ --emergencia: #c8102e; --emergencia-fuerte: #9c0a22; --emergencia-claro: #ff6b7d; /* ===================================================================== 1. PRIMITIVAS · TIPOGRAFÍA --------------------------------------------------------------------- Tres cortes, las tres de fuente abierta y servidas por el mismo `link`. Inter — TEXTO E INTERFAZ. El pedido fue «una fuente seria, como Inter», y es Inter: la letra de pantalla más probada que hay para leer un formulario, una tabla o un párrafo largo a cualquier tamaño. Su eje óptico se ajusta solo. Archivo — TITULAR. Una grotesca de Omnibus-Type, fundición de Buenos Aires, con eje de ancho: los titulares van EXPANDIDOS (`--ancho-display`), que es lo que les da presencia sin levantar la voz. Formal como una lámina de ingeniería, no como una campaña. Emparentada con Inter por la estructura, distinta por la proporción. Chivo Mono — el registro técnico: kilómetro, progresiva, número de gestión, tarifa. Cifras tabulares. De la misma fundición que Archivo, y el mismo corte que usa el sitio de Arco. Se cambian desde Personalizar tema sin tocar un componente. ===================================================================== */ --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'Chivo Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; /* El ancho de los titulares. 112 % es el punto en que la grotesca se abre sin volverse una letra de cartel; los rótulos cortos en mayúscula van al 100 %, porque expandidos y espaciados se desarman. */ --ancho-display: 112%; /* Escala tipográfica — razón ≈1,25, fluida entre 380 px y 1440 px de ancho. */ --fs-3xs: 0.75rem; /* 12 px · sólo anotaciones y epígrafes (mínimo PETG) */ --fs-2xs: 0.8125rem; /* 13 px */ --fs-xs: 0.875rem; /* 14 px · etiquetas y celdas densas (mínimo PETG) */ --fs-sm: 0.9375rem; /* 15 px */ --fs-base: 1.0625rem; /* 17 px · cuerpo por defecto */ --fs-md: 1.1875rem; /* 19 px · bajadas */ /* La escala baja un escalón de la mitad para arriba con la remaquetación de septiembre de 2026. No es un ajuste de gusto: el sitio pasó de tener siete secciones por página a tener tres o cuatro, y en una página corta un h2 de 40 px grita. CorreSur trabaja los títulos de sección en ese registro y por eso se lee como un documento y no como una campaña. El display de la portada —`4xl` y `5xl`— no se toca: ahí la marca sí tiene que sonar. */ --fs-lg: clamp(1.25rem, 0.95rem + 0.85vw, 1.4375rem); --fs-xl: clamp(1.4375rem, 1.05rem + 1.2vw, 1.75rem); --fs-2xl: clamp(1.625rem, 1.15rem + 1.7vw, 2.1875rem); --fs-3xl: clamp(1.875rem, 1.25rem + 2.4vw, 2.75rem); --fs-4xl: clamp(2.05rem, 0.75rem + 5.6vw, 4.75rem); --fs-5xl: clamp(3rem, 0.4rem + 9vw, 7rem); /* techo del display: 7rem */ --lh-tight: 1.02; --lh-snug: 1.16; --lh-normal: 1.42; --lh-body: 1.62; /* PETG: interlineado 1,5–2 veces el cuerpo */ --lh-loose: 1.75; /* Calibrados para Archivo expandida: una grotesca ancha no necesita el cierre de la Overpass de Arco, y con -0,035em las letras de un titular se tocaban. El piso sigue siendo -0,04em. */ --tk-tight: -0.016em; --tk-snug: -0.006em; --tk-normal: 0; --tk-label: 0.09em; /* reservado a mayúsculas cortas */ --tk-wide: 0.16em; /* etiquetas de señal, muy pocas y muy cortas */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* ===================================================================== 1. PRIMITIVAS · ESPACIO --------------------------------------------------------------------- Escala no lineal a propósito: agrupa fuerte lo relacionado y separa mucho lo que no lo está. Evita el ritmo plano de un único valor repetido. ===================================================================== */ --sp-0: 0; --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.375rem; /* 22 */ --sp-6: 1.75rem; /* 28 */ --sp-7: 2.25rem; /* 36 */ --sp-8: 3rem; /* 48 */ --sp-9: 4rem; /* 64 */ --sp-10: 5.5rem; /* 88 */ --sp-11: 7.5rem; /* 120 */ --sp-12: 10rem; /* 160 */ /* ===================================================================== 1. PRIMITIVAS · FORMA, ELEVACIÓN, MOVIMIENTO --------------------------------------------------------------------- La cinta es un objeto trazado, no una tarjeta blanda. El radio máximo de una superficie es 10 px; lo único redondo del sistema son las píldoras de estado, que son etiquetas de señal. ===================================================================== */ --r-0: 0; --r-1: 2px; --r-2: 3px; --r-3: 5px; --r-4: 8px; --r-pill: 999px; /* Elevación: o borde definido o sombra. Nunca hairline + sombra difusa. Toda sombra lleva desplazamiento y desenfoque; un halo de color sin desplazamiento es decoración, no profundidad. */ --sh-raised: 0 1px 2px rgb(16 30 96 / 0.07), 0 2px 8px rgb(16 30 96 / 0.06); --sh-overlay: 0 10px 24px -8px rgb(16 30 96 / 0.22), 0 24px 56px -16px rgb(16 30 96 / 0.20); --sh-sticky: 0 1px 0 rgb(16 30 96 / 0.08), 0 8px 22px -14px rgb(16 30 96 / 0.34); --sh-widget: 0 12px 28px -10px rgb(16 30 96 / 0.42), 0 32px 72px -24px rgb(16 30 96 / 0.36); /* Curvas. `--ease-traza` es la desaceleración exponencial con la que se dibuja la cinta: una entrada segura que llega y se queda quieta. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-traza: cubic-bezier(0.16, 1, 0.3, 1); --dur-1: 120ms; /* respuesta inmediata */ --dur-2: 220ms; /* cambio de estado corriente */ --dur-3: 420ms; /* superposición o cambio de vista */ --dur-4: 720ms; --dur-5: 1100ms; /* el trazado de la cinta: el único momento largo del sitio */ /* Medidas de layout */ --w-prose: 68ch; /* longitud de línea cómoda: 65–75ch */ --w-narrow: 58rem; --w-content: 76rem; --w-wide: 92rem; --gutter: clamp(1.125rem, 0.6rem + 2.4vw, 3.25rem); --header-h: 5rem; /* La cinta cruza cada página a una altura fija. Es la regla que ordena el sitio entero: la grilla se somete a la cinta, no al revés. */ --cinta-h: clamp(6.5rem, 4rem + 8vw, 11rem); --cinta-riel: 2px; /* ===================================================================== 2. SEMÁNTICAS — el único vocabulario que usan los componentes ===================================================================== */ /* Superficies. `surface-sunk` es la banda que alterna en todas las páginas, y por eso es la palanca de reparto entre los dos colores del sistema: teñirla pone el acento en cada página sin tocar un solo componente. */ /* EL DOCUMENTO ES PAPEL FRÍO Y LA BANDA QUE ALTERNA ES BLANCA —el reparto que Arco Portuario fijó en septiembre de 2026 con la referencia de CorreSur—: el sitio se lee como un documento oficial, que es lo que es y lo que el usuario de una ruta nacional espera encontrar. `surface-inset` sube un escalón en lugar de bajarlo: sobre papel gris el hueco se marca aclarando, no oscureciendo. */ --color-canvas: var(--n-100); --color-surface: var(--n-0); --color-surface-sunk: var(--n-0); --color-surface-inset: var(--n-50); --color-surface-inverse: var(--marca-950); --color-surface-inverse-alt: var(--marca-900); /* El campo profundo del acento: la barranca de noche. Es al latón lo que `--marca-950` es al azul. Lo usa `.on-acento`, que hoy no pinta ninguna página activa y queda disponible para la marca definitiva. */ --color-surface-acento: var(--acento-950); --color-surface-acento-alt: var(--acento-900); --color-text-on-acento: #f5eee0; --color-text-on-acento-soft: #d8c69e; --color-text-on-acento-faint: #c6b184; --color-line-acento: rgb(220 198 150 / 0.20); --color-line-acento-strong: rgb(220 198 150 / 0.40); /* Texto */ --color-text: var(--n-900); --color-text-soft: var(--n-600); --color-text-faint: var(--n-500); --color-text-on-inverse: #ebf0fd; --color-text-on-inverse-soft: #bccaec; --color-text-on-accent: #ffffff; /* Líneas */ --color-line: var(--n-200); --color-line-strong: var(--n-300); --color-line-inverse: rgb(183 203 255 / 0.20); --color-line-inverse-strong: rgb(183 203 255 / 0.38); /* Marca */ --color-brand: var(--marca-600); --color-brand-strong: var(--marca-700); --color-brand-deep: var(--marca-950); --color-brand-soft: var(--marca-50); --color-brand-on-dark: var(--marca-200); --color-accent: var(--acento-600); --color-accent-strong: var(--acento-700); --color-accent-soft: var(--acento-50); --color-accent-on-dark: var(--acento-300); /* El naranja conserva su propio vocabulario, para lo que es obra de verdad. */ --color-obra: var(--obra-700); --color-obra-soft: var(--obra-50); --color-obra-on-dark: var(--obra-300); /* Interacción */ --color-link: var(--marca-700); --color-link-hover: var(--acento-700); --color-focus: var(--acento-500); --color-selection: var(--marca-100); /* Ritmo vertical de sección */ --space-section: clamp(2.75rem, 1.9rem + 3.4vw, 4.75rem); --space-section-lg: clamp(3.5rem, 2.2rem + 5vw, 6.5rem); --space-block: clamp(1.75rem, 1.2rem + 2vw, 3rem); } /* ----------------------------------------------------------------------------- Contexto oscuro. No es "modo oscuro": es el campo azul del logotipo, elegido a propósito. Cualquier componente adentro hereda el vocabulario invertido sin enterarse. La compensación de texto claro sobre fondo oscuro se aplica en base.css, en los tres ejes (interlineado, tracking y peso). -------------------------------------------------------------------------- */ .on-dark { --color-canvas: var(--marca-950); --color-surface: var(--marca-900); --color-surface-sunk: var(--marca-990); --color-surface-inset: rgb(183 203 255 / 0.07); --color-text: var(--color-text-on-inverse); --color-text-soft: var(--color-text-on-inverse-soft); --color-text-faint: #adbde5; --color-line: var(--color-line-inverse); --color-line-strong: var(--color-line-inverse-strong); --color-link: var(--marca-200); --color-link-hover: var(--acento-300); --color-brand: var(--marca-200); --color-brand-strong: var(--marca-100); --color-brand-soft: rgb(183 203 255 / 0.09); --color-accent: var(--acento-300); --color-accent-strong: var(--acento-200); --color-accent-soft: rgb(185 147 65 / 0.22); --color-obra: var(--obra-300); --color-obra-soft: rgb(229 114 0 / 0.20); --color-focus: var(--acento-300); --color-selection: rgb(35 57 197 / 0.55); --sh-raised: none; color: var(--color-text); } /* ----------------------------------------------------------------------------- Contexto de acento profundo. El mismo mecanismo que `.on-dark`, con el latón gobernando la superficie. Un componente adentro hereda el vocabulario invertido sin enterarse, así que las dos superficies profundas comparten cada placa, cada pastilla y cada botón sin una sola regla duplicada. -------------------------------------------------------------------------- */ .on-acento { --color-canvas: var(--color-surface-acento); --color-surface: var(--color-surface-acento-alt); --color-surface-sunk: #1c150a; --color-surface-inset: rgb(220 198 150 / 0.07); --color-text: var(--color-text-on-acento); --color-text-soft: var(--color-text-on-acento-soft); --color-text-faint: var(--color-text-on-acento-faint); --color-line: var(--color-line-acento); --color-line-strong: var(--color-line-acento-strong); --color-link: var(--acento-200); --color-link-hover: #ffffff; --color-brand: var(--marca-200); --color-brand-strong: var(--marca-100); --color-brand-soft: rgb(183 203 255 / 0.10); --color-accent: var(--acento-200); --color-accent-strong: #ffffff; --color-accent-soft: rgb(185 147 65 / 0.24); --color-obra: var(--obra-300); --color-obra-soft: rgb(229 114 0 / 0.20); --color-focus: var(--acento-200); --color-selection: rgb(159 123 45 / 0.55); --sh-raised: none; color: var(--color-text); } /* ----------------------------------------------------------------------------- Preferencias del usuario -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; --dur-5: 1ms; } }