/* ============================================================ TOKENS · Espacio Digital de Vinculación — ITSE Derivados del manual de marca institucional del ITSE. Prefijo: --vi-* (vinculación) ============================================================ */ :root { /* --- Capa institucional ITSE (manual de marca, pág. 2) --- */ --vi-amarillo: #FFB000; /* Amarillo #1 · el más saturado */ --vi-amarillo-med: #FFBC00; /* Amarillo #2 · intermedio */ --vi-amarillo-claro: #FFCE00; /* Amarillo #3 · el del logo */ --vi-gris: #7B7B7B; /* Gris #1 */ --vi-gris-2: #9D9D9C; /* Gris #2 */ --vi-gris-3: #AEAEAE; /* Gris #3 */ /* Colores alternativos del manual — solo acentos */ --vi-rojo: #CD2E26; --vi-azul-oscuro: #225082; --vi-verde: #9EBE43; /* --- Capa Programa Socios Formadores --- */ /* PROVISIONAL: P-3 · azul estimado del deck PSF. Pendiente del valor exacto (Khadine / César). */ --vi-azul: #3BA9DC; --vi-azul-suave: #EAF6FC; /* --- Utilidad --- */ --vi-tinta: #3A3A3A; /* texto principal · 10.4:1 sobre blanco */ --vi-tinta-2: #6E6E6E; /* texto secundario · 5.4:1 sobre blanco */ --vi-papel: #FFFFFF; --vi-papel-2: #F7F7F7; --vi-papel-3: #FCFAF6; /* crema tenue — secciones alternas */ --vi-borde: #E5E5E5; --vi-borde-fuerte: #D3D3D3; /* --- Tipografía --- */ /* PROVISIONAL: P-4 · sustitutas web de Phosphate / Avenir / Helvetica Neue. Las del manual son fuentes de sistema Apple sin licencia web. Pendiente de aprobación de César. */ --vi-display: 'Anton', 'Haettenschweiler', Impact, system-ui, sans-serif; --vi-titulo: 'Jost', 'Avenir Next', Avenir, system-ui, sans-serif; --vi-cuerpo: 'Inter', 'Helvetica Neue', Helvetica, system-ui, sans-serif; /* Escala tipográfica fluida */ --fs-display: clamp(2.6rem, 6.2vw, 5.2rem); --fs-h1: clamp(2.1rem, 4.4vw, 3.4rem); --fs-h2: clamp(1.7rem, 3.2vw, 2.5rem); --fs-h3: clamp(1.15rem, 1.7vw, 1.4rem); --fs-lead: clamp(1.05rem, 1.5vw, 1.25rem); --fs-body: 1rem; --fs-sm: 0.9rem; --fs-xs: 0.78rem; /* --- Espaciado y 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; --seccion-y: clamp(3.5rem, 8vw, 7rem); --ancho: 1180px; --ancho-texto: 68ch; /* --- Formas --- */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 32px; --r-full: 999px; --sombra-1: 0 1px 2px rgba(58,58,58,.05), 0 2px 8px rgba(58,58,58,.05); --sombra-2: 0 2px 6px rgba(58,58,58,.06), 0 12px 28px rgba(58,58,58,.08); --sombra-3: 0 4px 12px rgba(58,58,58,.08), 0 24px 48px rgba(58,58,58,.10); --trans: 260ms cubic-bezier(.22,.61,.36,1); --header-h: 76px; } /* Territorio visual del Programa Socios Formadores. Se aplica en para teñir acentos de azul en vez de amarillo. */ .t-programa { --acento: var(--vi-azul); --acento-solido: var(--vi-azul-oscuro); --acento-suave: var(--vi-azul-suave); } :root, .t-institucional { --acento: var(--vi-amarillo); --acento-solido: var(--vi-tinta); --acento-suave: #FFF6E3; }