/* ========================================================================== NEA TECH 2026 — TOKENS Fuente: Manual de Identidad Visual NEA TECH 2026 (Gobierno de Corrientes · Ministerio de Ciencia y Tecnología) + Guía de diseño interna (Ramiro Espinosa, 31-08-2026) UN SOLO TEMA: la FUSIÓN del azul con el verde. Vive en :root, no hace falta ningún atributo en el y no hay selector. Los tres bloques [data-theme=...] de más abajo quedan archivados como referencia histórica. Ninguno se usa. Ningún componente tiene un color escrito a mano: todos leen variables. ========================================================================== */ :root { /* ---------- PALETA OFICIAL (no tocar: sale del manual) ---------- */ --nt-violeta: #6A28FF; --nt-lima: #C8FF00; --nt-magenta: #FF20A1; --nt-cian: #00E0FF; --nt-naranja: #FFBA00; --nt-negro: #000000; --nt-blanco: #FFFFFF; /* ---------- DERIVADOS (NO están en el manual, los agregué yo) ---------- Quedaron de la etapa en que el verde era el color dominante. Hoy el único que sigue en uso es el verde señal, como acento secundario de la fusión. Los demás los usan los temas archivados de más abajo. */ --nt-verde-900: #04140C; /* casi negro, tinte verde */ --nt-verde-800: #062314; --nt-verde-700: #083A22; --nt-verde-600: #0B4F2E; --nt-verde-500: #10744A; --nt-verde-senal: #00F5A0; /* links, hover, estados OK */ --nt-lima-900: #4A5E00; --nt-violeta-900: #1B0942; /* ---------- AZUL ELÉCTRICO (propuesta del equipo de marca, 09/09/2026) ---- Reemplaza al violeta como color dominante. El resto de la paleta no cambia. */ --nt-azul: #3448DB; /* Azul Eléctrico NEA TECH */ --nt-azul-noche: #17246B; --nt-azul-luminoso: #4B63FF; /* ---------- ESCALA DE GRISES ---------- */ --nt-gris-950: #05070A; --nt-gris-900: #0A0E12; --nt-gris-800: #12181E; --nt-gris-700: #1C242C; --nt-gris-600: #2C3742; --nt-gris-400: #6B7A87; --nt-gris-200: #B4C0C9; --nt-gris-100: #E4EAEE; /* ---------- LAS 5 JORNADAS (manual, cap. 05) ---------- */ --jornada-educa: var(--nt-cian); --jornada-academy: var(--nt-violeta); --jornada-business: var(--nt-lima); --jornada-summit: var(--nt-naranja); --jornada-fest: var(--nt-magenta); /* ---------- TIPOGRAFÍA ---------- Display = Chakra Petch (sustituto web del wordmark; el manual no nombra la fuente original — ver docs/PENDIENTES.md) Texto = Space Grotesk (tipografía secundaria OFICIAL del manual) */ --ff-display: "Chakra Petch", "Space Grotesk", system-ui, sans-serif; --ff-text: "Space Grotesk", system-ui, -apple-system, sans-serif; --ff-mono: "Chakra Petch", ui-monospace, "SFMono-Regular", monospace; --fs-mega: clamp(3.2rem, 11vw, 9rem); --fs-h1: clamp(2.4rem, 6.2vw, 5rem); --fs-h2: clamp(1.9rem, 4.2vw, 3.2rem); --fs-h3: clamp(1.3rem, 2.4vw, 1.85rem); --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem); --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; --lh-tight: 0.92; --lh-snug: 1.15; --lh-body: 1.6; --ls-mega: -0.03em; --ls-label: 0.18em; /* ---------- ESPACIADO / RITMO ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --contenido: 1240px; --contenido-angosto: 760px; --gutter: clamp(1.25rem, 4vw, 3rem); /* ---------- GEOMETRÍA DE MARCA ---------- El corte de esquina replica el ángulo de las diagonales del isotipo NT. */ --corte: 18px; --corte-lg: 34px; --borde: 1px solid var(--linea); --radio: 0px; /* la marca es angular: sin redondeos */ --dur: 220ms; --ease: cubic-bezier(.2, .7, .3, 1); } /* ====================================================================== FUSIÓN — el tema del sitio (09/09/2026) ---------------------------------------------------------------------- No es azul en vez de verde: es el verde CON el azul. PREDOMINA EL AZUL. Todas las superficies —piso, tarjetas, secciones, bloques de marca— son azules. El verde no compite por superficie. El verde entra donde se nota sin pelear: como acento secundario (verde señal) y dentro del patrón de píxeles, mezclado con el azul. El lima sigue siendo el acento principal, igual que en todas las versiones. El cian hace de bisagra entre las dos familias. No hay selector: este es el único tema. Los de abajo quedan archivados. ====================================================================== */ :root { --fondo: #060A1C; /* azul casi negro: el piso de la página */ --superficie: #0B1230; /* azul profundo: tarjetas y secciones */ --superficie-2: #141C4A; /* azul profundo, hover */ --superficie-alt: #17246B; /* Azul Noche: bloques que necesitan más peso */ --marca: #17246B; /* Azul Noche */ --marca-alta: #3448DB; /* Azul Eléctrico */ /* SIN DEGRADÉ — pedido del 9/9. Plano, como en las piezas del equipo. */ --marca-grad: #3448DB; --marca-grad-hero:#3448DB; --acento: var(--nt-lima); /* lima: el que no se mueve nunca */ --acento-2: var(--nt-verde-senal); /* VERDE señal: acá entra el verde */ --acento-3: var(--nt-cian); /* bisagra entre el azul y el verde */ --acento-contra: #060A1C; --texto: #ECEFFB; --texto-2: #C3CBEC; --texto-3: #6572A0; --linea: rgba(200, 255, 0, 0.16); --linea-suave: rgba(255, 255, 255, 0.09); --glow: 0 0 40px rgba(200, 255, 0, 0.28); --glow-suave: 0 0 26px rgba(0, 245, 160, 0.28); /* Patrón de píxeles: acá sí conviven las dos familias, pero con el azul al frente — cian y azul luminoso pesan más que el verde señal. */ --patron: "#C8FF00,#C8FF00,#00E0FF,#00E0FF,#4B63FF,#4B63FF,#00F5A0,#FF20A1,#FFBA00"; } /* ====================================================================== TEMA VERDE — ARCHIVADO (fue el default hasta el 09/09/2026) ====================================================================== */ [data-theme="verde"] { --fondo: #04090B; --superficie: #0A1013; --superficie-2: #101A1C; --superficie-alt: #06231A; --marca: #07351F; /* superficie grande de marca */ --marca-alta: #0B4F2E; --marca-grad: linear-gradient(150deg, #0B4F2E 0%, #06281A 55%, #04090B 100%); --marca-grad-hero:radial-gradient(120% 90% at 78% 12%, #0F6B3E 0%, #083A22 38%, #04090B 78%); --acento: var(--nt-lima); /* CTA, subrayados, el "2026" */ --acento-2: var(--nt-verde-senal); --acento-3: var(--nt-cian); --acento-contra: #06120A; /* texto sobre lima */ --texto: #EAF2ED; --texto-2: #9FB2A8; --texto-3: #61756B; --linea: rgba(200, 255, 0, 0.14); --linea-suave: rgba(255, 255, 255, 0.08); --glow: 0 0 40px rgba(200, 255, 0, 0.28); --glow-suave: 0 0 24px rgba(0, 245, 160, 0.18); /* Colores del patrón de píxeles del hero */ --patron: "#C8FF00,#C8FF00,#C8FF00,#00F5A0,#00F5A0,#0B4F2E,#00E0FF,#FF20A1,#FFBA00"; } /* ====================================================================== TEMA VIOLETA — ARCHIVADO Era el del Manual de Identidad Visual. El equipo de marca lo reemplazó por el azul eléctrico en septiembre de 2026. Se conserva por si hiciera falta volver, pero ya no se ofrece en el selector. ====================================================================== */ [data-theme="violeta"] { --fondo: #08040F; --superficie: #0E0718; --superficie-2: #160C28; --superficie-alt: #24104F; --marca: #4A1BB8; --marca-alta: var(--nt-violeta); --marca-grad: linear-gradient(150deg, #6A28FF 0%, #3A128F 55%, #08040F 100%); --marca-grad-hero:radial-gradient(120% 90% at 78% 12%, #7C3BFF 0%, #3A128F 38%, #08040F 78%); --acento: var(--nt-lima); --acento-2: var(--nt-magenta); --acento-3: var(--nt-cian); --acento-contra: #0C0616; --texto: #F1ECFA; --texto-2: #AFA2C6; --texto-3: #6E6087; --linea: rgba(200, 255, 0, 0.16); --linea-suave: rgba(255, 255, 255, 0.09); --glow: 0 0 40px rgba(200, 255, 0, 0.28); --glow-suave: 0 0 26px rgba(106, 40, 255, 0.35); } /* ====================================================================== TEMA AZUL SOLO — ARCHIVADO Fue el paso intermedio: azul reemplazando al verde. Se descartó, porque lo que se pidió es la fusión de los dos. Sus hexadecimales oficiales viven ahora en el bloque FUSIÓN de arriba. ====================================================================== */ [data-theme="azul"] { --fondo: #060A1C; --superficie: #0B1230; --superficie-2: #141C4A; --superficie-alt: #17246B; --marca: #17246B; /* Azul Noche: superficie profunda */ --marca-alta: #3448DB; /* Azul Eléctrico: el color de marca */ /* SIN DEGRADÉ — pedido del 9/9. El fondo de marca es azul plano, como en las piezas que mandó el equipo. Si alguna vez se quiere volver al degradé, estos dos valores son el único lugar donde tocar. */ --marca-grad: #3448DB; --marca-grad-hero:#3448DB; --acento: var(--nt-lima); /* el lima no se mueve en ninguna versión */ --acento-2: var(--nt-azul-luminoso); --acento-3: var(--nt-cian); --acento-contra: #060A1C; --texto: #ECEFFB; /* Sobre el azul plano el texto secundario necesita más peso que sobre un degradé oscuro: con #A3ADD4 quedaba en 3.4:1 y no pasaba AA. */ --texto-2: #C3CBEC; --texto-3: #6572A0; --linea: rgba(200, 255, 0, 0.16); --linea-suave: rgba(255, 255, 255, 0.09); --glow: 0 0 40px rgba(200, 255, 0, 0.28); --glow-suave: 0 0 26px rgba(75, 99, 255, 0.38); /* Colores del patrón de píxeles del hero. En azul se usa la paleta neón completa del manual, como en las piezas que mandó el equipo de marca. */ --patron: "#C8FF00,#C8FF00,#00E0FF,#00E0FF,#FF20A1,#FFBA00,#4B63FF,#000000"; }