/* ========================================================================== Lynch — Design tokens -------------------------------------------------------------------------- Todos los colores de marca están declarados aquí y en ningún otro archivo. PALETA LYNCH El símbolo de la marca es un anillo ocre con un visto azul petróleo, así que el ocre pasa de acento estructural a COLOR DE IDENTIDAD: aparece en el logotipo, en la marca de la cabecera y en el pie. Lo que NO cambió, y es deliberado: el azul petróleo sigue siendo el único color de acción. El ocre no puede ser color de botón — blanco sobre #b5801f da 3.4:1 y no alcanza el mínimo AA de 4.5:1 para texto. Un botón ocre obligaría a texto oscuro encima, que no se lee como acción. Así que el ocre identifica y el azul actúa: dos trabajos, dos colores. ========================================================================== */ /* --- Tipografía local (sin peticiones a terceros) ------------------------ */ @font-face { font-family: "Archivo"; src: url("../fonts/archivo-var-latin.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } :root { /* --- Color: base institucional (azul petróleo, no navy bancario) ------- */ --pp-ink: #0b2b38; /* titulares, fondos oscuros */ --pp-ink-2: #123c4d; /* superficie oscura secundaria */ --pp-brand: #14607e; /* color de acción principal */ --pp-brand-strong: #0e4a61; /* hover / activo */ --pp-brand-soft: #e3eef2; /* fondos teñidos suaves */ /* --- Color: ocre de identidad ---------------------------------------- El anillo del símbolo. También reglas, numeración y aclaraciones. Nunca fondo de botón: ver la nota de cabecera. -------------------- */ --pp-accent: #b5801f; /* anillo del símbolo, reglas, marcadores */ --pp-accent-light: #d9a447; /* el anillo sobre fondo oscuro */ --pp-accent-deep: #8a6114; /* descriptor de la marca sobre blanco (AA) */ --pp-accent-soft: #f7efdf; --pp-accent-ink: #6d4a0c; /* texto sobre --pp-accent-soft (AA) */ /* --- Color: señalización -------------------------------------------- */ --pp-ok: #1c6f52; --pp-ok-soft: #e6f2ed; --pp-warn: #a23a2a; --pp-warn-soft: #f8eae7; --pp-whatsapp: #25d366; --pp-whatsapp-strong: #128c4a; /* --- Color: neutros --------------------------------------------------- */ --pp-bg: #ffffff; --pp-bg-alt: #f1f5f6; /* banda alterna, gris azulado */ /* Fondo del hero: celeste plano, a sangre. Antes era #e4eff4, a pocos puntos del celeste del contacto: las dos bandas claras no se distinguían y parecían el mismo color mal reproducido. Ahora el hero es el celeste más saturado de la página y el contacto queda más pálido, así que se leen como dos decisiones distintas. */ --pp-bg-hero: #dbeeff; /* Fondo de la sección de contacto: el mismo celeste, más pálido que el del hero. Sostiene el fondo de pantallas y la tarjeta blanca opaca encima. */ --pp-bg-sky: #e8f2fb; --pp-bg-warm: #f7f5f1; /* banda cálida, uso puntual */ --pp-text: #17282f; --pp-muted: #566a72; /* 4.9:1 sobre blanco */ --pp-line: #dae3e6; --pp-line-strong: #b9c8cd; --pp-white: #ffffff; /* --- Tipografía ------------------------------------------------------- */ --pp-font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif; /* El logotipo Lynch está dibujado en Faustina. El sitio usa Source Serif 4, que se sirve en local: son dos serifs de contraste medio y a tamaño de texto la diferencia es imperceptible. Si se quiere unificar, hay que añadir el woff2 de Faustina a assets/fonts/ y cambiar solo esta línea. Ver PENDIENTES.md, punto 10b. */ --pp-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; /* Escala 1.25 con clamp: móvil → escritorio */ --pp-fs-3xl: clamp(2.25rem, 1.55rem + 3.1vw, 4rem); --pp-fs-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.65rem); --pp-fs-xl: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); --pp-fs-lg: clamp(1.15rem, 1.06rem + 0.4vw, 1.35rem); --pp-fs-md: 1.0625rem; --pp-fs-sm: 0.9375rem; --pp-fs-xs: 0.8125rem; --pp-lh-tight: 1.08; --pp-lh-head: 1.18; --pp-lh-body: 1.65; --pp-lh-serif: 1.7; /* --- Espaciado (escala 4px) ------------------------------------------ */ --pp-1: 0.25rem; --pp-2: 0.5rem; --pp-3: 0.75rem; --pp-4: 1rem; --pp-5: 1.5rem; --pp-6: 2rem; --pp-7: 2.75rem; --pp-8: 3.5rem; --pp-9: 5rem; --pp-10: 7rem; --pp-section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem); /* --- Contenedor y retícula ------------------------------------------- */ --pp-container: 1200px; --pp-gutter: clamp(1.15rem, 0.5rem + 2.6vw, 2.5rem); /* --- Formas ----------------------------------------------------------- */ --pp-r-sm: 3px; --pp-r-md: 6px; --pp-r-lg: 10px; /* --- Elevación (discreta, no la sombra genérica de tarjeta) ----------- */ --pp-shadow-panel: 0 1px 2px rgba(11, 43, 56, 0.06), 0 18px 40px -28px rgba(11, 43, 56, 0.45); --pp-shadow-raised: 0 2px 4px rgba(11, 43, 56, 0.08), 0 26px 55px -30px rgba(11, 43, 56, 0.5); /* --- Movimiento ------------------------------------------------------- */ --pp-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --pp-dur: 180ms; /* --- Foco ------------------------------------------------------------- */ --pp-focus: 0 0 0 3px var(--pp-white), 0 0 0 5.5px var(--pp-brand); --pp-header-h: 74px; } @media (max-width: 860px) { :root { --pp-header-h: 64px; /* Lectura móvil: cuerpo 18 px, apoyos 16 px y notas 14 px. */ --pp-fs-md: 1.125rem; --pp-fs-sm: 1rem; --pp-fs-xs: 0.875rem; } }