/** * Design tokens — Mirada Educativa. * Única fuente de color y tipografía del sitio. Ningún otro CSS escribe un hex. * * Fuente: Manual de Identidad Digital ME (láminas 10 a 13). * - Paleta digital principal: negro formal, celeste educativo/CTA, blanco, * gris claro y gris oscuro. * - Los colores del logotipo NO se usan en la interfaz (lámina 11: "para * interfaces, botones y llamados a la acción use la paleta digital principal"). * - Saira SemiBold/Bold para títulos, Montserrat para textos. * * Decisión de accesibilidad: sobre el celeste #00A5D5 el texto va en negro * (contraste 7,3:1). En blanco daría 2,9:1 y no cumple WCAG AA. */ :root { /* --- Color: paleta digital principal (manual, lámina 10) --- */ --me-color-negro: #000000; /* encabezados, fondos corporativos */ --me-color-celeste: #00A5D5; /* CTA / conversión: reservado a acciones clave */ --me-color-blanco: #FFFFFF; --me-color-gris-claro: #F5F5F5; /* fondos neutros y bloques secundarios */ --me-color-gris-oscuro: #4B4F58; /* texto secundario y apoyo informativo */ /* --- Colores del isotipo (manual, lámina 11) --- Se usan como acentos de la interfaz a pedido del equipo (29-sep), turnándose entre los elementos de cada grupo. El manual los reserva para el logotipo: validar con el cliente. Siempre como fondo o acento con texto e iconos en negro (contraste AA con los cinco); nunca como color de texto sobre blanco. */ --me-logo-rojo: #F0804C; --me-logo-naranjo: #F6A440; --me-logo-amarillo: #FFDB44; --me-logo-verde: #BED67E; --me-logo-celeste: #00B1EB; /* Franja con los cinco, en el orden del logo */ --me-franja-marca: linear-gradient(90deg, var(--me-logo-rojo) 0 20%, var(--me-logo-naranjo) 20% 40%, var(--me-logo-amarillo) 40% 60%, var(--me-logo-verde) 60% 80%, var(--me-logo-celeste) 80% 100%); /* --- Acentos de la interfaz: distribución de nexus-edu-boost.lovable.app (29-sep) --- Cuatro colores en este orden: azul → naranja → verde → amarillo. base = líneas y rellenos (valores de la referencia, pasados de oklch a hex) suave = fondo de iconos y números (referencia) tinta = iconos y texto sobre el suave: mismo tono, más oscuro, 4,5:1 de contraste (el color base sobre el suave queda entre 1,7 y 2,7:1 y no se lee). */ --me-ui-azul: #00A6E9; --me-ui-azul-suave: #E1F6FF; --me-ui-azul-tinta: #0074B4; --me-ui-naranja: #F3821D; --me-ui-naranja-suave: #FFF1E6; --me-ui-naranja-tinta: #B84D00; --me-ui-verde: #10AE65; --me-ui-verde-suave: #E6FCEC; --me-ui-verde-tinta: #00823C; --me-ui-amarillo: #EFBD24; --me-ui-amarillo-suave: #FFF8E6; --me-ui-amarillo-tinta: #986800; --me-color-crema: #FAF1DF; /* fondo de la sección de financiamiento (referencia) */ --me-color-celeste-claro: #EDF7FC; /* fondo "Celeste claro" (reemplaza al negro en Inicio, pedido del equipo 6-oct) */ --me-color-crema-pagina: #F8F1E0; /* fondo de página en todo el sitio (antes solo Inicio, 20-oct; todo el sitio desde el 22-oct) */ --me-footer-bg: var(--me-color-crema-pagina); /* 22-oct: crema como el resto de la página; antes degradado celeste claro → blanco (6-oct) */ /* --- Roles (se usan en los componentes) --- */ --me-color-text: var(--me-color-negro); --me-color-muted: var(--me-color-gris-oscuro); --me-color-bg: var(--me-color-crema-pagina); /* 22-oct: crema en vez de blanco (pedido del equipo) */ --me-color-bg-alt: var(--me-color-gris-claro); --me-color-cta: var(--me-color-celeste); --me-color-cta-text: var(--me-color-blanco); /* antes negro; blanco a pedido del equipo (1-oct). Contraste 2,9:1, bajo AA */ --me-color-cta-hover: var(--me-color-negro); --me-color-cta-hover-text: var(--me-color-blanco); --me-color-border: rgba(0, 0, 0, .12); --me-color-border-strong: rgba(0, 0, 0, .28); --me-color-focus: var(--me-color-celeste); --me-color-overlay: rgba(0, 0, 0, .55); --me-color-error: #B42318; /* del manual, lámina 14 ("evitar") — solo para mensajes de error */ --me-color-ok: #1F7A4D; /* del manual, lámina 14 ("utilizar") — solo para mensajes de éxito */ /* --- Tipografía (manual, láminas 12 y 13) --- */ --me-font-heading: 'Saira', Arial, Helvetica, sans-serif; --me-font-body: 'Montserrat', Arial, Helvetica, sans-serif; --me-fw-regular: 400; --me-fw-medium: 500; --me-fw-semibold: 600; --me-fw-bold: 700; --me-fs-display: clamp(2.25rem, 5.2vw, 4rem); /* titular del hero de portada */ --me-fs-h1: clamp(2rem, 4.2vw, 3.25rem); --me-fs-h2: clamp(1.625rem, 3.2vw, 2.5rem); --me-fs-h3: clamp(1.125rem, 1.6vw, 1.375rem); --me-fs-lead: clamp(1.0625rem, 1.4vw, 1.25rem); --me-fs-body: 1rem; --me-fs-small: .875rem; --me-fs-kicker: .8125rem; /* antetítulos en mayúsculas */ --me-lh-tight: 1.1; --me-lh-heading: 1.2; --me-lh-body: 1.65; --me-ls-kicker: .12em; /* --- Espaciado --- */ --me-space-section: clamp(2.45rem, 5.6vw, 4.9rem); /* −30 % (22-oct, pedido del equipo); antes clamp(3.5rem, 8vw, 7rem) */ --me-space-block: clamp(2rem, 4vw, 3.5rem); --me-space-gap: clamp(1rem, 2.4vw, 1.75rem); --me-gutter: clamp(1rem, 4vw, 2rem); --me-container: 1200px; --me-container-text: 760px; /* --- Forma --- */ --me-radius-lg: 24px; --me-radius: 16px; --me-radius-sm: 10px; --me-radius-pill: 999px; --me-shadow: 0 12px 32px rgba(0, 0, 0, .08); --me-shadow-lift: 0 18px 44px rgba(0, 0, 0, .14); /* --- Barra superior (contacto + redes), tomada del sitio actual del cliente --- */ --me-color-topbar: #262A2B; /* 30 % más baja que la del sitio actual, a pedido del equipo (29-sep) */ /* 3-nov: todo el header −10 % y otra vez −10 % (pedido del equipo): topbar, barra, barra compacta y logo. */ --me-topbar-h: 28px; /* móvil (34 → 31 → 28, 3-nov) */ --me-topbar-h-desk: 32px; /* escritorio (40 → 36 → 32, 3-nov) */ /* --- Header --- */ --me-header-h: 61px; /* móvil (76 → 68 → 61, 3-nov) */ --me-header-h-compacta-desk: 64px; /* barra compacta en escritorio (79 → 71 → 64, 3-nov) */ --me-header-h-top: 79px; /* escritorio arriba (98 → 88 → 79, 3-nov), logo a 87 px */ --me-logo-w: 115px; /* SOLO footer: −20 % dos veces (6-oct, pedido del equipo; 180 → 144 → 115). Bajo el mínimo del manual (lámina 9: 180 px): validar con el cliente */ --me-isotipo-w: 52px; /* manual, lámina 9: isotipo mínimo 48 px */ /* Header: logo 40 % más chico a pedido del equipo (29-sep); queda BAJO el mínimo del manual (180 px): validar con el cliente. El isotipo compacto va a 48 px (mínimo del manual). */ --me-header-logo-w: 87px; /* 108 → 97 → 87, −10 % dos veces (3-nov) */ --me-header-iso-w: 48px; /* --- Movimiento --- */ --me-ease: cubic-bezier(.2, .7, .2, 1); --me-dur: .25s; /* Breakpoints (coinciden con Elementor): 768px tablet · 1025px escritorio. Mobile-first: la base es móvil y se sube con min-width. */ }