/** * Owl Vision — Tokens de marca * Fuente de verdad: Manual de Identidad Visual v1.0 · agosto 2026 * * NINGÚN color, fuente o medida de marca debe escribirse fuera de este archivo. * Si necesitas un valor que no está aquí, no lo inventes: consúltalo. */ :root { /* --------------------------------------------------------------- * PALETA — §07 del manual * El porcentaje indica la presencia esperada en la comunicación. * La identidad se siente PRINCIPALMENTE MONOCROMÁTICA. * Azul y ámbar son acentos: nunca compiten con el logotipo. * --------------------------------------------------------------- */ --ov-obsidian: #111111; /* 55% · base / texto / lujo */ --ov-hueso: #F4F1EA; /* 25% · fondos / calidez */ --ov-azul: #183B56; /* 12% · confianza / señalización */ --ov-cuarzo: #B9BEC3; /* 5% · apoyo / interfaz */ --ov-ambar: #D4A44E; /* 3% · acento premium */ --ov-blanco: #FFFFFF; /* versión cromática "negro sobre blanco" */ /* Derivados — únicamente opacidades de los tokens de arriba. No son colores nuevos: son el mismo color con transparencia. */ --ov-obsidian-08: rgba(17, 17, 17, 0.08); --ov-obsidian-16: rgba(17, 17, 17, 0.16); --ov-obsidian-60: rgba(17, 17, 17, 0.60); --ov-hueso-40: rgba(244, 241, 234, 0.40); --ov-hueso-70: rgba(244, 241, 234, 0.70); --ov-azul-12: rgba(24, 59, 86, 0.12); --ov-ambar-16: rgba(212, 164, 78, 0.16); /* --------------------------------------------------------------- * ROLES SEMÁNTICOS * Usa SIEMPRE estos en los componentes, no los tokens crudos. * Así un cambio de superficie no obliga a tocar cada archivo. * --------------------------------------------------------------- */ --ov-bg: var(--ov-hueso); --ov-bg-alt: var(--ov-blanco); --ov-bg-inverse: var(--ov-obsidian); --ov-text: var(--ov-obsidian); --ov-text-muted: var(--ov-obsidian-60); --ov-text-inverse: var(--ov-hueso); --ov-border: var(--ov-obsidian-16); --ov-border-soft: var(--ov-obsidian-08); --ov-accent: var(--ov-ambar); --ov-trust: var(--ov-azul); /* Estados. El manual no define semáforo; se derivan del sistema manteniendo el azul como confianza y el ámbar como atención. */ --ov-success: #1F6F52; --ov-warning: var(--ov-ambar); --ov-danger: #9E3B34; /* tomado de las X de "usos incorrectos" */ /* --------------------------------------------------------------- * TIPOGRAFÍA — §08 del manual * Máximo 2 familias por pieza. EB Garamond solo en citas de marca. * --------------------------------------------------------------- */ --ov-font-display: "PT Sans Narrow", "Arial Narrow", sans-serif; --ov-font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ov-font-quote: "EB Garamond", Georgia, "Times New Roman", serif; /* Escala tipográfica — fluida, base 16px, razón ~1.25 */ --ov-text-xs: 0.75rem; /* 12px */ --ov-text-sm: 0.875rem; /* 14px */ --ov-text-base: 1rem; /* 16px */ --ov-text-md: 1.125rem; /* 18px */ --ov-text-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); --ov-text-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); --ov-text-2xl: clamp(2rem, 1.6rem + 2vw, 3rem); --ov-text-3xl: clamp(2.5rem, 1.9rem + 3vw, 4.25rem); --ov-leading-tight: 1.08; /* títulos PT Sans Narrow */ --ov-leading-snug: 1.3; --ov-leading-body: 1.65; /* lectura cómoda en Lato */ /* PT Sans Narrow es condensada: necesita aire entre letras en mayúsculas para no verse apretada. */ --ov-tracking-display: 0.01em; --ov-tracking-caps: 0.08em; --ov-tracking-label: 0.12em; /* --------------------------------------------------------------- * ESPACIADO — el manual pide "espacios amplios" * Escala de 4px. * --------------------------------------------------------------- */ --ov-space-2xs: 0.25rem; --ov-space-xs: 0.5rem; --ov-space-sm: 0.75rem; --ov-space-md: 1rem; --ov-space-lg: 1.5rem; --ov-space-xl: 2rem; --ov-space-2xl: 3rem; --ov-space-3xl: 4.5rem; --ov-space-4xl: 7rem; /* Ritmo vertical entre secciones de página */ --ov-section-y: clamp(3.5rem, 2rem + 7vw, 7rem); /* --------------------------------------------------------------- * DISPOSICIÓN * --------------------------------------------------------------- */ --ov-container: 75rem; /* 1200px */ --ov-container-wide: 90rem; /* 1440px */ --ov-container-text: 42rem; /* medida de lectura ~70ch */ --ov-gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); /* --------------------------------------------------------------- * FORMA * El manual usa esquinas suaves en tarjetas y píldoras en etiquetas. * --------------------------------------------------------------- */ --ov-radius-sm: 4px; --ov-radius-md: 10px; --ov-radius-lg: 18px; --ov-radius-pill: 999px; /* Trazo de iconografía — §11: retícula 24px, trazo 2px */ --ov-stroke: 2px; /* --------------------------------------------------------------- * PROPORCIÓN DE LAS FOTOS DE PRODUCTO * * Las fotos llegan rectangulares en dos grupos: 2/1 y ~5/3. * La imagen NUNCA se recorta (object-fit: contain); esta caja solo * fija la altura para que la rejilla del catálogo quede pareja. * * Cambiar aquí y cambia en todo el sitio. * 5/3 → 1.667 el grupo mayoritario * 2/1 → 2.000 la serie "A" * 16/9 → 1.778 intermedio si conviven ambos * --------------------------------------------------------------- */ --ov-producto-ratio: 5 / 3; /* PROHIBIDO en el logotipo (§06: "no agregar efectos"). Estas sombras son solo para elevación de UI: menús, modales. */ --ov-shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06); --ov-shadow-md: 0 4px 16px rgba(17, 17, 17, 0.08); --ov-shadow-lg: 0 12px 40px rgba(17, 17, 17, 0.12); /* --------------------------------------------------------------- * MOVIMIENTO — sobrio, nunca decorativo * --------------------------------------------------------------- */ --ov-ease: cubic-bezier(0.2, 0, 0.1, 1); --ov-duration: 220ms; /* --------------------------------------------------------------- * LOGOTIPO — §04 del manual * Tamaños MÍNIMOS. Por debajo, usar solo el símbolo. * --------------------------------------------------------------- */ --ov-logo-min-nolema: 180px; --ov-logo-min-lema: 320px; --ov-logo-clearspace: 1em; /* 1X = diámetro de la pupila del símbolo */ /* Capas */ --ov-z-header: 100; --ov-z-overlay: 500; --ov-z-modal: 1000; } /* Accesibilidad: respeta a quien pidió menos movimiento. */ @media (prefers-reduced-motion: reduce) { :root { --ov-duration: 1ms; } }