/* ============================================================================ LUKSO GROUP · DESIGN SYSTEM ---------------------------------------------------------------------------- Hoja canónica de producción. Única fuente de verdad para web, aplicaciones digitales y plantillas. Todo lo que se construya para Lukso importa este archivo; nada redefine un valor por su cuenta. Versión 1.1 · 26 agosto 2026 · eme labs v1.1: §10 Logo reescrita — logotipo «The Lukso Group» trazado en Schibsted Grotesk, símbolo macizo, lockup sobre SVG y no sobre texto. Deriva de: sistema-de-identidad-lukso.md (v2.2) · Brandbook_Lukso.html USO ARQUITECTURA DE TOKENS — dos niveles, no mezclar: 1 · PRIMITIVAS --lukso-* los materiales. Valores absolutos. No cambian nunca, ni en oscuro. No se usan directamente en componentes. 2 · ROLES --bg, --ink… qué hace cada color. Es lo que se usa. Estos sí se reasignan en modo oscuro. LAS CUATRO REGLAS QUE NO SE NEGOCIAN · El burdeos ocupa menos del 10 % de la superficie. Señala, no rellena. · Todo mate: sin sombras, sin degradados, sin brillos. · La línea fina es activo, no decoración. Ortogonal = acero · 45° = tela. · Jerarquía por contraste y por aire, nunca por elevación. ========================================================================= */ /* ══ 1 · PRIMITIVAS ═══════════════════════════════════════════════ */ :root{ /* materiales de marca */ --lukso-burdeos: #7A2233; --lukso-burdeos-claro: #D2818C; /* el burdeos legible sobre fondo oscuro */ --lukso-acero: #6E7377; --lukso-acero-claro: #9BA0A3; --lukso-acero-oscuro: #565B5F; /* neutros de soporte */ --lukso-tinta: #1A1B1D; /* casi-negro frío */ --lukso-lienzo: #ECEDEE; /* humo frío */ --lukso-superficie: #E3E5E6; --lukso-superficie-2: #DADCDD; /* neutros de soporte · modo oscuro */ --lukso-tinta-inv: #E7E8EA; --lukso-lienzo-osc: #16171A; --lukso-superficie-osc: #1E2023; --lukso-superficie-osc-2:#26292C; } /* ══ 2 · ROLES · claro (por defecto) ══════════════════════════════ */ :root{ --bg: var(--lukso-lienzo); --canvas: var(--bg); /* alias heredado */ --surface: var(--lukso-superficie); --surface-2: var(--lukso-superficie-2); --ink: var(--lukso-tinta); --steel: var(--lukso-acero); --steel-2: var(--lukso-acero-claro); --accent: var(--lukso-burdeos); --on-accent: var(--lukso-lienzo); /* texto sobre burdeos */ --on-ink: var(--lukso-lienzo); /* texto sobre tinta */ /* El acero cuando hace de TEXTO. --steel es el material: sirve para líneas, tramas e iconos, donde nadie tiene que leerlo. Pero a 10–11 px en mono #6E7377 sobre lienzo da 4,09:1 y se queda corto. El texto usa el siguiente escalón del mismo material —acero oscuro, 5,86:1— sin oscurecer el grafismo de toda la marca. */ --steel-txt: var(--lukso-acero-oscuro); /* Los dos grises de texto cumplen AA (4,5:1) sobre su fondo: medido, no estimado. Con .55 y .38 el secundario se quedaba en 4,04 y el terciario en 3,14, y ahí viven las etiquetas en mono de 9–11 px, que es justo el texto que más contraste necesita. La jerarquía entre los dos se sostiene ahora en el tamaño y el peso, no solo en la opacidad. */ --ink-tenue: rgba(26,27,29,.72); --ink-muy-tenue: rgba(26,27,29,.62); --line: rgba(26,27,29,.12); --line-2: rgba(26,27,29,.24); /* alias heredados de las hojas de dirección */ --tenue: var(--ink-tenue); --muy-tenue: var(--ink-muy-tenue); } /* ── Roles · oscuro ── */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg: var(--lukso-lienzo-osc); --surface: var(--lukso-superficie-osc); --surface-2: var(--lukso-superficie-osc-2); --ink: var(--lukso-tinta-inv); --steel: #8A9094; --steel-2: var(--lukso-acero-oscuro); --steel-txt: #8A9094; --accent: var(--lukso-burdeos-claro); --on-accent: var(--lukso-lienzo-osc); --on-ink: var(--lukso-lienzo-osc); --ink-tenue: rgba(231,232,234,.70); --ink-muy-tenue: rgba(231,232,234,.55); --line: rgba(231,232,234,.13); --line-2: rgba(231,232,234,.26); } } :root[data-theme="dark"]{ --bg: var(--lukso-lienzo-osc); --surface: var(--lukso-superficie-osc); --surface-2: var(--lukso-superficie-osc-2); --ink: var(--lukso-tinta-inv); --steel: #8A9094; --steel-2: var(--lukso-acero-oscuro); --steel-txt: #8A9094; --accent: var(--lukso-burdeos-claro); --on-accent: var(--lukso-lienzo-osc); --on-ink: var(--lukso-lienzo-osc); --ink-tenue: rgba(231,232,234,.70); --ink-muy-tenue: rgba(231,232,234,.55); --line: rgba(231,232,234,.13); --line-2: rgba(231,232,234,.26); } /* ══ 3 · TIPOGRAFÍA ═══════════════════════════════════════════════ Serif itálica = tela (titulares) · Sans = acero (texto) · Mono = el registro técnico del sastre (datos, medidas, referencias, etiquetas). */ :root{ --font-serif: "Crimson Pro", Georgia, "Times New Roman", serif; --font-sans: "Schibsted Grotesk", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --text-display: clamp(38px, 6vw, 68px); --text-h1: clamp(30px, 4.6vw, 46px); --text-h2: clamp(24px, 3.2vw, 32px); --text-h3: 18px; --text-lead: 19px; --text-body: 16px; --text-small: 14px; --text-meta: 11px; --leading-tight: 1.02; --leading-head: 1.14; --leading-body: 1.6; --tracking-tight: -.018em; --tracking-body: -.01em; --tracking-wide: .12em; /* etiquetas en mono */ --tracking-xwide: .32em; /* descriptores: GROUP · RETAIL */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; } /* ══ 4 · ESPACIO · base 4 ═════════════════════════════════════════ El aire es cuidado. Generoso por defecto: contención sobre ambición. */ :root{ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 48px; --space-6: 96px; --section: var(--space-6); /* alias cortos */ --s1: var(--space-1); --s2: var(--space-2); --s3: var(--space-3); --s4: var(--space-4); --s5: var(--space-5); --s6: var(--space-6); } /* ══ 5 · RETÍCULA ═════════════════════════════════════════════════ Corte a medida: la retícula se ajusta al contenido, no al revés. */ :root{ --columns: 12; --gutter: 24px; --margin: 32px; --max: 1200px; --max-prosa: 64ch; /* medida de lectura */ } /* ══ 6 · FORMA · MOVIMIENTO · ELEVACIÓN ═══════════════════════════ */ :root{ --radius: 2px; /* casi recto: el remate limpio del sastre */ --rule: 1px; /* la línea fina — activo, no adorno */ --border: 1px solid var(--line); --shadow: none; /* jerarquía por contraste, nunca por sombra */ --ease: cubic-bezier(.2,.6,.2,1); --fast: 160ms; --base: 240ms; --slow: 480ms; --icon-stroke: 1.25; /* sobre retícula de 24 */ --icon-grid: 24; --logo-min: 48px; /* ancho mínimo del símbolo */ --wordmark-min: 110px; /* ancho mínimo del logotipo (probado) */ --logo-clear: 1; /* área de protección = 1 × grosor del trazo */ } /* ══ 7 · BASE ═════════════════════════════════════════════════════ */ *, *::before, *::after{ box-sizing:border-box } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-sans); font-size:var(--text-body); line-height:var(--leading-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } ::selection{ background:var(--accent); color:var(--on-accent) } :where(a){ color:inherit } :where(img, svg, video){ max-width:100%; height:auto } :where(h1,h2,h3,h4,p,figure,blockquote){ margin:0 } /* ── Foco de teclado, por defecto y en burdeos ── Sin esto el navegador pinta su propio anillo —azul #005FCC en Chrome— en todo lo enfocable que no lleve una clase del sistema. Un segundo acento, justo lo que el sistema prohíbe, y aparece en cada tabulación. Va en :where() para que cualquier componente lo pueda sobrescribir. */ :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } /* Los saltos por ancla se paran donde toca: el header pegajoso tapaba los primeros píxeles de cada sección. --alto-cabecera lo fija quien la monte. */ :where([id]){ scroll-margin-top:calc(var(--alto-cabecera, 0px) + var(--space-4)) } html{ scroll-behavior:smooth } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } } @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ transition:none !important; animation:none !important } } /* ══ 8 · TIPOGRAFÍA APLICADA ══════════════════════════════════════ */ .lk-display, .lk-h1, .lk-h2{ font-family:var(--font-serif); font-style:italic; font-weight:var(--weight-medium); letter-spacing:var(--tracking-tight); text-wrap:balance; } .lk-display{ font-size:var(--text-display); line-height:var(--leading-tight) } .lk-h1{ font-size:var(--text-h1); line-height:var(--leading-head) } .lk-h2{ font-size:var(--text-h2); line-height:1.2 } .lk-h3{ font-family:var(--font-sans); font-weight:var(--weight-semibold); font-size:var(--text-h3); letter-spacing:var(--tracking-body); line-height:1.35; } .lk-lead{ font-size:var(--text-lead); line-height:1.62; max-width:60ch } .lk-prosa{ max-width:var(--max-prosa); line-height:var(--leading-body) } .lk-prosa > * + *{ margin-top:var(--space-3) } .lk-small{ font-size:var(--text-small) } .lk-tenue{ color:var(--ink-tenue) } /* Etiqueta en mono — el registro técnico. Va sobre títulos y en metadatos. */ .lk-eyebrow{ font-family:var(--font-mono); font-size:10.5px; font-weight:var(--weight-medium); letter-spacing:.22em; text-transform:uppercase; color:var(--accent); } .lk-label{ font-family:var(--font-mono); font-size:var(--text-meta); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--steel); } .lk-datos{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--steel); font-variant-numeric:tabular-nums; } /* ══ 9 · LAYOUT ═══════════════════════════════════════════════════ */ .lk-wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--margin) } .lk-wrap-prosa{ max-width:940px; margin-inline:auto; padding-inline:var(--margin) } .lk-section{ padding-block:var(--section) } .lk-section + .lk-section{ border-top:var(--rule) solid var(--line) } .lk-grid{ display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); gap:var(--gutter); } .lk-stack{ display:flex; flex-direction:column; gap:var(--space-3) } .lk-cluster{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center } .lk-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space-4) } @media (max-width:720px){ :root{ --margin:20px; --gutter:16px } .lk-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } } /* ══ 10 · LOGO ════════════════════════════════════════════════════ ACTUALIZADO 26 ago 2026. Tres activos, todos vectoriales y ya trazados (sin texto vivo, sin dependencia de fuente): Logo Lukso Group/SVG/ · Logo LuksoGroup.svg símbolo — la K en el marco 923,75 × 1230 · Logo TheLuksoGroup.svg logotipo — «The Lukso Group» 2024,88 × 295,84 · Recurso 2.svg símbolo macizo — 3 planos 763,76 × 1070 NOMBRE: «The Lukso Group». El artículo lo añadió Marc (26 ago 2026) como decisión propia, provisional y revisable — no está en la Esencia v3.1. Si se consolida hay que actualizar Esencia §1 y manual §2.6. LOGOTIPO: la sans es Schibsted Grotesk (la del sistema). La versión anterior usaba Montserrat, fuera del sistema — descartada. Proporción interna: serif 350,83 / sans 283,57 = 1,237. Tracking −4,5 %. Todos se insertan como SVG en línea y heredan el color con currentColor. Nunca como si hay que cambiarles el color. */ /* ── Símbolo · la K en el marco ── */ .lk-logo{ display:block; width:var(--logo-min); min-width:var(--logo-min); color:var(--ink); flex:none } .lk-logo--acero{ color:var(--steel) } .lk-logo--inverso{ color:var(--bg) } /* ── Símbolo macizo · los tres planos (Recurso 2.svg) ── El negativo del símbolo: tres polígonos llenos separados por dos canales finos. Los canales son por donde asoma el material de debajo — es el activo para las piezas de material (acero sobre tela). viewBox="0 0 763.76 1070", los polígonos con fill="currentColor". */ .lk-logo-macizo{ display:block; width:var(--logo-min); color:var(--ink); flex:none } /* ── Logotipo · «The Lukso Group» (Logo TheLuksoGroup.svg) ── viewBox="0 0 2024.88 295.84" · ratio 6,845:1 · paths con fill="currentColor". Mínimo 110 px de ancho: por debajo, «Group» empieza a cerrarse. Aguanta más pequeño que el símbolo — para favicon y usos diminutos, el logotipo llega donde la K ya no. */ .lk-wordmark{ display:block; width:clamp(var(--wordmark-min), 100%, 420px); color:var(--ink); flex:none } .lk-wordmark--acero{ color:var(--steel) } .lk-wordmark--inverso{ color:var(--bg) } /* ── Lockup · símbolo + logotipo ── La forma canónica. Separador de línea fina entre ambos; el aire a cada lado del separador = --space-4. */ .lk-lockup{ display:inline-flex; align-items:center; gap:var(--space-4) } .lk-lockup__sep{ align-self:stretch; width:1px; background:var(--line-2); flex:none } .lk-lockup--vertical{ flex-direction:column; gap:var(--space-3) } .lk-lockup--vertical .lk-lockup__sep{ width:auto; height:1px; align-self:auto; min-width:64px } /* ── Lockup de texto · SOLO cuando no se puede usar el SVG ── Fallback compuesto con fuentes vivas. Úsalo en correo, firmas o plantillas de terceros donde no entra un vector. En web y en pieza impresa va SIEMPRE el SVG trazado. PENDIENTE: no existe todavía logotipo de división. Hasta que lo haya, Lukso Retail se compone así, con el descriptor en mono. */ .lk-lockup__nombre{ border-left:1px solid var(--line-2); padding-left:var(--space-4) } .lk-lockup--vertical .lk-lockup__nombre{ border-left:0; border-top:1px solid var(--line-2); padding:14px 0 0; text-align:center } .lk-lockup__nombre b{ display:block; font-family:var(--font-sans); font-weight:var(--weight-regular); font-size:24px; letter-spacing:-.045em; line-height:1; } .lk-lockup__nombre b em{ font-family:var(--font-serif); font-style:italic; font-weight:var(--weight-medium); font-size:1.237em } .lk-lockup__nombre i{ display:block; font-style:normal; font-family:var(--font-mono); font-size:10.5px; letter-spacing:var(--tracking-xwide); color:var(--steel); margin-top:7px; } .lk-lockup--retail .lk-lockup__nombre i{ color:var(--accent) } /* ══ 11 · BOTONES ═════════════════════════════════════════════════ */ .lk-btn{ font-family:var(--font-sans); font-weight:var(--weight-semibold); font-size:var(--text-small); letter-spacing:.01em; line-height:1.2; padding:11px 22px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; text-decoration:none; display:inline-block; transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), color var(--fast) var(--ease); } .lk-btn--primario{ background:var(--ink); color:var(--on-ink); border-color:var(--ink) } .lk-btn--primario:hover{ box-shadow:inset 0 -2px 0 var(--accent) } /* el hilo que asoma */ .lk-btn--secundario{ background:transparent; color:var(--ink); border-color:var(--line-2) } .lk-btn--secundario:hover{ border-color:var(--ink) } .lk-btn--texto{ background:none; color:var(--ink); border:0; border-bottom:1px solid var(--accent); border-radius:0; padding:4px 1px; } .lk-btn--texto:hover{ color:var(--accent) } .lk-btn:disabled, .lk-btn.is-disabled{ opacity:.38; cursor:not-allowed; box-shadow:none } .lk-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px } /* ══ 12 · ENLACE ══════════════════════════════════════════════════ */ .lk-link{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:1px; transition:color var(--fast) var(--ease); } .lk-link:hover{ color:var(--accent) } .lk-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px } /* ══ 13 · ETIQUETAS ═══════════════════════════════════════════════ */ .lk-tag{ font-family:var(--font-mono); font-size:var(--text-meta); letter-spacing:var(--tracking-wide); text-transform:uppercase; border:1px solid var(--line-2); border-radius:var(--radius); padding:3px 9px; color:var(--steel); display:inline-flex; align-items:center; gap:6px; } .lk-tag--activa{ color:var(--accent); border-color:var(--accent) } .lk-tag--categoria{ background:var(--surface-2); border-color:transparent; color:var(--ink) } .lk-tag__punto{ width:5px; height:5px; border-radius:50%; background:currentColor } /* ══ 14 · CAMPOS ══════════════════════════════════════════════════ Sin caja: solo la línea de base. El campo es una línea de patrón. */ .lk-field{ display:flex; flex-direction:column; gap:6px; min-width:240px } .lk-field label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--steel-txt); } .lk-field input, .lk-field textarea, .lk-field select{ font-family:var(--font-sans); font-size:15px; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line-2); padding:9px 2px; border-radius:0; transition:border-color var(--fast) var(--ease); } .lk-field input::placeholder, .lk-field textarea::placeholder{ color:var(--ink-muy-tenue) } /* La línea de base engorda y se tiñe: el cambio de color por sí solo es un indicador de foco demasiado fino, y `outline:none` a secas dejaba el campo sin ninguna señal para quien navega con teclado. */ .lk-field input:focus, .lk-field textarea:focus, .lk-field select:focus{ outline:none; border-bottom-color:var(--accent); border-bottom-width:2px; padding-bottom:8px; /* compensa el píxel que gana el borde */ } .lk-field input:focus-visible, .lk-field textarea:focus-visible, .lk-field select:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } .lk-field textarea{ resize:vertical; min-height:64px } .lk-field.is-error input, .lk-field.is-error textarea{ border-bottom-color:var(--accent) } .lk-field__error{ font-family:var(--font-mono); font-size:10.5px; color:var(--accent); letter-spacing:.04em; } /* ══ 15 · FICHA ═══════════════════════════════════════════════════ */ .lk-card{ background:var(--surface); border:var(--rule) solid var(--line); border-radius:var(--radius); padding:var(--space-4); position:relative; display:flex; flex-direction:column; gap:var(--space-3); } .lk-card--destacada{ border-color:var(--line-2) } .lk-card--destacada::after{ /* el hilo de burdeos al pie */ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent); } .lk-card__titulo{ font-family:var(--font-serif); font-style:italic; font-weight:var(--weight-medium); font-size:24px; line-height:1.05; } .lk-card__texto{ font-size:var(--text-small); color:var(--ink-tenue); line-height:1.55 } .lk-card__datos{ font-family:var(--font-mono); font-size:var(--text-meta); color:var(--steel); letter-spacing:.04em; display:flex; gap:12px; flex-wrap:wrap; } /* ══ 16 · MARCO / UMBRAL ══════════════════════════════════════════ El activo espacial de la marca: la marca enmarca la entrada. Doble marco + marcas de corte en las esquinas (el patrón del sastre). */ .lk-umbral{ border:var(--rule) solid var(--line-2); border-radius:var(--radius); padding:26px; position:relative; background:var(--surface); } .lk-umbral__inner{ border:var(--rule) solid var(--line); padding:26px; position:relative; min-height:120px; display:flex; align-items:center; justify-content:center; text-align:center; } .lk-umbral__marca{ position:absolute; width:9px; height:9px; border:0 solid var(--steel) } .lk-umbral__marca--tl{ top:-1px; left:-1px; border-top-width:1px; border-left-width:1px } .lk-umbral__marca--tr{ top:-1px; right:-1px; border-top-width:1px; border-right-width:1px } .lk-umbral__marca--bl{ bottom:-1px; left:-1px; border-bottom-width:1px; border-left-width:1px } .lk-umbral__marca--br{ bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px } .lk-umbral--acento .lk-umbral__marca{ border-color:var(--accent) } /* ══ 17 · TABLA DE ESPECIFICACIONES ═══════════════════════════════ El lenguaje del estudio técnico: medidas, referencias, materiales. */ .lk-specs{ width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:13px; } .lk-specs caption{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); text-align:left; padding-bottom:12px; } .lk-specs td{ padding:10px 0; border-top:var(--rule) solid var(--line); vertical-align:baseline } .lk-specs tr:last-child td{ border-bottom:var(--rule) solid var(--line) } .lk-specs .k{ color:var(--steel); text-transform:uppercase; font-size:11px; letter-spacing:.06em } .lk-specs .v{ text-align:right; color:var(--ink); font-variant-numeric:tabular-nums } .lk-specs .v b{ color:var(--accent); font-weight:var(--weight-medium) } /* ══ 18 · DIVISORES ═══════════════════════════════════════════════ */ .lk-hr{ height:1px; border:0; background:var(--line); margin:0 } .lk-hr--fuerte{ background:var(--line-2) } .lk-hr--hilo{ /* el hilo de burdeos que asoma en la costura */ background:linear-gradient(90deg, var(--line-2) 0 40%, var(--accent) 40% 48%, var(--line-2) 48% 100%); } /* ══ 19 · NAVEGACIÓN ══════════════════════════════════════════════ */ .lk-nav{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; border:var(--rule) solid var(--line); border-radius:var(--radius); padding:14px 22px; background:var(--surface); } .lk-nav__marca{ display:flex; align-items:center; gap:12px; font-family:var(--font-sans); font-weight:var(--weight-semibold); letter-spacing:.16em; text-transform:uppercase; font-size:15px; color:var(--ink); } .lk-nav ul{ display:flex; gap:26px; list-style:none; margin:0; padding:0; font-size:var(--text-small); flex-wrap:wrap } .lk-nav a{ text-decoration:none; color:var(--ink-tenue); padding-bottom:5px; transition:color var(--fast) var(--ease) } .lk-nav a:hover{ color:var(--ink) } .lk-nav a[aria-current]{ color:var(--ink); border-bottom:2px solid var(--accent) } .lk-nav a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px } /* ══ 20 · CITA ════════════════════════════════════════════════════ */ .lk-quote{ font-family:var(--font-serif); font-style:italic; font-weight:var(--weight-medium); font-size:var(--text-h2); line-height:1.24; color:var(--ink); border-left:2px solid var(--accent); padding-left:22px; max-width:26ch; } .lk-quote cite{ display:block; font-family:var(--font-mono); font-style:normal; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin-top:16px; } /* ══ 21 · METADATOS ═══════════════════════════════════════════════ */ .lk-meta{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-tenue); letter-spacing:.04em; display:flex; gap:14px; align-items:center; flex-wrap:wrap; } .lk-meta__punto{ width:5px; height:5px; border-radius:50%; background:var(--accent) } /* ══ 22 · ICONOGRAFÍA · marcas de sastre ══════════════════════════ Retícula 24 · trazo constante 1,25 · terminación recta · sin relleno. Ortogonal = acero · diagonal a 45° = tela. El burdeos, solo en el remate. */ .lk-icon{ width:24px; height:24px; display:inline-block; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:var(--icon-stroke); stroke-linecap:butt; stroke-linejoin:miter; color:var(--ink); } .lk-icon--acero{ color:var(--steel) } .lk-icon .acc{ stroke:var(--accent) } /* el remate en burdeos */ .lk-icon .accf{ fill:var(--accent); stroke:none } .lk-icon--sm{ width:20px; height:20px } .lk-icon--lg{ width:34px; height:34px } .lk-icon--xl{ width:52px; height:52px } /* ══ 23 · TRAMAS · la línea fina ══════════════════════════════════ El cepillado del acero, el hilo de la tela y el patrón del sastre son la misma trama. Densidad por --trama-paso; nunca por encima de .6 de opacidad — es fondo, no dibujo. */ .lk-trama{ --trama-paso:9px; --trama-color:var(--steel-2); --trama-opacidad:.5; position:relative; isolation:isolate; } .lk-trama::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:var(--trama-opacidad); background-image:repeating-linear-gradient(90deg, var(--trama-color) 0 1px, transparent 1px var(--trama-paso)); } .lk-trama--tela::before{ /* al bies, 45° */ background-image:repeating-linear-gradient(45deg, var(--trama-color) 0 1px, transparent 1px var(--trama-paso)); } .lk-trama--patron::before{ /* discontinua: el trazado del patrón */ background-image:repeating-linear-gradient(45deg, var(--trama-color) 0 1px, transparent 1px var(--trama-paso)); mask-image:repeating-linear-gradient(45deg, #000 0 7px, transparent 7px 12px); } .lk-trama--densa{ --trama-paso:5px } .lk-trama--suelta{ --trama-paso:16px } /* ══ 24 · MEDIDOR DE PROPORCIÓN ═══════════════════════════════════ Herramienta de control, no componente de página: comprueba de un vistazo que el burdeos no pasa del 10 %. */ .lk-proporcion{ border:var(--rule) solid var(--line); border-radius:var(--radius); overflow:hidden } .lk-proporcion__barra{ display:flex; height:38px } .lk-proporcion__barra > *{ display:flex; align-items:center; padding-left:12px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; overflow:hidden; white-space:nowrap; } .lk-proporcion__neutro{ flex:0 0 66%; background:var(--surface-2); color:var(--ink-tenue) } .lk-proporcion__acero{ flex:0 0 25%; background:var(--steel); color:var(--bg) } .lk-proporcion__acento{ flex:0 0 9%; background:var(--accent); color:var(--on-accent) } /* ══ 25 · UTILIDADES ══════════════════════════════════════════════ */ .lk-acento{ color:var(--accent) } .lk-acero{ color:var(--steel) } .lk-sr{ /* solo para lectores de pantalla */ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .lk-scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch } /* ══ 26 · PROHIBIDO ═══════════════════════════════════════════════ Estas reglas no existen en Lukso. Si hacen falta, el diseño está mal. · box-shadow / drop-shadow → jerarquía por contraste y aire · linear-gradient como relleno → todo mate · border-radius > 2px → el remate es recto · el burdeos como fondo de sección → < 10 % de superficie · un segundo color de acento → burdeos y acero, nada más · text-transform en titulares → las mayúsculas son de etiqueta · recomponer el logotipo con texto → usa el SVG trazado · Montserrat, o cualquier 4ª fuente → Crimson · Schibsted · Plex Mono ========================================================================= */