/* ============================================================================= TOKENS DE MARCA — MARA BALLOONS ----------------------------------------------------------------------------- Cliente: Mara Balloons (maraballoons.com) Proyecto: Sitio web · Concepto Creativo · 2026 ORIGEN DE LA PALETA: extraida del Kit de Elementor del sitio en produccion, no propuesta de cero. Este es un escenario de migracion: el sitio ya se ve como la clienta quiere y lo que sobra es el builder. Primary #3F5EA3 -> --cc-c-brand New Item #1 #365288 -> --cc-c-brand-deep Secondary #E6A596 -> --cc-c-accent (salmon) Accent #F3B9A8 -> --cc-c-accent-soft New Item #2 #EAD1C6 -> --cc-c-nude New Item #3 #F1E1D8 -> --cc-c-wash (fondo alterno) New Item #4 #FFFFFF -> --cc-c-white Text #7A7A7A -> NO SE EMBARCA. Ver nota de contraste. El contrato de nombres esta en docs/TOKENS.md y NO se negocia. ============================================================================= */ :root { /* ---------- PRIMITIVOS DE MARCA ---------- Un bloque NUNCA los usa directamente. */ --cc-c-ink: #243354; /* navy profundo: la tinta del sitio */ --cc-c-ink-soft: #4e5a6c; /* gris azulado para texto secundario */ --cc-c-brand: #3f5ea3; /* azul Mara: superficies y fondos de CTA */ --cc-c-brand-deep: #365288; /* version densa: hover, secciones oscuras, texto */ --cc-c-accent: #e6a596; /* salmon: acento decorativo */ --cc-c-accent-soft: #f3b9a8; /* salmon claro */ --cc-c-nude: #ead1c6; /* nude: superficies tenidas */ --cc-c-wash: #f1e1d8; /* crema rosada: fondo de seccion alterna */ --cc-c-line: #e7dcd4; /* filete calido, en familia con el crema */ --cc-c-white: #ffffff; /* ---------- COLOR ---------- */ --cc-bg: var(--cc-c-white); --cc-bg-alt: var(--cc-c-wash); --cc-surface: var(--cc-c-white); --cc-ink: var(--cc-c-ink); --cc-ink-soft: var(--cc-c-ink-soft); --cc-ink-inverse: var(--cc-c-white); --cc-brand: var(--cc-c-brand); --cc-brand-2: var(--cc-c-brand-deep); --cc-accent: var(--cc-c-accent); --cc-line: var(--cc-c-line); --cc-overlay: color-mix(in srgb, var(--cc-c-ink) 58%, transparent); /* NOTA DE CONTRASTE — medidas reales, calculadas sobre los hex de arriba. Minimos: 4.5:1 texto normal · 3:1 texto grande, bordes e iconos con informacion. --cc-ink sobre --cc-bg (blanco) -> 12.53:1 --cc-ink sobre --cc-bg-alt (crema) -> 9.84:1 --cc-ink-soft sobre --cc-bg -> 6.99:1 --cc-ink-soft sobre --cc-bg-alt -> 5.50:1 --cc-ink-soft sobre nude -> 4.81:1 --cc-brand-2 sobre --cc-bg -> 7.72:1 (texto) --cc-brand-2 sobre --cc-bg-alt -> 6.07:1 (texto) blanco sobre --cc-brand -> 6.28:1 (botones) blanco sobre --cc-brand-deep -> 7.72:1 (botones) crema sobre --cc-brand-deep -> 6.07:1 (seccion oscura) CORRECCION DOCUMENTADA (regla 3 del escenario de migracion): el Kit define el texto en #7A7A7A, que rinde 4.29:1 sobre blanco y 3.37:1 sobre el crema de las secciones alternas. No llega a AA en ninguno de los dos. No se arrastra: el texto pasa a --cc-ink / --cc-ink-soft, ambos en la familia azul de la marca. El sitio se ve igual de suave y se puede leer. LIMITE DURO: --cc-accent (#E6A596) rinde 2.06:1 sobre blanco. Es un color DECORATIVO: filetes, fondos, iconos grandes, estados hover. Nunca texto, nunca un icono que transmita informacion por si solo. */ /* ---------- TIPOGRAFIA ---------- Los nombres coinciden con los @font-face de style.css. */ --cc-font-display: "Raleway", system-ui, -apple-system, sans-serif; --cc-font-body: "Raleway", system-ui, -apple-system, sans-serif; --cc-font-accent: "Fathia", "Raleway", system-ui, sans-serif; --cc-weight-display: 700; --cc-weight-body: 400; --cc-weight-label: 600; --cc-tracking-display: -0.015em; --cc-leading-display: 1.12; --cc-leading-body: 1.68; /* Escala fluida estandar del sistema. */ --cc-text-xs: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem); --cc-text-sm: clamp(0.875rem, 0.85rem + 0.10vw, 0.9375rem); --cc-text-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem); --cc-text-lg: clamp(1.125rem, 1.08rem + 0.21vw, 1.25rem); --cc-text-xl: clamp(1.25rem, 1.16rem + 0.42vw, 1.5rem); --cc-text-2xl: clamp(1.5rem, 1.315rem + 0.83vw, 2rem); --cc-text-3xl: clamp(1.875rem, 1.644rem + 1.04vw, 2.5rem); --cc-text-4xl: clamp(2.25rem, 1.88rem + 1.67vw, 3.25rem); --cc-text-5xl: clamp(2.75rem, 2.102rem + 2.92vw, 4.5rem); --cc-text-6xl: clamp(3.25rem, 2.231rem + 4.58vw, 6rem); /* ---------- FORMA ---------- Esquina generosa, copiada del sitio actual: botones pastilla, tarjetas de catalogo redondeadas, hero con radio amplio. Es lo que hace que la marca se lea cercana y de celebracion, no institucional. */ --cc-radius-sm: 10px; --cc-radius: 16px; --cc-radius-lg: 26px; --cc-radius-pill: 999px; --cc-border-width: 1px; /* ---------- ELEVACION ---------- Tintadas con el navy de marca, nunca negro: sobre crema el negro ensucia. */ --cc-shadow-sm: 0 1px 2px -1px color-mix(in srgb, var(--cc-c-ink) 14%, transparent), 0 3px 8px -2px color-mix(in srgb, var(--cc-c-ink) 10%, transparent); --cc-shadow: 0 2px 4px -2px color-mix(in srgb, var(--cc-c-ink) 14%, transparent), 0 12px 36px -8px color-mix(in srgb, var(--cc-c-ink) 18%, transparent); --cc-shadow-lg: 0 4px 8px -4px color-mix(in srgb, var(--cc-c-ink) 16%, transparent), 0 30px 64px -16px color-mix(in srgb, var(--cc-c-ink) 26%, transparent); /* ---------- ESPACIADO ---------- Esta escala no cambia por marca. Es el ritmo del sistema. */ --cc-space-unit: 8px; --cc-space-1: calc(var(--cc-space-unit) * 0.5); /* 4px */ --cc-space-2: calc(var(--cc-space-unit) * 1); /* 8px */ --cc-space-3: calc(var(--cc-space-unit) * 1.5); /* 12px */ --cc-space-4: calc(var(--cc-space-unit) * 2); /* 16px */ --cc-space-5: calc(var(--cc-space-unit) * 3); /* 24px */ --cc-space-6: calc(var(--cc-space-unit) * 4); /* 32px */ --cc-space-7: calc(var(--cc-space-unit) * 5); /* 40px */ --cc-space-8: calc(var(--cc-space-unit) * 6); /* 48px */ --cc-space-9: calc(var(--cc-space-unit) * 7); /* 56px */ --cc-space-10: calc(var(--cc-space-unit) * 8); /* 64px */ --cc-space-11: calc(var(--cc-space-unit) * 10); /* 80px */ --cc-space-12: calc(var(--cc-space-unit) * 12); /* 96px */ --cc-space-13: calc(var(--cc-space-unit) * 14); /* 112px */ --cc-space-14: calc(var(--cc-space-unit) * 16); /* 128px */ --cc-space-15: calc(var(--cc-space-unit) * 20); /* 160px */ --cc-space-16: calc(var(--cc-space-unit) * 24); /* 192px */ --cc-section-y: clamp(4.5rem, 7vw, 6rem); --cc-container: 1300px; --cc-gutter: clamp(1.25rem, 4vw, 3rem); /* ---------- MOVIMIENTO ---------- Personalidad elegida: EXPRESIVA. El sitio es un portafolio visual y la clienta pidio dinamismo; el recorrido largo hace que la galeria entre con presencia. Si en produccion se siente lento, bajar a Media (620ms / 32px) es cambiar estas dos lineas. */ --cc-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --cc-ease-out: cubic-bezier(0.45, 0.05, 0.2, 1); --cc-dur-fast: 240ms; --cc-dur: 820ms; --cc-dur-slow: 1100ms; --cc-reveal-y: 48px; --cc-reveal-stagger: 90ms; /* ---------- EXTENSIONES DE PROYECTO ---------- Documentadas en docs/TOKENS.md antes de existir aqui. */ --cc-c-accent-soft: #f3b9a8; --cc-c-nude: #ead1c6; --cc-accent-soft: var(--cc-c-accent-soft); --cc-surface-tinted: var(--cc-c-nude); --cc-gradient-hero: linear-gradient( 135deg, var(--cc-c-accent) 0%, var(--cc-c-brand) 62%, var(--cc-c-brand-deep) 100% ); /* ---------- BREAKPOINTS ---------- Si cambia uno aqui, cambiarlo tambien en chassis.css. */ --cc-bp-sm: 480px; --cc-bp-md: 768px; --cc-bp-lg: 1024px; --cc-bp-xl: 1440px; } /* ============================================================================= ESCALA TIPOGRAFICA BASE ============================================================================= */ body { background-color: var(--cc-bg); color: var(--cc-ink); font-family: var(--cc-font-body); font-weight: var(--cc-weight-body); font-size: var(--cc-text-base); line-height: var(--cc-leading-body); } h1, h2, h3, h4 { font-family: var(--cc-font-display); font-weight: var(--cc-weight-display); letter-spacing: var(--cc-tracking-display); line-height: var(--cc-leading-display); color: var(--cc-ink); } /* De H3 hacia abajo el titular deja de ser display y pasa a ser rotulo. */ h3, h4 { font-weight: var(--cc-weight-label); letter-spacing: -0.01em; line-height: 1.3; } /* ============================================================================= ALTURA DE CABECERA La cabecera vive en el patron sincronizado "CC Header", no en el tema. Ajustar a su altura real cuando este construida, o los anclajes de seccion quedaran desplazados. ============================================================================= */ :root { --cc-header-h: 5.25rem; --cc-anchor-offset: calc(var(--cc-header-h) + var(--cc-space-5)); }