/* ========================================================================== Identidad visual de Vicente Rueda — paleta «C2 Lavanda sobria» Fuente única: mi-universo/identidad-visual/identidad.css (guía: identidad.md) Cada proyecto la copia a su repo junto con la carpeta fuentes/. Cerrada el 30/10/2026. Ampliada el 31/10/2026 (chat 3): escala de violetas, fondo de banda, sombras, halo, luz, modo oscuro automático, bordes en arco y «reducir movimiento». Prueba y elección: demo-leads, rama prueba-color. ========================================================================== */ /* -------------------------------------------------------------------------- Fuentes — alojadas en la propia web (sin Google Fonts ni CDN) Licencia de ambas: SIL Open Font License 1.1 (OFL.txt de cada repo, que se copia a fuentes/ junto a los .woff2). Newsreader (titulares) — https://github.com/productiontype/Newsreader fonts/static/woff2/Newsreader16pt-SemiBold.woff2 Instrument Sans (texto) — https://github.com/Instrument/instrument-sans fonts/webfonts/InstrumentSans-Regular.woff2 fonts/webfonts/InstrumentSans-SemiBold.woff2 -------------------------------------------------------------------------- */ @font-face { font-family: "Newsreader"; src: url("fuentes/Newsreader16pt-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Sans"; src: url("fuentes/InstrumentSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Sans"; src: url("fuentes/InstrumentSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } :root { /* ---- Colores ------------------------------------------------------------ Contraste WCAG 2.x comprobado (fondo / superficie). Todo texto ≥ 4,5:1. */ --color-fondo: #f8f6fb; /* casi blanco con velo lila */ --color-superficie: #ece7f5; /* cajas y tarjetas (lavanda) */ --color-texto: #1f1b2b; /* 15,7 / 13,9 */ --color-texto-suave: #5b5668; /* 6,6 / 5,8 */ --color-principal: #5a4691; /* 7,2 / 6,4 — enlaces, botones, logo */ --color-sobre-principal: #ffffff; /* texto del botón: 7,7 */ --color-acento: #7a5c00; /* 5,8 / 5,2 — mostaza, solo detalles */ --color-correcto: #2f6b3a; /* 6,0 / 5,3 — siempre con icono y texto */ --color-error: #a63a2b; /* 6,0 / 5,3 — siempre con icono y texto */ --color-separador: #8a74c4; /* 3,6 / 3,2 — decorativo, nunca texto */ --color-banda: #f2eef8; /* fondo de secciones a todo lo ancho (banda de pasos). Salto con el fondo 1,07: entre claros el ojo nota más el salto. Texto 14,7 · suave 6,2 · principal 6,8 · mostaza 5,5 · separador 3,4. Las tarjetas, en superficie. */ --color-caja: #ece7f5; /* cajas dentro de piezas (= superficie; en oscuro, un escalón más) */ --color-borde: rgb(90 70 145 / 0.18); /* borde fino de lo apoyado (decorativo) */ /* ---- Escala de violetas: un solo tono (256°) en 11 intensidades --------- La profundidad sale de usar un color en muchas luces, no de mezclar colores. Contraste con blanco / con --color-texto. Texto blanco desde el 600; texto oscuro hasta el 400. */ --violeta-50: #f8f6fb; /* 1,07 / 15,65 — = fondo */ --violeta-100: #ece7f5; /* 1,21 / 13,85 — = superficie */ --violeta-200: #ddd4ef; /* 1,42 / 11,79 */ --violeta-300: #c4b6e4; /* 1,88 / 8,93 */ --violeta-400: #a693d6; /* 2,70 / 6,21 — luz de la portada */ --violeta-500: #8a74c4; /* 3,91 / 4,30 — = separador */ --violeta-600: #6f5aab; /* 5,64 / 2,98 */ --violeta-700: #5a4691; /* 7,72 / 2,18 — = principal */ --violeta-800: #463670; /* 10,39 / 1,62 */ --violeta-900: #2e2550; /* 14,03 / 1,20 — tinte de las sombras */ --violeta-950: #1e1838; /* 16,90 / 1,01 */ /* ---- Sombras: finas, en capas y teñidas de violeta 900 (no grises) ------- Solo en lo que flota; lo apoyado lleva borde. Tres alturas como máximo. */ --sombra-tinte: 46 37 80; --sombra-1: 0 1px 2px rgb(var(--sombra-tinte) / 0.08), /* flota poco: piezas */ 0 2px 8px rgb(var(--sombra-tinte) / 0.06); /* pequeñas, paneles */ --sombra-2: 0 1px 2px rgb(var(--sombra-tinte) / 0.08), /* pieza en grande, */ 0 4px 12px rgb(var(--sombra-tinte) / 0.08), /* nodo activo, botón */ 0 16px 32px -8px rgb(var(--sombra-tinte) / 0.16); /* al pasar */ --sombra-3: 0 2px 4px rgb(var(--sombra-tinte) / 0.10), /* ventanas encima */ 0 12px 24px rgb(var(--sombra-tinte) / 0.12), /* (política) */ 0 32px 64px -12px rgb(var(--sombra-tinte) / 0.24); /* Halo: SOLO el botón principal de la portada (uno por página). Es una sombra de su propio color, no cuenta como segundo brillo. */ --halo: 0 1px 2px rgb(var(--sombra-tinte) / 0.20), 0 8px 24px -6px rgb(90 70 145 / 0.55); --halo-encima: 0 1px 2px rgb(var(--sombra-tinte) / 0.20), 0 12px 32px -6px rgb(90 70 145 / 0.65); /* Luz de la portada: un solo violeta que nace de abajo y se apaga. Uno por pantalla, solo en la portada. Al 30 %: la mostaza en su punto más fuerte (#dfd8f0) da 4,53 (al 40 % bajaba a 4,15). Cada proyecto la apaga en su borde inferior con una máscara para no dejar línea con lo siguiente. */ --luz: 166 147 214; /* violeta 400 */ --luz-fuerza: 0.30; --luz-portada: radial-gradient(ellipse 50% 75% at 50% 92%, rgb(var(--luz) / var(--luz-fuerza)), rgb(var(--luz) / 0) 70%); /* Bordes de sección en arco (como un horizonte): cuánto más alto queda el centro que los extremos. Móvil 32 px; escritorio (≥ 1024 px) 64 px. */ --arco: var(--espacio-32); /* ---- Fuentes ---------------------------------------------------------- */ --fuente-titulares: "Newsreader", Georgia, "Times New Roman", serif; --fuente-texto: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --peso-normal: 400; --peso-fuerte: 600; /* ---- Tamaños de texto (no se cambian) ---------------------------------- En una página adaptable, 13/14/15 px es el tamaño BASE según la pantalla (móvil 13, tablet ≥ 600 px 14, escritorio ≥ 1024 px 15, en html{font-size}) y todo lo demás se escala en rem. Así lo hace demo-leads. Estas tres variables son para piezas de tamaño fijo (presentaciones, documentos). */ --texto-pequeno: 13px; /* notas, etiquetas, pies */ --texto-base: 14px; /* párrafos */ --texto-grande: 15px; /* entradillas, botones */ --texto-titular: 30px; /* referencia de la comparación; cada proyecto lo ajusta */ /* ---- Espaciado: escala cerrada, el número es su medida en px ---------- Fijada el 30/10/2026 con el rediseño de demo-leads (propuesta B3). Solo estas medidas para márgenes, rellenos y huecos. */ --espacio-4: 4px; /* etiqueta → su campo; título → su texto */ --espacio-8: 8px; /* icono → texto; líneas de una misma lista */ --espacio-12: 12px; /* titular → entradilla; cabecera de sección → contenido */ --espacio-16: 16px; /* entre pasos, entre campos */ --espacio-24: 24px; /* relleno de tarjetas en móvil */ --espacio-32: 32px; /* relleno de tarjetas en escritorio */ --espacio-48: 48px; /* entre bloques; contenido → separador del pie */ --espacio-64: 64px; /* margen lateral en escritorio */ --espacio-96: 96px; /* hueco entre columnas (1024–1399 px) */ --espacio-128: 128px; /* hueco entre columnas (≥ 1400 px) */ /* ---- Radios de esquina: poco redondeado = sobrio y fiable ------------- */ --radio-pequeno: 4px; /* botón, campos de texto, avisos */ --radio-medio: 8px; /* tarjetas */ --radio-redondo: 50%; /* círculos (nodos del flujo, avatares) */ /* ---- Anchos ------------------------------------------------------------ */ --ancho-maximo: 1520px; /* caja de la página centrada, márgenes laterales incluidos */ --ancho-lectura: 40em; /* ~70 caracteres por línea */ /* ---- Separador: línea de 1 px que se desvanece a los lados ------------ */ --separador-grosor: 1px; --separador-linea: linear-gradient(to right, transparent, var(--color-separador) 50%, transparent); } /* Separador listo para usar:
La línea es un BORDE, no un fondo: los navegadores ajustan los bordes a un píxel entero. Pintada como fondo de 1 px, al caer entre dos píxeles se repartía en dos medias líneas casi invisibles (corregido el 30/10/2026). */ .separador { position: relative; height: 0; border: 0; border-top: var(--separador-grosor) solid var(--color-separador); border-image: var(--separador-linea) 1; overflow: visible; } /* Adorno central: rombo pequeño en mostaza, centrado sobre la línea */ .separador::after { content: ""; position: absolute; top: calc(var(--separador-grosor) / -2); left: 50%; width: 5px; height: 5px; background: var(--color-acento); transform: translate(-50%, -50%) rotate(45deg); } @media (min-width: 1024px) { :root { --arco: var(--espacio-64); } } /* -------------------------------------------------------------------------- Modo oscuro AUTOMÁTICO (opción C, elegida el 31/10/2026) Solo para quien tiene el sistema en oscuro; la identidad sigue siendo clara. El fondo es violeta casi negro, nunca negro. Se descartó el oscuro fijo: contradice «fondos oscuros: no» y de día se lee peor para la mayoría. Contraste comprobado sobre fondo / superficie / cajas #2e2550. El logo se cambia por logo/logo-blanco.svg con . -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; /* casillas, barras y menús del sistema en oscuro */ --color-fondo: #17122b; --color-superficie: #231c3e; --color-caja: #2e2550; /* un escalón más: barras de pieza, burbujas */ --color-banda: #231c3e; /* = superficie (salto 1,13, ya suave en oscuro) */ --color-texto: #efebf7; /* 15,46 / 13,69 / 11,96 */ --color-texto-suave: #b7aecb; /* 8,58 / 7,60 / 6,64 */ --color-principal: #b9a7f0; /* 8,51 / 7,53 / 6,58 */ --color-sobre-principal: #17122b; /* texto del botón: 8,51 */ --color-acento: #e0b850; /* 9,62 / 8,52 / 7,44 */ --color-correcto: #86cf98; /* 9,84 / 8,72 / 7,61 */ --color-error: #f29a8a; /* 8,43 / 7,47 / 6,52 */ --color-separador: #7c67bf; /* 3,93 / 3,48 — decorativo, nunca texto */ --color-borde: rgb(239 235 247 / 0.14); --sombra-tinte: 6 4 16; /* violeta casi negro */ --sombra-1: 0 1px 2px rgb(var(--sombra-tinte) / 0.40), 0 2px 8px rgb(var(--sombra-tinte) / 0.30); --sombra-2: 0 1px 2px rgb(var(--sombra-tinte) / 0.40), 0 4px 12px rgb(var(--sombra-tinte) / 0.35), 0 16px 32px -8px rgb(var(--sombra-tinte) / 0.55); --sombra-3: 0 2px 4px rgb(var(--sombra-tinte) / 0.45), 0 12px 24px rgb(var(--sombra-tinte) / 0.45), 0 32px 64px -12px rgb(var(--sombra-tinte) / 0.65); --halo: 0 1px 2px rgb(var(--sombra-tinte) / 0.50), 0 8px 28px -6px rgb(185 167 240 / 0.45); --halo-encima: 0 1px 2px rgb(var(--sombra-tinte) / 0.50), 0 12px 36px -6px rgb(185 167 240 / 0.55); --luz: 185 167 240; /* violeta claro; punto más fuerte #3b3356 */ --luz-fuerza: 0.22; } } /* -------------------------------------------------------------------------- Sección con bordes en arco:
El fondo va en un ::before a todo lo ancho, recortado con tres capas de máscara: arco arriba (una franja de alto --r con media elipse), arco abajo (igual, al revés) y el centro recto. Una elipse mucho más ancha que la pantalla da un horizonte; border-radius daría bordes de pestaña. Vale para cualquier alto de sección (la primera versión de demo-leads solo funcionaba si la sección medía más de 4 × --r). Esquinas de cajas: 4–8 px. -------------------------------------------------------------------------- */ .banda-arco { position: relative; isolation: isolate; } .banda-arco::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--color-banda); --r: calc(var(--arco) * 7.5); /* alto de la elipse: con 100vw de ancho, el arco baja 0,134 × r = --arco en los extremos */ -webkit-mask: radial-gradient(100vw var(--r) at 50% 100%, #000 99.4%, transparent 100%) top / 100% var(--r) no-repeat, radial-gradient(100vw var(--r) at 50% 0%, #000 99.4%, transparent 100%) bottom / 100% var(--r) no-repeat, linear-gradient(transparent var(--r), #000 var(--r), #000 calc(100% - var(--r)), transparent calc(100% - var(--r))); mask: radial-gradient(100vw var(--r) at 50% 100%, #000 99.4%, transparent 100%) top / 100% var(--r) no-repeat, radial-gradient(100vw var(--r) at 50% 0%, #000 99.4%, transparent 100%) bottom / 100% var(--r) no-repeat, linear-gradient(transparent var(--r), #000 var(--r), #000 calc(100% - var(--r)), transparent calc(100% - var(--r))); } /* -------------------------------------------------------------------------- Reducir movimiento: quien lo tiene activado ve cambios instantáneos. Va en la identidad para que ningún proyecto se lo salte. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }