/* ════════════════════════════════════════ TIPOGRAFÍA — Codec Pro Instrucciones: 1. Descargá Codec Pro desde tu licencia 2. Colocá los archivos de fuente en /fonts/codec-pro/ 3. Agregá este CSS DESPUÉS de tokens.css y layout.css en el 4. Eliminá el de Google Fonts (DM Sans) del HTML ════════════════════════════════════════ */ /* ── @font-face declarations ───────────────────── */ @font-face { font-family: 'Codec Pro'; src: url('../fonts/codec-pro/CodecPro-Thin.woff2') format('woff2'), url('../fonts/codec-pro/CodecPro-Thin.woff') format('woff'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Codec Pro'; src: url('../fonts/codec-pro/CodecPro-ExtraLight.woff2') format('woff2'), url('../fonts/codec-pro/CodecPro-ExtraLight.woff') format('woff'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Codec Pro'; src: url('../fonts/codec-pro/CodecPro-Light.woff2') format('woff2'), url('../fonts/codec-pro/CodecPro-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Codec Pro'; src: url('../fonts/codec-pro/CodecPro-Regular.woff2') format('woff2'), url('../fonts/codec-pro/CodecPro-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Codec Pro'; src: url('../fonts/codec-pro/CodecPro-News.woff2') format('woff2'), url('../fonts/codec-pro/CodecPro-News.woff') format('woff'); font-weight: 450; font-style: normal; font-display: swap; } @font-face { font-family: 'Codec Pro'; src: url('../fonts/codec-pro/CodecPro-Medium.woff2') format('woff2'), url('../fonts/codec-pro/CodecPro-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Codec Pro'; src: url('../fonts/codec-pro/CodecPro-Bold.woff2') format('woff2'), url('../fonts/codec-pro/CodecPro-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Codec Pro'; src: url('../fonts/codec-pro/CodecPro-ExtraBold.woff2') format('woff2'), url('../fonts/codec-pro/CodecPro-ExtraBold.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Codec Pro'; src: url('../fonts/codec-pro/CodecPro-Heavy.woff2') format('woff2'), url('../fonts/codec-pro/CodecPro-Heavy.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } /* ── Italic variants (si tenés los archivos) ────── */ @font-face { font-family: 'Codec Pro'; src: url('../fonts/codec-pro/CodecPro-LightItalic.woff2') format('woff2'), url('../fonts/codec-pro/CodecPro-LightItalic.woff') format('woff'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Codec Pro'; src: url('../fonts/codec-pro/CodecPro-RegularItalic.woff2') format('woff2'), url('../fonts/codec-pro/CodecPro-RegularItalic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Codec Pro'; src: url('../fonts/codec-pro/CodecPro-BoldItalic.woff2') format('woff2'), url('../fonts/codec-pro/CodecPro-BoldItalic.woff') format('woff'); font-weight: 700; font-style: italic; font-display: swap; } /* ════════════════════════════════════════ OVERRIDE — reemplaza DM Sans en todo el sitio ════════════════════════════════════════ */ :root { --font-sans: 'Codec Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ── Ajustes de tracking por peso ─────────────── Codec Pro tiene proporciones distintas a DM Sans. Estos valores compensan las diferencias visuales. */ /* Titulares grandes — el tracking apretado funciona bien */ .hero__headline, .section__title, .page-hero__title, .about__title, .contact__title, .diff__statement, .svc-stack__name { letter-spacing: -0.035em; } /* Números grandes de métricas y process */ .svc-stack__num, .pv2__num, .metric__num, .stack__card-num { letter-spacing: -0.05em; font-weight: 800; /* Heavy de Codec Pro en lugar de 900 */ } /* Labels y textos en mayúscula — Codec Pro es más ancho */ .label { letter-spacing: 0.08em; /* reducido de 0.1em */ } /* Body text — Codec Pro regular es ligeramente más ancho */ body { letter-spacing: 0.005em; line-height: 1.65; } /* Navegación */ .nav__link, .nav__mobile-link { letter-spacing: 0.01em; } /* Botones */ .btn { letter-spacing: 0.02em; } /* Tags */ .tag { letter-spacing: 0.04em; /* Codec Pro necesita menos tracking en caps */ }