/* ============================================================================= TOKENS · Sistema de diseño "La Cinta" ----------------------------------------------------------------------------- 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 dentro del propio .astro, siempre derivadas de (2). --------------------------------------------------------------------------- EL MUNDO Los 528,04 km del corredor son UNA cinta continua que cruza todas las páginas a la misma altura. El sitio no es un folleto con secciones: es una sola línea leída de seis maneras distintas. De ahí sale la paleta. La cinta es la ruta de noche — un campo profundo, derivado del azul institucional llevado a baja luminosidad, no un negro neutro. El documento alrededor es papel frío de día: tarifas, normativa y trámites se leen con luz. La escena física decide: alguien varado en la banquina de la RN 33 a las 23:40 con el brillo al 40 %, y un despachante de cargas con la pestaña abierta todo el día en Rosario. Las dos cosas, cada una en su superficie. COLOR — estrategia "Comprometida": un solo color saturado gobierna del 30 al 60 % de la superficie. El azul institucional no es un acento: es el campo. IDENTIDAD CROMÁTICA PROVISORIA. El requerimiento (punto 2) pide expresamente NO cerrar ahora una identidad cromática rígida: la paleta tiene que poder adaptarse cuando Arco Portuario entregue su marca y su manual. Por eso el azul #00549E que gobierna hoy la superficie es un azul institucional de trabajo y no un compromiso de marca. Toda la identidad cromática del sitio sale de la rampa `--azul-*` y del acento `--obra-*` que están acá abajo: cambiar esas dos rampas cambia el sitio entero sin tocar un solo componente. Después de cambiarlas hay que correr `npm run contraste`, que verifica los pares contra el mínimo de 4,5:1 del Art. 61.7 del PETG. DOS COLORES DE MARCA: AZUL Y VERDE. El azul institucional gobierna la superficie y el verde es el acento. Es un verde frío, emparentado con el azul por el lado del cian, así que los dos se leen como una familia y no como dos decisiones separadas. Sobre el campo profundo el par funciona especialmente bien: el verde es lo único que se enciende sobre el azul de noche. REPARTO DE SUPERFICIE. El azul gobierna lo profundo —cabecera, portada, pie, cinta, tablas, botón primario y enlaces— y el verde gobierna lo intermedio: el papel de las secciones hundidas, que es la banda que alterna en TODAS las páginas, el campo profundo del cierre de la portada y todo el estado de interacción (hover, foco, subrayado activo, íconos de acceso). Contado sobre pantalla el azul sigue ocupando más, pero el verde deja de ser una gota en el subrayado y pasa a ser el segundo campo del sistema, que es lo que significa ser el segundo color de marca. El naranja de obra vial sigue en la paleta pero deja de ser el acento: queda reservado a obra, señalización transitoria y aviso de borrador, que es lo que significa en una ruta. Ámbar, rojo y verde de señal salen del semáforo de la señalización vial argentina, no de una paleta de interfaz, y el verde de señal —más apagado y más frío que el de marca— no se confunde con éste. Cuando llegue la identidad definitiva de Arco Portuario sólo se tocan las primitivas de color y las familias tipográficas de este archivo, y el archivo de marca de `public/brand/`. Nada más del sitio las conoce. ========================================================================== */ :root { /* ===================================================================== 1. PRIMITIVAS · COLOR ===================================================================== */ /* --- Azul institucional provisorio. La rampa se construye alrededor de #00549E, que ocupa la posición 600. Los extremos bajan croma cerca del blanco y del negro en lugar de sostenerlo por simetría. Se reemplaza por el azul de Arco Portuario cuando llegue el manual. --- */ --azul-25: #f2f7fc; --azul-50: #e6effa; --azul-100: #cbdff4; --azul-200: #9cc1e8; --azul-300: #649fd8; --azul-400: #2f7cc4; --azul-500: #0f63ad; --azul-600: #00549e; /* ◄ AZUL INSTITUCIONAL · provisorio */ --azul-700: #01447f; --azul-800: #043563; --azul-900: #062647; --azul-950: #041b33; /* ◄ el campo de la cinta: la ruta de noche */ --azul-990: #020f1e; /* --- Neutros. Fríos y con una gota de azul: el papel del documento pertenece al mismo mundo que la cinta, no a una escala gris genérica. --- */ --n-0: #ffffff; --n-25: #fafbfd; --n-50: #f3f5f9; --n-100: #e8ecf2; --n-200: #dae0e9; --n-300: #bdc6d4; --n-400: #8e9aac; /* n-500 alimenta el texto tenue. Está oscurecido respecto del gris "natural" de la escala para llegar a 4,5:1 también sobre las superficies hundidas, que es lo que exige el Art. 61.7 del pliego. */ --n-500: #5f6b7c; --n-600: #4d5867; --n-700: #3a4351; --n-800: #262e39; --n-900: #151b23; --n-950: #0b0f14; /* --- Verde institucional. El SEGUNDO color de marca, no un acento suelto. Es un verde levemente frío, emparentado con el azul por el lado del cian: puesto al lado del #00549E se leen como dos miembros de la misma familia y no como dos decisiones distintas. Toma el rol de acento del sistema. El 600 es el que hace de texto sobre papel y por eso está oscurecido: a valores más luminosos no llegaba a 4,5:1 y el Art. 61.7 no lo perdona. --- */ /* El 25 es el papel verde de `--color-surface-sunk`, la banda que alterna en todas las páginas: está un escalón por debajo del blanco roto para que se lea como una superficie y no como un lavado, y todavía deja al texto tenue en 4,8:1, por encima del mínimo del Art. 61.7. */ --verde-25: #e8f5ef; --verde-50: #ddf3e8; --verde-100: #b7e6d1; --verde-200: #83d2b0; --verde-300: #4dba8c; /* ◄ acento sobre campo profundo */ --verde-400: #16a06d; --verde-500: #0a8a5c; /* ◄ VERDE INSTITUCIONAL · el acento del sistema */ --verde-600: #0b7350; --verde-700: #0a5d41; --verde-800: #084a34; --verde-900: #063527; --verde-950: #04251b; /* --- 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, y el de titular cambió en septiembre de 2026. Overpass — TITULAR. Derivada de la Highway Gothic, la tipografía con la que está escrita la señalización vial. Es la letra del rubro: el visitante la viene leyendo desde el último cartel de ruta. Reemplazó a la Chivo, que era una grotesca de marca correcta pero sin relación con el objeto del sitio. Chivo Mono — el registro técnico: kilómetro, progresiva, coordenada, número de gestión, tarifa. Cifras tabulares. SE QUEDA: es el corte monoespaciado del sistema y no es letra de titular. Asap — humanista de pantalla, para leer párrafo largo sin fatiga. LAS TRES SON DE FUENTE ABIERTA y se sirven del mismo `link` de la fundición, así que el cambio no agrega una petición: reemplaza una familia por otra. POR QUÉ NO SE TOCÓ EL CUERPO. Overpass tiene la caja alta ancha y abierta que la hace legible a 120 km/h en un cartel, y esa misma apertura cansa en un párrafo de cuarenta líneas. Titular y texto hacen trabajos distintos. ===================================================================== */ --font-display: 'Overpass', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Asap', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'Chivo Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; /* 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; --tk-tight: -0.035em; /* piso -0,04em; no se pasa de acá */ --tk-snug: -0.018em; --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(4 27 51 / 0.07), 0 2px 8px rgb(4 27 51 / 0.06); --sh-overlay: 0 10px 24px -8px rgb(4 27 51 / 0.22), 0 24px 56px -16px rgb(4 27 51 / 0.20); --sh-sticky: 0 1px 0 rgb(4 27 51 / 0.08), 0 8px 22px -14px rgb(4 27 51 / 0.34); --sh-widget: 0 12px 28px -10px rgb(4 27 51 / 0.42), 0 32px 72px -24px rgb(4 27 51 / 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 de marca: llevarla del gris frío al papel verde pone el segundo color de marca en cada página sin tocar un solo componente. Es papel teñido, no un fondo de color: sigue siendo una superficie de lectura y el cuerpo llega a 16:1 encima. */ /* REPARTO INVERTIDO EN SEPTIEMBRE DE 2026, con la remaquetación sobre la referencia de CorreSur. Antes el documento era blanco roto y la banda que alternaba era papel verde. Ahora el documento es papel gris frío —plano, sin brillo, el fondo de un formulario— y la banda que alterna es BLANCA. El cambio es de temperatura, no de paleta: el sitio pasa de leerse como una publicación a leerse como un documento oficial, que es lo que es y lo que el usuario de autopista espera encontrar. El verde no se fue del sistema: sigue gobernando el acento, el estado de interacción y la marquesina. `surface-inset` sube un escalón en lugar de bajarlo: era `n-100`, que ahora ES el papel, así que sobre papel gris el hueco se marca aclarando, no oscureciendo. Bajarlo a `n-200` dejaba el texto tenue en 4,08:1 y el Art. 61.7 pide 4,5. */ --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(--azul-950); --color-surface-inverse-alt: var(--azul-900); /* El campo profundo verde. Es al verde lo que `--azul-950` es al azul: la misma decisión de "un color saturado gobierna la superficie", tomada una segunda vez para el otro color de marca. Lo usa `.on-verde`. */ --color-surface-verde: var(--verde-950); --color-surface-verde-alt: var(--verde-900); --color-text-on-verde: #e9f5ee; --color-text-on-verde-soft: #a7cfbc; --color-text-on-verde-faint: #93b6a5; --color-line-verde: rgb(131 210 176 / 0.20); --color-line-verde-strong: rgb(131 210 176 / 0.40); /* Texto */ --color-text: var(--n-900); --color-text-soft: var(--n-600); --color-text-faint: var(--n-500); --color-text-on-inverse: #e8f0f8; --color-text-on-inverse-soft: #9db6cd; --color-text-on-accent: #ffffff; /* Líneas */ --color-line: var(--n-200); --color-line-strong: var(--n-300); --color-line-inverse: rgb(156 193 232 / 0.20); --color-line-inverse-strong: rgb(156 193 232 / 0.38); /* Marca */ --color-brand: var(--azul-600); --color-brand-strong: var(--azul-700); --color-brand-deep: var(--azul-950); --color-brand-soft: var(--azul-50); --color-brand-on-dark: var(--azul-200); --color-accent: var(--verde-600); --color-accent-strong: var(--verde-700); --color-accent-soft: var(--verde-50); --color-accent-on-dark: var(--verde-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(--azul-700); --color-link-hover: var(--verde-700); --color-focus: var(--verde-500); --color-selection: var(--azul-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 la superficie de la cinta, elegida 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(--azul-950); --color-surface: var(--azul-900); --color-surface-sunk: var(--azul-990); --color-surface-inset: rgb(156 193 232 / 0.07); --color-text: var(--color-text-on-inverse); --color-text-soft: var(--color-text-on-inverse-soft); --color-text-faint: #8098b0; --color-line: var(--color-line-inverse); --color-line-strong: var(--color-line-inverse-strong); --color-link: var(--azul-200); --color-link-hover: var(--verde-300); --color-brand: var(--azul-200); --color-brand-strong: var(--azul-100); --color-brand-soft: rgb(156 193 232 / 0.09); --color-accent: var(--verde-300); --color-accent-strong: var(--verde-200); --color-accent-soft: rgb(22 160 109 / 0.22); --color-obra: var(--obra-300); --color-obra-soft: rgb(229 114 0 / 0.20); --color-focus: var(--verde-300); --color-selection: rgb(0 84 158 / 0.55); --sh-raised: none; color: var(--color-text); } /* ----------------------------------------------------------------------------- Contexto verde profundo. El mismo mecanismo que `.on-dark`, con el otro color de marca gobernando la superficie. No es una variante decorativa: es el campo donde el sitio habla de lo que resuelve —los canales de atención, la gestión que abre cada uno— frente al campo azul, donde habla del corredor. Un componente adentro hereda el vocabulario invertido sin enterarse, igual que en `.on-dark`, así que las dos superficies profundas comparten cada placa, cada pastilla y cada botón sin una sola regla duplicada. -------------------------------------------------------------------------- */ .on-verde { --color-canvas: var(--color-surface-verde); --color-surface: var(--color-surface-verde-alt); --color-surface-sunk: #021710; --color-surface-inset: rgb(131 210 176 / 0.07); --color-text: var(--color-text-on-verde); --color-text-soft: var(--color-text-on-verde-soft); --color-text-faint: var(--color-text-on-verde-faint); --color-line: var(--color-line-verde); --color-line-strong: var(--color-line-verde-strong); --color-link: var(--verde-200); --color-link-hover: #ffffff; --color-brand: var(--azul-200); --color-brand-strong: var(--azul-100); --color-brand-soft: rgb(156 193 232 / 0.10); --color-accent: var(--verde-200); --color-accent-strong: #ffffff; --color-accent-soft: rgb(22 160 109 / 0.24); --color-obra: var(--obra-300); --color-obra-soft: rgb(229 114 0 / 0.20); --color-focus: var(--verde-200); --color-selection: rgb(10 138 92 / 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; } }