/* ========================================================================== UCAP — Design Tokens Universidad Católica "Ntra. Sra. de la Asunción" — Campus Alto Paraná -------------------------------------------------------------------------- Capa de identidad. Se carga DESPUÉS del CSS del template para sobrescribir sus variables sin tocar los archivos originales (el template queda actualizable). FUENTE DE LOS COLORES DE MARCA: Manual de Normas de Uso — Símbolos de Identidad de la Universidad Católica, aprobado por el Consejo de Gobierno General el 03/10/2017, pág. 22 ("Padrón cromático"). Los HEX primarios NO son estimaciones: son los valores normados de Pantone Blue 072 y Pantone 2995. Todos los ratios de contraste anotados fueron calculados con la fórmula de luminancia relativa WCAG 2.1, no estimados. Ver docs/identidad-visual.md ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. COLORES DE MARCA — oficiales, no modificar --------------------------------------------------------------------- */ --uc-blue: #004494; /* Pantone Blue 072 · CMYK C100 M80 · 9,31:1 sobre blanco → AA/AAA */ --uc-cyan: #009FE3; /* Pantone 2995 · CMYK C100 · 2,97:1 → SOLO decorativo, nunca texto */ /* --------------------------------------------------------------------- 2. ESCALA DEL AZUL INSTITUCIONAL --------------------------------------------------------------------- */ --uc-blue-50: #E8F0FA; /* 1,15:1 — fondos de sección */ --uc-blue-100: #C7DBF2; /* 1,41:1 */ --uc-blue-200: #8FB4E3; /* 2,14:1 — bordes decorativos */ --uc-blue-300: #5A93D6; /* 3,10:1 — texto grande sobre blanco */ --uc-blue-400: #3A76C4; /* 4,60:1 — AA texto. Links sobre fondo claro */ --uc-blue-500: #004494; /* 9,31:1 — BASE OFICIAL */ --uc-blue-600: #003A7D; /* 11,04:1 — hover de botón primario */ --uc-blue-700: #002D61; /* 13,57:1 — footer, header oscuro */ --uc-blue-800: #00224A; /* 15,82:1 */ --uc-blue-900: #001733; /* 17,94:1 — overlay del hero */ /* --------------------------------------------------------------------- 3. ESCALA DEL CELESTE El celeste oficial no es accesible como texto (2,97:1). Cuando el celeste debe LEERSE (links, labels, iconos informativos) se usa --uc-cyan-600. --------------------------------------------------------------------- */ --uc-cyan-50: #E5F6FD; /* 1,11:1 */ --uc-cyan-100: #BFE9FA; /* 1,29:1 */ --uc-cyan-200: #7FD3F5; /* 1,67:1 */ --uc-cyan-300: #33B6EE; /* 2,32:1 */ --uc-cyan-400: #009FE3; /* 2,97:1 — BASE OFICIAL, decorativo */ --uc-cyan-500: #008AC7; /* 3,85:1 — AA solo texto grande */ --uc-cyan-600: #0077B3; /* 4,90:1 — AA texto. Reemplazo accesible del celeste */ --uc-cyan-700: #005E8C; /* 7,05:1 */ --uc-cyan-800: #004666; /* 10,16:1 */ /* --------------------------------------------------------------------- 4. ACENTO — Dorado académico La marca es bicolor azul, sin color cálido. El dorado existe porque un CTA azul sobre un header azul no se distingue. Sobre azul #004494: dorado 500 → 3,87:1 (AA large) · dorado 300 → 5,75:1 (AA texto). --------------------------------------------------------------------- */ --uc-gold-100: #FAF0D7; /* 1,13:1 */ --uc-gold-300: #E8C877; /* 1,62:1 sobre blanco · 5,75:1 sobre azul 500 */ --uc-gold-500: #C8A24A; /* 2,41:1 — decorativo: bordes, iconos grandes */ --uc-gold-600: #A07520; /* 4,15:1 — AA large. Solo texto ≥18,66px bold o elementos grandes */ --uc-gold-700: #8A6518; /* 5,31:1 — AA texto. Fondo del CTA: el botón usa 14-16px bold, que NO es "texto grande" para WCAG, así que gold-600 no alcanza */ --uc-gold-800: #6E5013; /* 7,45:1 — hover del CTA. Mantiene AA en el estado activo */ /* --------------------------------------------------------------------- 5. NEUTROS — tinte frío alineado al hue de marca --------------------------------------------------------------------- */ --uc-white: #FFFFFF; --uc-gray-50: #F8FAFC; /* 1,05:1 */ --uc-gray-100: #F1F5F9; --uc-gray-200: #E2E8F0; /* 1,23:1 — bordes */ --uc-gray-300: #CBD5E1; --uc-gray-400: #94A3B8; --uc-gray-500: #64748B; /* 4,76:1 — PISO del texto secundario */ --uc-gray-600: #475569; --uc-gray-700: #334155; /* 10,35:1 */ --uc-gray-800: #1E293B; --uc-gray-900: #0F172A; /* 17,85:1 — texto principal */ /* --------------------------------------------------------------------- 6. SEMÁNTICOS — todos ≥ 4,8:1 sobre blanco --------------------------------------------------------------------- */ --uc-success: #15803D; /* 5,02:1 */ --uc-success-bg: #DCFCE7; /* fondo del badge de vacancia; texto en --uc-success da 4,55:1 */ --uc-warning: #B45309; /* 5,02:1 */ --uc-danger: #B3261E; /* 6,54:1 */ --uc-info: #0369A1; /* 5,93:1 */ --uc-whatsapp: #25D366; /* Color oficial de WhatsApp. Solo fondo de botón con icono blanco */ /* --------------------------------------------------------------------- 7. ROLES DE UI — los componentes consumen SOLO esta capa --------------------------------------------------------------------- */ --uc-bg: var(--uc-white); --uc-bg-subtle: var(--uc-gray-50); --uc-bg-brand: var(--uc-blue-500); --uc-bg-brand-deep: var(--uc-blue-900); --uc-text: var(--uc-gray-900); /* gray-500 (4,76:1) es el PISO absoluto, no el valor de trabajo: a 14-16px en Inter Regular el texto se percibe lavado y obliga a forzar la vista. El texto secundario va en gray-600 (7,46:1) y gray-500 queda para lo terciario (dimensiones de imagen, sellos, texto sobre fondo ya tintado). */ --uc-text-muted: var(--uc-gray-600); --uc-text-subtle: var(--uc-gray-500); --uc-text-on-brand: var(--uc-white); --uc-text-link: var(--uc-blue-500); --uc-text-link-hover: var(--uc-cyan-600); --uc-border: var(--uc-gray-200); --uc-border-strong: var(--uc-gray-300); --uc-focus-ring: var(--uc-cyan-600); --uc-cta: var(--uc-blue-500); --uc-cta-hover: var(--uc-blue-600); --uc-cta-alt: var(--uc-gold-700); /* 5,31:1 con texto blanco a cualquier tamaño */ --uc-cta-alt-hover: var(--uc-gold-800); /* 7,45:1 */ /* --------------------------------------------------------------------- 8. GRADIENTES --------------------------------------------------------------------- */ --uc-grad-brand: linear-gradient(135deg, var(--uc-blue-700) 0%, var(--uc-blue-500) 55%, var(--uc-cyan-400) 100%); --uc-grad-hero: linear-gradient(180deg, rgba(0,23,51,.88) 0%, rgba(0,68,148,.72) 100%); --uc-grad-soft: linear-gradient(135deg, var(--uc-blue-50) 0%, var(--uc-cyan-50) 100%); /* --------------------------------------------------------------------- 9. TIPOGRAFÍA El logo usa una serif didona de alto contraste. Se recoge esa voz en titulares; el cuerpo va en sans por legibilidad a 16px en mobile. --------------------------------------------------------------------- */ --uc-font-display: "Playfair Display", Georgia, "Times New Roman", serif; --uc-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --uc-fs-xs: 0.75rem; --uc-fs-sm: 0.875rem; --uc-fs-base: 1rem; /* Piso del cuerpo. Nunca bajar: legibilidad mobile + evita zoom en iOS */ --uc-fs-lg: 1.125rem; --uc-fs-xl: 1.375rem; --uc-fs-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); --uc-fs-3xl: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem); --uc-fs-4xl: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem); --uc-lh-tight: 1.15; --uc-lh-snug: 1.25; /* titulares de componente */ --uc-lh-base: 1.6; --uc-lh-copy: 1.55; /* bajadas dentro de cajas angostas */ --uc-fw-normal: 400; --uc-fw-medium: 500; --uc-fw-semi: 600; /* peso de trabajo de la UI: da cuerpo sin gritar */ --uc-fw-bold: 700; /* Compensación óptica: por debajo de 15px Inter Regular se afina y pierde definición. Todo texto pequeño sube un escalón de peso, no de tamaño. */ --uc-fw-small: var(--uc-fw-medium); /* --------------------------------------------------------------------- 10. ESPACIADO, RADIOS, SOMBRAS, MOVIMIENTO --------------------------------------------------------------------- */ --uc-space-1: 0.25rem; --uc-space-2: 0.5rem; --uc-space-3: 0.75rem; --uc-space-4: 1rem; --uc-space-6: 1.5rem; --uc-space-8: 2rem; --uc-space-12: 3rem; --uc-space-16: 4rem; --uc-space-24: 6rem; --uc-section-y: clamp(3rem, 2rem + 5vw, 6rem); --uc-radius-sm: 6px; --uc-radius-md: 12px; --uc-radius-lg: 20px; --uc-radius-pill: 999px; --uc-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08); --uc-shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04); --uc-shadow-lg: 0 12px 32px rgba(15,23,42,.12); --uc-shadow-brand: 0 10px 28px rgba(0,68,148,.28); --uc-ease: cubic-bezier(.4, 0, .2, 1); --uc-dur-fast: 150ms; --uc-dur-base: 250ms; /* Altura real medida del header, no aproximada: el enlace del menú aporta line-height 24px + 2×24px de padding = 72px exactos. */ --uc-header-h: 72px; --uc-header-h-stuck: 56px; /* header comprimido al fijarse */ --uc-nav-pad: var(--uc-space-6); /* padding vertical del enlace de menú */ --uc-z-header: 1000; --uc-z-float: 1100; /* botón flotante de WhatsApp */ /* --------------------------------------------------------------------- 11. REMAPEO DE LAS VARIABLES DEL TEMPLATE (Educino) Sobrescribe los tokens de style.css sin editar el archivo original. --------------------------------------------------------------------- */ --theme-color: var(--uc-blue-500); /* era #3747FF azul violáceo */ --theme-color2: var(--uc-gold-500); /* era #FFCC33 amarillo */ --theme-color3: var(--uc-cyan-400); /* era #626FFF */ --vs-secondary-color: var(--uc-blue-700); /* era #2F2552 */ --title-color: var(--uc-gray-900); /* era #0A282C */ --body-color: var(--uc-gray-600); /* era #585B5B */ --smoke-color: var(--uc-gray-50); /* era #F3F3F3 */ --white-color: var(--uc-white); --yellow-color: var(--uc-gold-500); --success-color: var(--uc-success); --error-color: var(--uc-danger); --border-color: var(--uc-gray-200); /* era #e8e8e8 */ --title-font: var(--uc-font-display); --body-font: var(--uc-font-body); --section-space: var(--uc-section-y); --section-space-mobile: var(--uc-section-y); } /* ========================================================================== Accesibilidad base ========================================================================== */ :focus-visible { outline: 3px solid var(--uc-focus-ring); outline-offset: 2px; border-radius: var(--uc-radius-sm); } /* Sobre superficies oscuras el anillo celeste da 2,66:1 y prácticamente no se ve. En blanco da 13,02:1 sobre el hero. El foco tiene que ser visible en TODA superficie. */ .uc-hero :focus-visible, .uc-band :focus-visible, .uc-footer :focus-visible, .uc-cta-band :focus-visible, .uc-topbar :focus-visible { outline-color: var(--uc-white); } html { scroll-behavior: smooth; /* El ancla siempre se resuelve con la página scrolleada, es decir con el header ya comprimido: se compensa esa altura, no la del header en reposo. */ scroll-padding-top: calc(var(--uc-header-h-stuck) + var(--uc-space-2)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Enlace de salto para navegación por teclado */ .uc-skip-link { position: absolute; left: var(--uc-space-4); top: -100px; z-index: 9999; padding: var(--uc-space-3) var(--uc-space-6); background: var(--uc-bg-brand); color: var(--uc-text-on-brand); border-radius: var(--uc-radius-sm); font-weight: var(--uc-fw-medium); transition: top var(--uc-dur-fast) var(--uc-ease); } .uc-skip-link:focus { top: var(--uc-space-4); } /* Marca de dato pendiente de confirmación del cliente. Antes era un recuadro amarillo #FEF3C7 con borde punteado: en el hero resultaba el elemento de mayor luminancia de toda la primera pantalla (16,03:1) y le robaba el foco al H1, además de ser el único radio de 3px y el único amarillo fuera de la rampa dorada. Ahora es tinta dorada: se distingue del texto que la rodea sin competir con el titular ni parecer un error de render. */ .uc-todo { color: var(--uc-gold-700); /* 5,31:1 sobre blanco */ font-style: normal; font-weight: var(--uc-fw-medium); white-space: nowrap; } /* Sobre superficies oscuras, el mismo rol en el tono claro de la rampa */ .uc-hero .uc-todo, .uc-band .uc-todo, .uc-cta-band .uc-todo, .uc-footer .uc-todo { color: var(--uc-gold-300); } /* 11,07:1 sobre azul 900 */