/* ========================================================================== TOKENS Todas las decisiones de color, tipografía y espaciado viven acá. Ningún componente debería escribir un color a mano. ========================================================================== */ /* -------------------------------------------------------------------------- FUENTES UNA SOLA FAMILIA: Larken, en títulos y en cuerpo. Es lo que hace el sitio de Wix. Se midió: los 60 elementos de texto de la portada vieja usan orig_larken_regular, encabezados y párrafos por igual, y no hay ninguna sans en el diseño. Ver docs/relevamiento-visual.md §1. Hasta el 5 de septiembre de 2026 el sitio usaba Inter para el cuerpo y Fraunces como sustituto de Larken en los títulos, porque no había licencia web. Al resolverse, las dos salieron: Larken las reemplaza en todo, y el peso de fuentes bajó de 253,9 KB en cuatro archivos a 17,2 KB en uno. EL ARCHIVO se genera con scripts/generar-fuentes.py a partir del .otf con licencia, que NO está en el repo. Ver src/assets/fuentes/larken/LEEME.md, que además documenta el estado de la licencia. Self-hosteada a propósito: cargarla desde un CDN de terceros transferiría la IP de cada visitante y obligaría a sumar una fila a la tabla de encargados del tratamiento de la Política de Privacidad §8. SÓLO HAY REGULAR. No existe Bold ni Italic con licencia, así que el navegador sintetiza los dos. Ver la nota de los pesos más abajo. -------------------------------------------------------------------------- */ @font-face { font-family: "Larken"; src: url("../fuentes/larken/larken-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ======================================================================== COLOR Ningún valor de acá es inventado. Vienen de dos fuentes, y están separados a propósito para no confundirlas. ======================================================================== */ /* --- 1. PALETA OFICIAL DE MARCA ----------------------------------------- Fuente: LOGO/Logo_Presentation_Assets/Color_Palette.pdf — el manual que vino con el logo. Son cinco colores y estos son sus valores exactos. */ --marca-gris-calido: #787269; --marca-crema: #e9e7e1; --marca-arena: #c0b2a0; --marca-carbon: #4c4843; --marca-blanco: #ffffff; /* --- 2. LO QUE EL SITIO EN WIX AGREGÓ POR ENCIMA ------------------------- Extraído del sitio en vivo: variables de tema --color_* y computed styles. No están en el manual de marca: son valores por defecto del tema de Wix que se fueron incorporando con el uso. ⚠ El oscuro del sitio es #333333, pero el oscuro DE MARCA es #4C4843. El sitio derivó del manual en algún momento. Se conserva #333333 porque la instrucción es "los colores van tal cual el sitio viejo"; cambiarlo a #4C4843 sería una decisión de marca, no un arreglo, y ambos pasan AAA con blanco (12.63:1 y 9.07:1). Queda anotado por si en algún momento se quiere volver al manual. */ --wix-oscuro: #333333; /* --color_37/46/50/60 */ --wix-gris-medio: #666666; /* --color_58 */ --wix-gris-claro: #f2f2f2; /* --color_12 */ --wix-linea: #c4c4c4; /* --color_13/54/55/65 */ /* --- 3. LOS TOKENS QUE USA EL SITIO -------------------------------------- */ --tinta: var(--wix-oscuro); /* texto, header, footer */ --tinta-suave: var(--wix-gris-medio); /* texto secundario */ --papel: var(--marca-blanco); --papel-tibio: var(--marca-crema); /* alternancia de secciones */ --gris: var(--wix-gris-claro); /* superficie neutra */ --linea: var(--wix-linea); /* bordes */ --arena: var(--marca-arena); /* acento de marca, sin tocar */ /* --- 4. LA ÚNICA EXCEPCIÓN ---------------------------------------------- --arena-texto: #76634C Es el único color de esta hoja que NO sale ni del manual de marca ni del sitio viejo. Existe por un motivo puntual y su uso está limitado a ese caso. No es un segundo color de marca. EL PROBLEMA El acento #C0B2A0 como TEXTO sobre fondo claro es ilegible según WCAG: #C0B2A0 sobre #FFFFFF 2.08:1 #C0B2A0 sobre #F2F2F2 1.85:1 #C0B2A0 sobre #E9E7E1 1.68:1 El mínimo AA es 4.5:1 para texto normal y 3:1 para texto grande. Los tres fallan incluso el umbral de texto grande. En el sitio viejo esto se ve en los H2 de sección: arena a 40px sobre blanco, 2.08:1. DÓNDE SE APLICA LA EXCEPCIÓN — y sólo ahí Texto chico de acento sobre fondo claro. Hoy: los kickers de sección (13px), el rol en las fichas del equipo (13px), el hover de enlaces y el anillo de foco. Todos son texto chico sobre claro. #76634C sobre #FFFFFF 5.74:1 AA #76634C sobre #F2F2F2 5.13:1 AA #76634C sobre #E9E7E1 4.64:1 AA El crema de marca es el fondo más exigente de los tres: es el que fija el valor. Con #7E6B54 daba 4.12:1 sobre crema y no llegaba. DÓNDE NO SE APLICA Rellenos, fondos, bordes y texto sobre oscuro siguen usando --arena tal cual, sin tocar. Sobre el oscuro del sitio el acento de marca da 6.09:1 y no necesita ninguna corrección. Es decir: el color de marca se ve puro en todas las superficies donde es legible, y sólo se oscurece donde la alternativa era no cumplir AA. */ --arena-texto: #76634c; /* Tinte de --arena para bordes y fondos sutiles. Derivado, decorativo, nunca texto. */ --arena-tenue: #ded5c9; /* --- 5. AVISOS DE ANDAMIAJE --------------------------------------------- No son colores de marca ni aparecen en el sitio publicado: sirven para que un bloque a medio configurar sea imposible de pasar por alto. */ --foco: #76634c; --alerta-fondo: #fdf2f2; --alerta-borde: #c2410c; --alerta-texto: #7c2d12; /* Roles semánticos: los componentes usan estos, no los de arriba. */ --fondo-pagina: var(--papel); --fondo-seccion: var(--papel-tibio); --fondo-oscuro: var(--tinta); --texto: var(--tinta); --texto-secundario: var(--tinta-suave); --texto-sobre-oscuro: var(--papel); --texto-acento: var(--arena-texto); --borde: var(--linea); --borde-suave: var(--arena-tenue); /* ------------------------------------------------------------------------ TIPOGRAFÍA ------------------------------------------------------------------------ */ /* La misma familia en los dos, como el sitio viejo. El respaldo son las serif del sistema: si Larken no carga, el texto sigue siendo serif y no salta de estilo a mitad de carga. */ --fuente-titulo: "Larken", Georgia, "Times New Roman", serif; --fuente-cuerpo: "Larken", Georgia, "Times New Roman", serif; /* Escala fluida. El sitio viejo usa 70/60/40/34/30/24/18. */ --tam-display: clamp(2.75rem, 1.6rem + 4.6vw, 4.375rem); /* 44 → 70 */ --tam-h1: clamp(2.125rem, 1.35rem + 3.1vw, 3.25rem); /* 34 → 52 */ --tam-h2: clamp(1.625rem, 1.2rem + 2.2vw, 2.5rem); /* 26 → 40, como el viejo */ --tam-h3: clamp(1.25rem, 1.08rem + 0.7vw, 1.5rem); /* 20 → 24 */ --tam-base: 1.0625rem; /* 17 */ --tam-cuerpo: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); /* 17 → 18 */ --tam-chico: 0.9375rem; /* 15 */ --tam-micro: 0.8125rem; /* 13 */ --interlinea-titulo: 1.15; --interlinea-cuerpo: 1.6; /* el del sitio viejo: 18px sobre 28.8px */ --tracking-titulo: -0.01em; --tracking-etiqueta: 0.14em; /* ------------------------------------------------------------------------ ESPACIADO · escala de 4px ------------------------------------------------------------------------ */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; --e-10: 8rem; --ritmo-seccion: clamp(3.5rem, 2rem + 6vw, 7rem); /* ------------------------------------------------------------------------ MEDIDAS ------------------------------------------------------------------------ */ --ancho-maximo: 72rem; /* contenedor general */ --ancho-lectura: 42rem; /* prosa: ~70 caracteres */ --ancho-angosto: 34rem; --radio: 2px; /* la marca es angulosa, casi sin redondeo */ --radio-grande: 4px; --borde-fino: 1px solid var(--borde); --borde-acento: 1px solid var(--borde-suave); --sombra-suave: 0 1px 2px rgba(51, 51, 51, 0.04), 0 4px 16px rgba(51, 51, 51, 0.06); --transicion: 160ms ease; } /* Sin modo oscuro: la marca es clara y el brief no lo pide. Para agregarlo, redefinir los roles semánticos de arriba dentro de @media (prefers-color-scheme: dark) — los componentes no habría que tocarlos. */