/* ========================================================================== variables.css · LA IDENTIDAD -------------------------------------------------------------------------- Todo lo que define a la marca vive aquí y solo aquí: colores, tipografías, escala tipográfica, espaciado, bordes y medidas. Para cambiar la identidad del sitio completo, se edita este archivo. style.css y animations.css solo leen estas variables; nunca escriben un color, una fuente o un tamaño directamente. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tipografías Para cambiar una fuente: reemplaza el archivo en assets/fonts/, ajusta la @font-face correspondiente y el nombre en --font-display o --font-body. -------------------------------------------------------------------------- */ @font-face { font-family: 'Quaaykop'; src: url('../assets/fonts/quaaykop-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Quaaykop'; src: url('../assets/fonts/quaaykop-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Quaaykop'; src: url('../assets/fonts/quaaykop-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url('../assets/fonts/dm-sans-300.woff2') format('woff2'); font-weight: 300; 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: 'DM Sans'; src: url('../assets/fonts/dm-sans-300-ext.woff2') format('woff2'); font-weight: 300; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'DM Sans'; src: url('../assets/fonts/dm-sans-400.woff2') format('woff2'); font-weight: 400; 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: 'DM Sans'; src: url('../assets/fonts/dm-sans-400-ext.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'DM Sans'; src: url('../assets/fonts/dm-sans-500.woff2') format('woff2'); font-weight: 500; 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: 'DM Sans'; src: url('../assets/fonts/dm-sans-500-ext.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; } :root { color-scheme: light; /* ------------------------------------------------------------------------ 2. Color de marca Distribución: 60 ivory / 15 olive / 10 charcoal / 10 chocolate / 5 terracota. Los valores rgb existen para las transparencias; si cambias un color, cambia también su versión rgb. ------------------------------------------------------------------------ */ --color-ivory: #F7F4EF; --color-olive: #4A4F38; --color-charcoal: #2B2B2B; --color-chocolate: #4B362A; --color-terracotta: #C46B48; /* acento: detalles, filetes, texto grande. 3.45:1 sobre ivory */ /* Derivados de la paleta */ --color-beige: #F0EBE3; /* variación muy sutil de ivory para secciones secundarias */ --color-taupe: #DED5C8; /* filetes, marcos, tinta clara sobre fondos oscuros */ --color-mocha: #7A5B46; /* etiquetas y textos secundarios. 5.61:1 sobre ivory */ --color-terracotta-deep: #A25236; /* terracota con contraste para texto chico y botones. 5.04:1 sobre ivory, 4.66:1 sobre beige */ --color-placeholder: #77644F; /* texto de ejemplo en formularios. 5.15:1 */ --color-line-strong: #B7A691; /* líneas de escritura en PDF e impresión: visibles en papel */ --rgb-ivory: 247, 244, 239; --rgb-olive: 74, 79, 56; --rgb-chocolate: 75, 54, 42; --rgb-taupe: 222, 213, 200; /* ------------------------------------------------------------------------ 3. Color por función Los componentes usan estos nombres, no los de arriba. Así se puede reasignar una función completa (por ejemplo, el color de los titulares) cambiando una sola línea. ------------------------------------------------------------------------ */ --color-bg: var(--color-ivory); --color-bg-soft: var(--color-beige); --color-bg-dark: var(--color-chocolate); --color-bg-accent: var(--color-olive); --color-text: var(--color-charcoal); --color-heading: var(--color-chocolate); --color-muted: var(--color-mocha); --color-line: var(--color-taupe); --color-accent: var(--color-terracotta); --color-accent-text: var(--color-terracotta-deep); --color-cta: var(--color-olive); --color-cta-text: var(--color-ivory); --color-cta-hover: var(--color-terracotta-deep); --color-on-dark: var(--color-ivory); --color-on-dark-muted: var(--color-taupe); --color-line-on-dark: rgba(var(--rgb-taupe), .28); --color-image-frame: var(--color-taupe); /* ------------------------------------------------------------------------ 4. Familias y pesos Quaaykop = voz: marca, H1, titulares editoriales, citas, frases centrales. DM Sans = información: cuerpo, navegación, botones, formularios, datos. ------------------------------------------------------------------------ */ --font-display: 'Quaaykop', 'Iowan Old Style', Georgia, serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; /* ------------------------------------------------------------------------ 5. Escala tipográfica Fluida: cada tamaño crece con el ancho de la pantalla entre un mínimo y un máximo. Para cambiar el tamaño de todos los H1, se edita --text-3xl. ------------------------------------------------------------------------ */ --text-xs: 0.72rem; /* etiquetas en mayúsculas */ --text-sm: 0.875rem; /* notas, pie, datos prácticos */ --text-base: clamp(1rem, 1.05vw, 1.1rem); /* cuerpo */ --text-md: clamp(1.12rem, 1.5vw, 1.38rem); /* entradillas */ --text-lg: clamp(1.4rem, 2.2vw, 1.95rem); /* títulos de tarjetas y listas */ --text-xl: clamp(1.7rem, 3.2vw, 2.8rem); /* citas y frases centrales */ --text-2xl: clamp(2rem, 4vw, 3.4rem); /* títulos de sección */ --text-3xl: clamp(2.5rem, 5.8vw, 5.2rem); /* H1 */ --text-display: clamp(3rem, 8vw, 7.4rem); /* H1 de portada */ --leading-tight: 1.02; --leading-snug: 1.18; --leading-normal: 1.6; --leading-relaxed: 1.8; --tracking-display: -0.022em; --tracking-heading: -0.015em; --tracking-body: 0.003em; --tracking-label: 0.2em; --measure: 64ch; /* ancho máximo de un párrafo */ --measure-narrow: 46ch; /* ------------------------------------------------------------------------ 6. Espaciado El ritmo del sitio entero. Las secciones usan --space-2xl y --space-3xl; los componentes, los tamaños menores. ------------------------------------------------------------------------ */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: clamp(2rem, 3.5vw, 3rem); --space-xl: clamp(3rem, 6vw, 5.5rem); --space-2xl: clamp(5.5rem, 11vw, 10rem); --space-3xl: clamp(7.5rem, 17vw, 16rem); /* ------------------------------------------------------------------------ 7. Maquetación ------------------------------------------------------------------------ */ --max-width: 1560px; --gutter: clamp(1.25rem, 6.5vw, 7.5rem); --column-gap: clamp(1rem, 2.6vw, 3rem); --header-height: 4.5rem; /* ------------------------------------------------------------------------ 8. Bordes y formas ------------------------------------------------------------------------ */ --border: 1px solid var(--color-line); --border-dark: 1px solid var(--color-line-on-dark); --radius: 0; /* esquinas rectas: sin tarjetas redondeadas */ --radius-arch: 999px; /* el arco del retrato, recurso de marca */ /* ------------------------------------------------------------------------ 9. Textura Grano fino para los marcos de imagen mientras cargan. ------------------------------------------------------------------------ */ --texture-grain: url("data:image/svg+xml;utf8,"); }