/* ============================================================================ TOKENS DE MARCA — Zonia Vergara · NEUROCONECTA ---------------------------------------------------------------------------- FUENTE ÚNICA de color y tipografía. Ninguna página declara colores propios. VERSIÓN 3.0 — ALTO CONTRASTE · COLORES DEL LOGO (2026-09-28) ---------------------------------------------------------------------------- Los colores se EXTRAJERON del logo real por muestreo de saturación (script _extraer_paleta_logo.py, 6.665 píxeles de tinta analizados). El logo NO es azul suave: es azul marino PROFUNDO con saturación 1.00. #002040 rgb(0,32,64) sat 1.00 ← color DOMINANTE ("ZONIA VERGARA") #001030 rgb(0,16,48) sat 1.00 ← sombra más honda del mismo azul #2090a0 rgb(32,144,160) sat 0.67 ← cian ("NEUROCONECTA" y la mascota) PALETA OFICIAL v3.0 — alto contraste Azul marino profundo #002040 = estructura, autoridad (color del logo) Azul hondo #001030 = fondos oscuros, máximo contraste Cian logo #2090a0 = marca, conexiones, acentos vivos Verde logo #309030 = neuroplasticidad, crecimiento (mascota) Amarillo logo #F5C518 = atención, memoria (mascota) Naranja logo #F07818 = energía (bloque LEGO naranja) Rojo logo #D8322C = emoción, urgencia Fucsia marca #C2185B = ACCIÓN femenina (CTA) Blanco puro #FFFFFF = superficie, contraste máximo Hielo #EAF2F8 = fondo frío de secciones REGLA DE CONTRASTE (REGLA-0010 · WCAG AA ≥4.5:1) — verificada en el script _verificar_contraste.py. Todos los pares texto/fondo cumplen AA o AAA. ============================================================================ */ :root { /* --- Base de alto contraste --- */ --bg: #ffffff; --bg-alt: #eaf2f8; --surface: #ffffff; --text: #001030; --muted: #40566e; --border: #c3d5e2; --nav-h: 78px; /* --- Azul marino profundo (EL COLOR DEL LOGO · estructura) --- */ --azul: #002040; --azul-h: #001030; --azul-soft: #14507a; --azul-claro: #e4eef6; --azul-borde: #7fa8c9; /* --- Cian del logo (marca, conexiones neurales) --- */ --cian: #2090a0; --cian-h: #17707d; --cian-claro: #e2f4f7; --cian-borde: #8fd0da; /* --- Fucsia de ACCIÓN (CTA femenino, alto contraste sobre blanco) --- */ --accent: #c2185b; --accent-h: #9c1149; --accent-claro: #fce4ee; --accent-borde: #f0a3c4; /* --- Verde del logo (neuroplasticidad, la mascota) --- */ --verde: #2b7a2b; --verde-h: #1f5c1f; --verde-claro: #e4f4e4; --verde-borde: #9ccf9c; /* --- Rojo del logo (emoción, energía) --- */ --rojo: #c7241e; --rojo-h: #9e1a15; --rojo-claro: #fbe6e5; --rojo-borde: #eda9a6; /* --- Naranja del logo (bloque LEGO, calor) --- NOTA: el naranja puro del logo (#e06a10) da 3.37:1 con texto blanco y NO cumple WCAG AA. Se usa la version oscurecida #B34D00 (5.24:1) cuando lleva texto blanco encima; el naranja vivo queda para detalles decorativos. */ --naranja: #b34d00; --naranja-vivo: #e06a10; --naranja-claro: #fdefe0; /* --- Amarillo del logo (atención, memoria) — decorativo, NO texto pequeño --- */ --amarillo: #f5c518; --amarillo-claro: #fef8e0; /* --- DORADO de énfasis (borde de fotos al pasar el mouse) --- Tres tonos para que el borde tenga profundidad de metal, no color plano: oro claro (brillo), oro medio (cuerpo), oro viejo (sombra del canto). Sobre blanco el oro oscuro da 4.7:1: sirve también para texto pequeño. */ --oro-claro: #f7dfa0; --oro-medio: #d4a017; --oro-oscuro: #a67c00; --grad-oro: linear-gradient(135deg, #f7dfa0 0%, #d4a017 42%, #a67c00 100%); --glow-oro: 0 0 0 1px rgba(212, 160, 23, .45), 0 18px 44px -14px rgba(166, 124, 0, .55); --glow-oro-suave: 0 0 32px -6px rgba(212, 160, 23, .60); /* --- Violeta de acento (novedad, tecnología) --- */ --violeta: #5b3fc4; --violeta-claro: #ece7fb; /* --- Pasteles de apoyo (fondos suaves con más cuerpo que antes) --- */ --pastel-cian: #e2f4f7; --pastel-verde: #e4f4e4; --pastel-naranja: #fdefe0; --pastel-cielo: #e4eef6; --pastel-lila: #ece7fb; --pastel-durazno2: #fde8ef; /* --- Contexto oscuro (el azul del logo como lienzo) --- */ --oscuro: #001030; --oscuro-alt: #002040; --texto-claro: rgba(255, 255, 255, .88); --texto-claro-alto: #ffffff; /* --- Degradados de marca (siguiendo los colores del logo) --- */ --grad-marca: linear-gradient(135deg, #002040 0%, #14507a 40%, #2090a0 100%); --grad-calido: linear-gradient(135deg, #c2185b 0%, #b34d00 100%); --grad-frio: linear-gradient(135deg, #002040 0%, #2090a0 100%); --grad-neuro: linear-gradient(135deg, #2090a0 0%, #2b7a2b 100%); --grad-aurora: linear-gradient(120deg, #002040, #2090a0, #c2185b, #b34d00, #002040); --grad-logo: linear-gradient(135deg, #002040 0%, #2090a0 55%, #2b7a2b 100%); /* --- Sombras de alto contraste --- */ --sombra-suave: rgba(0, 16, 48, .08); --sombra-media: rgba(0, 16, 48, .16); --sombra-fuerte: rgba(0, 16, 48, .30); --glow-accent-on: 0 10px 34px rgba(194, 24, 91, .42); --glow-cian: 0 10px 34px rgba(32, 144, 160, .38); /* --- Tipografía --- */ --fuente-titulo: 'Fraunces', 'Playfair Display', Georgia, serif; --fuente-cuerpo: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; /* --- Ritmo --- */ --radio: 16px; --radio-lg: 26px; --radio-g: 999px; --ancho: 1180px; /* --- Movimiento --- */ --ease-suave: cubic-bezier(.22, .61, .36, 1); --ease-rebote: cubic-bezier(.34, 1.56, .64, 1); --dur-rapida: .22s; --dur-media: .45s; --dur-lenta: .8s; /* --- Anillo de foco visible (accesibilidad de alto contraste) --- */ --foco: 3px solid var(--accent); --foco-offset: 3px; /* --- Placa de marca (fondo del logo en el nav: garantiza contraste) --- */ --placa-logo: #ffffff; --placa-borde: #7fa8c9; /* --- ALIAS de compatibilidad (nombres antiguos → paleta v3.0) --- El azul marino del logo asume el papel que tenía el azul oscuro, y el cian del logo el del cian anterior. */ --uva: var(--azul); --uva-h: var(--azul-h); --uva-soft: var(--cian); --uva-claro: var(--azul-claro); --uva-borde: var(--azul-borde); --oro: var(--amarillo); --oro-glow: rgba(245, 197, 24, .45); --pastel-lavanda: var(--azul-claro); --pastel-menta: var(--verde-claro); --pastel-arena: var(--accent-claro); } /* ============================================================================ MOVIMIENTO REDUCIDO (accesibilidad · respeta la preferencia del sistema) ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }