/* ============================================================ CLOETESKRAAL — tokens de marca ------------------------------------------------------------ ✅ DERIVADOS DEL LOGO OFICIAL (7 ago 2026). Ya no son una propuesta: los hex salieron de contar los píxeles del logo que entregó el cliente (`scripts/logo.py` los reporta). Lema oficial de la marca: "DESDE EL CAMPO". REGLA CENTRAL DE ESTA PALETA: los colores claros de la marca (lima, arena, ámbar) NO sirven para texto ni como fondo con texto blanco — ninguno pasa de 2.7:1. Son colores de SUPERFICIE Y ACENTO GRÁFICO. Para texto existe una variante oscurecida del mismo tono, marcada abajo. Confundirlas es el error que ya costó una revisión completa en Coprinci. Contrastes CALCULADOS (WCAG 2.1), no estimados. Correcciones futuras van en styles.css — este archivo refleja el logo y no se toca. ============================================================ */ :root { /* --- Corporativos: EXACTOS DEL LOGO ----------------------- */ --campo: #084838; /* RGB 8,72,56 — verde profundo del aro y el wordmark. Superficies oscuras, hero, footer, texto */ --lima: #80B050; /* RGB 128,176,80 — verde de "DESDE EL CAMPO" y de los surcos. ⚠️ SOLO acento gráfico: 2.55 con blanco */ --lima-vivo:#D0E850; /* RGB 208,232,80 — lima brillante de los surcos del emblema. ⚠️ SOLO sobre fondo oscuro */ --espiga: #E8B860; /* RGB 232,184,96 — ámbar del sol. ⚠️ SOLO con texto oscuro */ --arena: #C09858; /* RGB 192,152,88 — café claro de los cerros. ⚠️ Decorativo */ --crema: #F8F8F0; /* RGB 248,248,240— blanco hueso del sol. Fondo dominante */ /* --- Variantes ACCESIBLES (mismo tono, oscurecido) -------- Existen porque los de arriba no pasan AA. Usar SIEMPRE éstas cuando el color vaya como texto o como fondo con texto blanco. */ --siembra: #3B7A2E; /* CTA primario con texto blanco — 5.24 ✓ */ --arena-texto: #8A6A2E; /* la ÚNICA versión del arena válida como texto — 4.71 ✓ */ /* --- Neutros --------------------------------------------- */ --surco: #0A2A20; /* texto principal, derivado del campo */ --piedra: #5C6B5E; /* texto secundario */ --linea: #E2E0D4; /* bordes y separadores sobre crema */ --blanco: #FFFFFF; /* --- CONTRASTES VERIFICADOS ------------------------------ blanco sobre --campo ............... 10.53 ✓ AA blanco sobre --siembra .............. 5.24 ✓ AA --surco sobre --crema .............. 14.42 ✓ AA --piedra sobre --crema .............. 5.29 ✓ AA --campo como texto sobre --crema .... 9.87 ✓ AA --arena-texto sobre --crema ......... 4.71 ✓ AA --espiga con texto --surco .......... 8.39 ✓ AA --lima-vivo sobre --campo ........... 7.69 ✓ AA --lima sobre --campo ................ 4.13 ✓ AA-grande (solo títulos) 🚨 LOS QUE FALLAN — no usarlos así nunca: --lima + blanco ... 2.55 ✗ --lima como texto sobre crema ... 2.39 ✗ --arena + blanco ... 2.67 ✗ --espiga + blanco .............. 1.83 ✗ --lima-vivo + blanco ... 1.37 ✗ --------------------------------------------------------- */ /* --- Gradientes de marca --------------------------------- */ --grad-hero: linear-gradient(120deg, #042A20 0%, var(--campo) 50%, #0C6047 100%); --grad-marca: linear-gradient(135deg, var(--siembra) 0%, var(--campo) 100%); /* Velo para dar legibilidad al texto sobre fotos de campo. Tinte del --campo real, para que la foto se sienta de la marca. */ --velo-foto: linear-gradient(180deg, rgba(4,42,32,.74) 0%, rgba(4,42,32,.44) 45%, rgba(4,42,32,.80) 100%); /* --- Semánticos (apuntan a los corporativos) -------------- Ojo: los de TEXTO apuntan a las variantes oscurecidas, nunca al color de marca crudo. Ahí está la diferencia entre AA y 2.4:1. */ --bg: var(--crema); --bg-dark: var(--campo); --text: var(--surco); --text-muted: var(--piedra); --text-invert: var(--blanco); --accent: var(--arena); /* decorativo: fondos, filetes, iconos */ --accent-texto:var(--arena-texto); /* el mismo acento cuando va como TEXTO */ --link: var(--siembra); --border: var(--linea); --cta: var(--siembra); /* conversión: verde + texto blanco (5.24 ✓) */ --cta-alt: var(--arena-texto); /* secundario: arena oscuro + blanco (5.02 ✓) */ --cta-marca: var(--espiga); /* acento: ámbar + texto --surco, NUNCA blanco */ /* --- Tipografía ------------------------------------------ */ --font-display: "Bitter", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Escala con clamp() = responsive sin breakpoints */ --fs-hero: clamp(2.4rem, 6vw, 4.6rem); --fs-h1: clamp(2rem, 4.4vw, 3.2rem); --fs-h2: clamp(1.6rem, 3.2vw, 2.4rem); --fs-h3: clamp(1.2rem, 2vw, 1.5rem); --fs-lead: clamp(1.05rem, 1.6vw, 1.25rem); --fs-body: 1rem; --fs-small: .875rem; --lh-tight: 1.12; --lh-body: 1.65; --track-wordmark: .18em; /* tracking del wordmark mientras no haya logo */ /* --- Espaciado ------------------------------------------- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; --seccion-y: clamp(3.5rem, 8vw, 7rem); /* padding vertical de sección */ --ancho-max: 1200px; --ancho-texto: 68ch; /* --- Radios y sombras ------------------------------------ */ --r-sm: 6px; --r-md: 12px; --r-lg: 22px; --r-pill: 999px; /* CTA */ --r-hoja: 0 62% 0 62%; /* motivo de marca: hoja */ --sh-sm: 0 1px 2px rgba(28,42,31,.08); --sh-md: 0 6px 20px rgba(28,42,31,.10); --sh-lg: 0 18px 48px rgba(28,42,31,.16); /* --- Movimiento ------------------------------------------ */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: .18s; --dur: .32s; --dur-slow: .6s; --dur-hero: 7s; /* ciclo del carrusel del hero */ } /* Motivo de marca: hoja. Se aplica a máscaras de imagen e íconos. Es el equivalente al hexágono de Coprinci: un solo gesto repetido. */ .hoja { border-radius: var(--r-hoja); } .hoja--flip { border-radius: 62% 0 62% 0; } /* ------------------------------------------------------------ FUENTES — van en el de cada página, no aquí: ------------------------------------------------------------ */