/* ========================================================================== 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) Hay DOS temas. Se cambian con el atributo data-theme en : -> verde dominante (DEFAULT — pedido del Ministro) -> violeta dominante (el del manual oficial) Todo el sitio lee variables, así que el cambio es de una sola línea. ========================================================================== */ :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) ---------- Necesarios para poder hacer del verde una superficie grande sin romper la regla del manual ("los neones nunca a full como fondo de página"). Si el manual se actualiza, se reemplazan acá y listo. */ --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; /* ---------- 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); } /* ====================================================================== TEMA VERDE (default) El verde profundo toma el rol que el manual le da al violeta: superficie grande. El violeta queda como acento (jornada ACADEMY). ====================================================================== */ :root, [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); } /* ====================================================================== TEMA VIOLETA (el oficial del Manual de Identidad Visual) ====================================================================== */ [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); }