/* ============================================================================= PAC — TOKENS DE DISEÑO ----------------------------------------------------------------------------- Todo el color, tipografía y espaciado del sitio sale de este archivo. Si quieres cambiar algo en TODO el sitio de un jalón, cámbialo aquí. No pongas colores "a mano" en styles.css — usa estas variables. ============================================================================= */ /* ----------------------------------------------------------------------------- FUENTE — Barlow, servida desde el propio sitio ----------------------------------------------------------------------------- Los archivos viven en assets/fonts/. NO se piden a Google: así el sitio carga igual de rápido sin depender de un tercero, y no se manda la IP de cada visitante a otro servidor. Es una grotesca ligeramente redondeada, inspirada en señalética carretera. Casa con el wordmark del logo y aterriza el mundo del transporte. Solo está el subconjunto "latin", que cubre todo el español (acentos, ñ, ¿, ¡). Son 4 archivos, ~89 KB en total. font-display:swap = el texto se ve de inmediato con la fuente del sistema y cambia a Barlow al terminar de cargar. Nunca hay texto invisible. ----------------------------------------------------------------------------- */ @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-400.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-600.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-700.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/barlow-800.woff2') format('woff2'); } :root { /* --------------------------------------------------------------------------- 1. COLORES DE MARCA — medidos sobre el logo oficial No están puestos a ojo: salen de muestrear originales/logo-pac.png por dentro de cada zona (ignorando los bordes, que están mezclados con el fondo). El verde coincide en la hoja y en la onda, así que es un solo color de marca y no dos. Ojo con una cosa: el archivo del cliente es un PNG con algo de ruido de compresión y el fondo no es blanco puro, sino un blanco roto. Los valores pueden estar corridos un 1-2 %. Si algún día llega el vectorial original, vale la pena volver a medir. --------------------------------------------------------------------------- */ --pac-verde-logo: #A7C776; /* hoja + onda del logo. Rellenos y acentos. */ --pac-gris-logo: #7D7E79; /* gris del wordmark "PAC" */ /* --------------------------------------------------------------------------- 2. ESCALA DE VERDE — mismo tono de la hoja (hue 86°), distintas luminosidades IMPORTANTE: el verde del logo (--verde-300) es demasiado claro para poner texto blanco encima — da 1.9:1 de contraste y es ilegible. Por eso existe la escala: el logo usa el 300, los botones usan el 700. El 300 sí sirve como texto sobre fondo oscuro (8.3:1 sobre --gris-900). --------------------------------------------------------------------------- */ --verde-50: #F4F8EC; /* fondo muy suave */ --verde-100: #E7F1D8; /* fondo de tarjetas / badges */ --verde-200: #CFE3B2; /* bordes suaves */ --verde-300: #A7C776; /* = el verde del logo. Íconos, hoja, onda. */ --verde-600: #5A8722; /* 4.3:1 — solo texto grande o íconos */ --verde-700: #46681A; /* 6.4:1 — ✅ botones y texto verde sobre blanco */ --verde-900: #2C4110; /* hover de botones, fondos oscuros */ /* --------------------------------------------------------------------------- 3. ESCALA DE GRIS CÁLIDO — derivada del gris del wordmark Es gris cálido, no neutro. Eso mantiene el sitio cerca del logo y evita que se sienta frío/corporativo genérico. El gris exacto del logo (#7D7E79) solo llega a 4.1:1 sobre blanco, o sea que no alcanza para texto normal. Por eso el texto usa el 600, que es el mismo tono un par de pasos más oscuro. El logo sí se dibuja con el suyo. --------------------------------------------------------------------------- */ --gris-50: #F8F7F4; --gris-100: #F0EFEA; --gris-200: #DFDDD6; --gris-300: #C6C4BB; --gris-500: #8E8C84; --gris-600: #63625D; /* 6.1:1 — texto secundario */ --gris-800: #3A3936; /* 11.5:1 — texto principal */ --gris-900: #24231F; /* footer, fondos oscuros */ --blanco: #FFFFFF; /* WhatsApp: solo para el botón flotante, por reconocimiento inmediato. No usar en ningún otro lado — pelea con la paleta. */ --whatsapp: #25D366; --whatsapp-oscuro: #1DA851; /* DATO PENDIENTE — ámbar, a propósito fuera de la paleta. Sirve para que ningún placeholder se publique por accidente: si ves ámbar en la página, es que falta un dato. Cuando ya no queden pendientes, puedes borrar estas 3 variables y la clase .pendiente de styles.css. */ --pendiente-fondo: #FDF7E6; --pendiente-borde: #D9B449; --pendiente-texto: #7A5F17; /* --------------------------------------------------------------------------- 4. ROLES SEMÁNTICOS Usa SIEMPRE estos en styles.css, no los de arriba. Así, si algún día cambia la marca, solo tocas esta sección. --------------------------------------------------------------------------- */ --color-texto: #26342B; --color-texto-suave: var(--gris-600); --color-texto-tenue: var(--gris-600); --color-fondo: var(--blanco); --color-fondo-alt: #F3F4EE; --color-fondo-verde: var(--verde-50); --color-fondo-oscuro: #202C25; --color-borde: var(--gris-200); --color-borde-fuerte: var(--gris-300); --color-acento: var(--verde-300); /* la hoja, la onda, los íconos */ --color-accion: var(--verde-700); /* botones */ --color-accion-hover: var(--verde-900); --color-papel: #F8F9F4; --color-menta: #E8EDDF; --color-linea-verde: #CDD5C4; --color-sobre-oscuro: #F2F4EB; --color-suave-oscuro: #B9C3B4; --color-linea-oscura: #435047; --color-reticula: rgba(167, 199, 118, 0.08); --color-cristal: rgba(255, 255, 255, 0.96); --color-sombra: rgba(25, 40, 29, 0.12); /* --------------------------------------------------------------------------- 5. TIPOGRAFÍA Barlow es la fuente de la marca. Lo que va después son los respaldos que usa el navegador mientras Barlow termina de cargar. --------------------------------------------------------------------------- */ --fuente: "Barlow", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; /* Escala fluida: crece sola entre móvil y escritorio, sin media queries. */ --texto-xs: 0.75rem; /* 12px — etiquetas */ --texto-sm: 0.875rem; /* 14px */ --texto-base: 1rem; /* 16px — cuerpo */ --texto-lg: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem); --texto-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); --texto-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2rem); --texto-3xl: clamp(2.2rem, 1.55rem + 2.3vw, 3.5rem); --texto-4xl: clamp(3rem, 1.45rem + 4.6vw, 5.4rem); --peso-normal: 400; --peso-medio: 600; --peso-bold: 700; --peso-black: 800; --interlinea-apretada: 1.1; --interlinea-titulo: 1.18; --interlinea-cuerpo: 1.65; /* --------------------------------------------------------------------------- 6. ESPACIADO — escala de 4px --------------------------------------------------------------------------- */ --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem; --esp-5: 1.5rem; --esp-6: 2rem; --esp-7: 2.5rem; --esp-8: 3rem; --esp-9: 4rem; --esp-10: 5rem; /* Aire vertical de cada sección: menos en móvil, más en escritorio */ --esp-seccion: clamp(4rem, 2rem + 6vw, 7rem); /* --------------------------------------------------------------------------- 7. LAYOUT --------------------------------------------------------------------------- */ --ancho-max: 1320px; /* incluye el padding lateral */ --ancho-texto: 62ch; /* ancho máximo de un párrafo, para legibilidad */ --padding-lateral: clamp(1.25rem, 4vw, 2.5rem); --alto-header: 88px; /* --------------------------------------------------------------------------- 8. BORDES, SOMBRAS Y TRANSICIONES Sombras muy sutiles y cálidas (tienen tinte del gris del logo, no negro puro). --------------------------------------------------------------------------- */ --radio-sm: 4px; --radio-md: 6px; --radio-lg: 10px; --radio-full: 999px; --sombra-sm: 0 1px 2px rgba(36, 35, 31, 0.05); --sombra-md: 0 2px 4px rgba(36, 35, 31, 0.04), 0 6px 16px rgba(36, 35, 31, 0.06); --sombra-lg: 0 4px 8px rgba(36, 35, 31, 0.05), 0 16px 36px rgba(36, 35, 31, 0.09); --transicion: 160ms ease; } /* Respeta a quien tiene reducidas las animaciones en su sistema. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }