/* ============================================================ WaterGo · tokens Los pasteles están muestreados de las fotos reales de producto y el negro es el del SVG del logotipo. v2 — corrección de rumbo: en la primera versión los pasteles estaban prohibidos como superficie "para que el color significara algo". El resultado fue una página gris y fría que no daba ninguna gana de comprar. Los colores del producto SON la calidez de la marca; usarlos como campo no es decorar, es enseñar el producto. La base pasa de gris frío a blanco cálido. Reglas completas en design-system/MASTER.md ============================================================ */ :root { /* ---------- capa 1 · pigmento ---------- */ --tinta: #1D1D1B; /* negro del logotipo */ --papel: #FAF6F3; /* base cálida, de la familia del Nude */ --blanco: #FFFFFF; --ceramica: #FCFAF8; /* el blanco del interior */ --nude: #EAE2DC; /* ODS 1 · Fin de la pobreza */ --pink: #E9A79A; /* ODS 5 · Igualdad de género */ --blue: #C4D5E2; /* ODS 13 · Acción por el clima */ /* tintes de superficie · el mismo pigmento, muy diluido */ --tinte-nude: #F6F1EB; --tinte-rosa: #FAEDE9; --tinte-azul: #EDF3F8; /* neutros · ratio medido sobre --papel. gris-55 se oscureció de #706F6B a #666560: el anterior daba 4,48:1 sobre los tintes pálidos, justo por debajo del 4,5 que exige AA, y salía en unos treinta sitios. El gris clarito "por elegancia" es el motivo nº1 de que una web se lea mal. */ --gris-70: #5A5A57; /* 6,44:1 AA · texto secundario */ --gris-55: #666560; /* 5,61:1 AA · texto terciario */ --gris-45: #8D8D89; /* 3,10:1 AA · bordes funcionales */ --gris-35: #9B9B97; /* 2,58:1 ✗ · SOLO deshabilitado */ --gris-25: #C9C3BE; /* ✗ · SOLO reglas decorativas */ /* ---------- capa 2 · semántica ---------- */ --color-primary: var(--tinta); --color-on-primary: var(--blanco); --color-secondary: var(--gris-70); --color-background: var(--papel); --color-on-background: var(--tinta); --color-surface: var(--blanco); --color-on-surface: var(--tinta); --color-surface-alt: var(--ceramica); --color-muted: var(--gris-55); --color-border: var(--gris-25); --color-border-strong: var(--gris-45); --color-disabled: var(--gris-35); --color-success: #2E6B4F; --color-warning: #8A5B12; --color-destructive: #97331F; --color-on-destructive: var(--blanco); --color-ring: var(--tinta); /* ---------- tipografía ---------- */ --f-display: 'Familjen Grotesk', system-ui, sans-serif; --f-body: 'Source Serif 4', Georgia, serif; --f-mono: 'DM Mono', ui-monospace, monospace; --t-hero: clamp(2.9rem, 7.4vw, 6.2rem); --t-h2: clamp(1.9rem, 3.6vw, 3.1rem); --t-h3: clamp(1.15rem, 1.7vw, 1.5rem); --t-lead: clamp(1.06rem, 1.3vw, 1.28rem); --t-body: 1.0625rem; --t-small: 0.9rem; --t-dato: 0.7rem; --lh-tight: 1.05; --lh-body: 1.6; --ls-display: -0.03em; --ls-dato: 0.16em; /* ---------- ritmo ---------- */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px; --ancho: 1280px; --canal: clamp(20px, 4.5vw, 56px); --pad-seccion: clamp(64px, 7vw, 104px); --r-s: 8px; /* controles */ --r-m: 20px; /* tarjetas */ --r-g: 32px; /* paneles grandes */ --r-l: 999px; /* píldoras y muestras */ --toque-min: 48px; /* ---------- profundidad ---------- */ /* Sombras teñidas con la tinta de marca, nunca negro puro: el gris neutro sobre base cálida se ve sucio. */ --sombra-s: 0 1px 2px rgba(29,29,27,.04), 0 2px 8px rgba(29,29,27,.04); --sombra-m: 0 2px 4px rgba(29,29,27,.04), 0 10px 28px rgba(29,29,27,.07); --sombra-l: 0 4px 8px rgba(29,29,27,.05), 0 20px 48px rgba(29,29,27,.10); /* ---------- movimiento ---------- */ --dur-micro: 200ms; --dur-panel: 260ms; --dur-salida: 150ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-suave: cubic-bezier(0.34, 1.28, 0.64, 1); /* rebote contenido */ /* Muelle real con linear(): sustituye a una librería de animación para casi todo. Solo en controles pequeños — el rebote de un panel grande se ve barato. */ --muelle: linear(0, .402 7.4%, .911 15.3%, 1.071, 1.144 22.2%, 1.146 25.4%, 1.093 30.5%, .996 39%, .974 43.2%, .98 48.6%, 1.004 61.5%, 1); /* ---------- capas ---------- */ --z-base: 0; --z-sticky: 10; --z-cabecera: 20; --z-menu: 40; --z-cortina: 100; --z-modal: 110; --z-toast: 1000; } /* ============================================================ Grano Una capa de ruido fija sobre toda la página, sin peso de red: el SVG va en la propia hoja. Es lo que separa una superficie impresa de un div de color plano — sin esto, por muy bien elegido que esté el color, la página se ve digital y barata. ============================================================ */ .grano { position: fixed; inset: 0; z-index: var(--z-toast); pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23r)' opacity='.22'/%3E%3C/svg%3E"); } /* ============================================================ Baño de color v3 — la página deja de flotar sobre una crema neutra y se baña en el color del propio producto. Una superficie pastel a sangre no es exceso: es la voz de la marca, y es lo único que un competidor no puede copiar sin copiar el producto. Se aplica poniendo --c y la clase .bano. El texto sigue siendo la tinta de marca; lo que cambia es el suelo. Contrastes de la tinta sobre cada pastel, medidos: Nude 13,20:1 · Blue 11,23:1 · Pink 8,41:1 → los tres AAA. El secundario NO puede ser gris: sobre color se lava. Es la propia tinta al 78 %, que sobre el peor caso (Pink) da 5,18:1 → AA. El apagado subió del 62 % al 74 %: al 62 % daba 3,59:1 sobre Pink, por debajo de AA, y ahí van los chips de ODS. ============================================================ */ .bano { background: var(--c); color: var(--tinta); --color-background: var(--c); --color-on-background: var(--tinta); --color-primary: var(--tinta); --color-on-primary: var(--c); --color-secondary: color-mix(in srgb, var(--tinta) 78%, transparent); --color-muted: color-mix(in srgb, var(--tinta) 74%, transparent); --color-surface: color-mix(in srgb, var(--blanco) 62%, transparent); --color-on-surface: var(--tinta); --color-border: color-mix(in srgb, var(--tinta) 14%, transparent); --color-border-strong: color-mix(in srgb, var(--tinta) 30%, transparent); --color-ring: var(--tinta); } /* la cuarta colección todavía no tiene acabado: se baña en el crudo de la cerámica, y esa ausencia de color es justamente el mensaje */ .bano--crudo { --c: var(--ceramica); } /* ============================================================ Zona oscura · banda de empresas y pie ============================================================ */ .zona-tinta { --color-background: var(--tinta); --color-on-background: #F7F3F0; --color-surface: #2A2A27; --color-on-surface: #F7F3F0; --color-secondary: #ADA9A4; --color-muted: #ADA9A4; --color-border: #38352F; --color-border-strong: #57534B; --color-primary: #F7F3F0; --color-on-primary: var(--tinta); --color-ring: #F7F3F0; } /* ============================================================ Movimiento reducido ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --dur-micro: 1ms; --dur-panel: 1ms; --dur-salida: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }