/* ============================================================================ PIELES DE MARCA Cada negocio de la red tiene su identidad. Este archivo define las pieles y `brand.js` decide cuál poner (atributo data-brand en ) antes del primer paint, para que la página nunca parpadee con la marca equivocada. CONTRATO — cada piel define sus tokens en los TRES estados de tema. En este sistema el OSCURO es el estado base (theme.js quita el atributo para oscuro y estampa data-theme="light" para claro), así que: · bloque a secas → tema OSCURO · @media (prefers-color-scheme:light) → tema claro por sistema · [data-theme="light"] → tema claro elegido a mano Un token declarado en un solo estado deja la página ilegible en el otro. Y ojo con el orden: una regla posterior de la misma especificidad pisa a las de tema, así que no se agregan reglas sueltas después de los bloques de una piel. Los componentes NUNCA nombran un color aquí: leen --brand-* desde sp-os.css. Precedencia: sp-os.css define la piel LEONS como default en :root. Este archivo se carga DESPUÉS y solo pisa lo que corresponda a la piel activa. ============================================================================ */ /* ──────────────────────────────────────────────────────────────────────────── LEONS — oro ejecutivo sobre negro, serif de lujo. EXCLUSIVA de SP Leons Group (empresa #1). Ningún otro negocio la recibe. Es idéntica al default de sp-os.css: existe explícita para que el atributo data-brand="leons" sea significativo y para documentar qué es "lo de Leons". ──────────────────────────────────────────────────────────────────────────── */ [data-brand="leons"] { --brand: #FFD76A; --brand-2: #FFE08A; --brand-deep: #C07F1E; --brand-ink: #FFD76A; /* marca como TEXTO — valor del tema oscuro */ --brand-on: #0A0A0A; --brand-soft: rgba(255, 215, 106, .16); --brand-line: rgba(255, 215, 106, .38); --brand-glow: rgba(212, 175, 55, .16); --brand-glow-2: rgba(212, 175, 55, .30); --grad-brand: linear-gradient(140deg, var(--brand-2), var(--brand) 52%, #E8A93E); --f-brand-title: 'Cinzel', Georgia, 'Times New Roman', serif; --f-brand-weight: 600; --f-brand-tracking: .02em; --f-brand-tracking-wide: .16em; /* wordmark: la serif de lujo pide aire */ /* Superficies: las declara también aquí (no solo en sp-os.css) porque login.html no carga sp-os.css — tiene su propio set de tokens y lee éstos. Cada piel describe su mundo completo. */ --bg-0: #060606; --bg-1: #101010; --bg-2: #161616; --bg-3: #1B1B1B; --bg-4: #232323; --border: #252525; --border-soft: #1E1E1E; --border-strong: #313131; --text: #F8F8F8; --text-2: rgba(248,248,248,.62); --text-3: rgba(248,248,248,.38); --text-4: rgba(248,248,248,.20); } /* Leons nace OSCURO (el bloque de arriba); su tema claro es el que invierte. Nada de reglas después de éstas para la misma piel: una regla posterior con la misma especificidad pisaría el tema claro y dejaría el oro sobre marfil. */ @media (prefers-color-scheme: light) { [data-brand="leons"]:not([data-theme="dark"]) { --brand-ink: #7D5F24; /* sobre marfil el oro baja para pasar AA */ --bg-0: #F4EFE3; --bg-1: #FAF6ED; --bg-2: #FFFCF4; --bg-3: #F3EDDC; --bg-4: #E9E1CC; --border: #E0D7BF; --border-soft: #E9E1CD; --border-strong: #D2C7A7; --text: #221C10; --text-2: rgba(34,28,16,.66); --text-3: rgba(34,28,16,.47); --text-4: rgba(34,28,16,.24); } } [data-brand="leons"][data-theme="light"] { --brand-ink: #7D5F24; --bg-0: #F4EFE3; --bg-1: #FAF6ED; --bg-2: #FFFCF4; --bg-3: #F3EDDC; --bg-4: #E9E1CC; --border: #E0D7BF; --border-soft: #E9E1CD; --border-strong: #D2C7A7; --text: #221C10; --text-2: rgba(34,28,16,.66); --text-3: rgba(34,28,16,.47); --text-4: rgba(34,28,16,.24); } /* ──────────────────────────────────────────────────────────────────────────── VID.A — la identidad de la red. Rojo mate sobre grafito, tipografía moderna. Deliberadamente lo contrario del lujo dorado de Leons: sin serifas, sin brillo metálico, superficies mate. El rojo es apagado (no bermellón de alerta) para que conviva con el rojo semántico de error sin confundirse con él. La tipografía de títulos es Inter en peso alto con tracking cerrado — la misma familia variable que ya usa la interfaz, así que no descarga nada nuevo. ──────────────────────────────────────────────────────────────────────────── */ [data-brand="vida"] { --brand: #C2453C; /* rojo mate — el acento */ --brand-2: #DC6459; /* su tono claro */ --brand-deep: #7A211D; /* su tono profundo */ --brand-ink: #E8776D; /* marca como TEXTO sobre grafito */ --brand-on: #FFF4F2; /* texto SOBRE el rojo */ --brand-soft: rgba(194, 69, 60, .15); --brand-line: rgba(194, 69, 60, .34); --brand-glow: rgba(194, 69, 60, .16); --brand-glow-2: rgba(194, 69, 60, .28); --grad-brand: linear-gradient(140deg, var(--brand-2), var(--brand) 55%, var(--brand-deep)); --f-brand-title: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --f-brand-weight: 700; --f-brand-tracking: -.014em; /* sans moderna: tracking cerrado, no abierto */ --f-brand-tracking-wide: .07em; /* wordmark: Inter bold no necesita tanto aire */ /* Grafito con carga roja — negro con temperatura, no negro neutro. Superficies mate: sin el brillo cálido del marfil de Leons. */ --bg-0: #0C0A0A; --bg-1: #141110; --bg-2: #1A1615; --bg-3: #211C1B; --bg-4: #2A2322; --border: #2B2423; --border-soft: #221C1B; --border-strong: #3A3130; --text: #F4F0EF; --text-2: rgba(244,240,239,.64); --text-3: rgba(244,240,239,.40); --text-4: rgba(244,240,239,.20); } /* Tema claro de Vid.a: papel técnico gris con una pizca de rojo, para que el acento no flote sobre un gris muerto. El rojo baja de luminosidad para pasar AA. */ @media (prefers-color-scheme: light) { [data-brand="vida"]:not([data-theme="dark"]) { --brand-ink: #9E2F29; /* 5.6:1 sobre --bg-1 */ --brand-soft: rgba(194, 69, 60, .10); --brand-line: rgba(194, 69, 60, .26); --brand-glow: rgba(194, 69, 60, .12); --brand-glow-2: rgba(194, 69, 60, .22); --bg-0: #F2EFEE; --bg-1: #FAF8F7; --bg-2: #FFFFFF; --bg-3: #F0ECEB; --bg-4: #E7E1E0; --border: #DFD8D7; --border-soft: #EAE4E3; --border-strong: #CBC1C0; --text: #1C1817; --text-2: rgba(28,24,23,.66); --text-3: rgba(28,24,23,.46); --text-4: rgba(28,24,23,.24); } } [data-brand="vida"][data-theme="light"] { --brand-ink: #9E2F29; --brand-soft: rgba(194, 69, 60, .10); --brand-line: rgba(194, 69, 60, .26); --brand-glow: rgba(194, 69, 60, .12); --brand-glow-2: rgba(194, 69, 60, .22); --bg-0: #F2EFEE; --bg-1: #FAF8F7; --bg-2: #FFFFFF; --bg-3: #F0ECEB; --bg-4: #E7E1E0; --border: #DFD8D7; --border-soft: #EAE4E3; --border-strong: #CBC1C0; --text: #1C1817; --text-2: rgba(28,24,23,.66); --text-3: rgba(28,24,23,.46); --text-4: rgba(28,24,23,.24); } /* La aurora de Vid.a es más contenida que la de Leons: un solo halo rojo tenue en vez de tres orbes dorados. La atmósfera acompaña, no compite con el contenido. */ [data-brand="vida"] { --aurora-1a: color-mix(in srgb, var(--brand) 9%, transparent); --aurora-1b: transparent; --aurora-2a: color-mix(in srgb, var(--brand) 5%, transparent); --aurora-2b: transparent; --aurora-3a: transparent; --aurora-3b: transparent; --aurora-gold-1: color-mix(in srgb, var(--brand) 12%, transparent); --aurora-gold-2: color-mix(in srgb, var(--brand-deep) 8%, transparent); --aurora-gold-3: transparent; --aurora-green: transparent; } /* ──────────────────────────────────────────────────────────────────────────── NOIR — blanco y negro editorial. Primera piel nacida del ADN de una isla (Wolf Street, `Vid.a/Negocios/Wolf Street/ADN Visual/`): Obsidian #070707, Graphite #17181A, Steel Silver #8D9296, Warm Ivory #EBE1D5. "Low-key cinematic lighting": negro neutro sin temperatura (ni el oro de Leons ni el rojo de la red), el acento es marfil y el degradado es metal plateado, no dorado. Títulos en Playfair Display (la del ADN, autoalojada en /fonts/) con tracking muy abierto, como el wordmark. Nunca Cinzel ni Cormorant: son las serifs de Leons. Si la isla guarda un color_primario (p. ej. el champagne #B89A69), brand.js lo pone como acento encima — la estructura sigue siendo blanco y negro. ──────────────────────────────────────────────────────────────────────────── */ [data-brand="noir"] { --brand: #EBE1D5; /* marfil — el "blanco" del ADN */ --brand-2: #FFFFFF; --brand-deep: #8D9296; /* acero — el extremo frío del degradado */ --brand-ink: #EBE1D5; --brand-on: #070707; /* texto SOBRE el marfil: obsidiana */ --brand-soft: rgba(235, 225, 213, .09); --brand-line: rgba(235, 225, 213, .20); --brand-glow: rgba(235, 225, 213, .05); --brand-glow-2: rgba(235, 225, 213, .12); --grad-brand: linear-gradient(140deg, #FFFFFF, #EBE1D5 48%, #8D9296); --f-brand-title: 'Playfair Display', Georgia, 'Times New Roman', serif; --f-brand-weight: 600; --f-brand-tracking: .01em; --f-brand-tracking-wide: .26em; /* W O L F S T R E E T */ /* Obsidiana y grafito neutros: sin carga roja ni cálida. */ --bg-0: #050505; --bg-1: #0A0A0B; --bg-2: #101112; --bg-3: #17181A; --bg-4: #1F2023; --border: #222326; --border-soft: #19191B; --border-strong: #34363A; --text: #F2EFEA; --text-2: rgba(242,239,234,.62); --text-3: rgba(242,239,234,.38); --text-4: rgba(242,239,234,.18); /* Atmósfera: una sola luz de recorte arriba, casi nada más. Sin orbes de color. */ --aurora-1a: rgba(255,255,255,.035); --aurora-1b: transparent; --aurora-2a: transparent; --aurora-2b: transparent; --aurora-3a: transparent; --aurora-3b: transparent; --aurora-gold-1: rgba(235,225,213,.045); --aurora-gold-2: transparent; --aurora-gold-3: transparent; --aurora-green: transparent; } /* Claro: papel marfil con tinta negra — el acento pasa a ser el negro. */ @media (prefers-color-scheme: light) { [data-brand="noir"]:not([data-theme="dark"]) { --brand: #111111; --brand-2: #3A3B3E; --brand-deep: #000000; --brand-ink: #111111; --brand-on: #F5F2EC; --brand-soft: rgba(17,17,17,.06); --brand-line: rgba(17,17,17,.18); --brand-glow: rgba(17,17,17,.05); --brand-glow-2: rgba(17,17,17,.10); --grad-brand: linear-gradient(140deg, #3A3B3E, #111111 55%, #000000); --bg-0: #F1EFEB; --bg-1: #F8F7F4; --bg-2: #FFFFFF; --bg-3: #ECE9E4; --bg-4: #E1DDD6; --border: #DAD6CF; --border-soft: #E6E3DD; --border-strong: #C4BFB6; --text: #0B0B0C; --text-2: rgba(11,11,12,.66); --text-3: rgba(11,11,12,.46); --text-4: rgba(11,11,12,.22); --aurora-1a: transparent; --aurora-gold-1: transparent; } } [data-brand="noir"][data-theme="light"] { --brand: #111111; --brand-2: #3A3B3E; --brand-deep: #000000; --brand-ink: #111111; --brand-on: #F5F2EC; --brand-soft: rgba(17,17,17,.06); --brand-line: rgba(17,17,17,.18); --brand-glow: rgba(17,17,17,.05); --brand-glow-2: rgba(17,17,17,.10); --grad-brand: linear-gradient(140deg, #3A3B3E, #111111 55%, #000000); --bg-0: #F1EFEB; --bg-1: #F8F7F4; --bg-2: #FFFFFF; --bg-3: #ECE9E4; --bg-4: #E1DDD6; --border: #DAD6CF; --border-soft: #E6E3DD; --border-strong: #C4BFB6; --text: #0B0B0C; --text-2: rgba(11,11,12,.66); --text-3: rgba(11,11,12,.46); --text-4: rgba(11,11,12,.22); --aurora-1a: transparent; --aurora-gold-1: transparent; } /* El botón primario de Vid.a lleva texto claro sobre el rojo; el de Leons, negro sobre el oro. Es el único punto donde el color del texto depende de la piel. */ [data-brand="vida"] .btn--gold, [data-brand="vida"] .tabs--pill .tabs__item.active, [data-brand="noir"] .btn--gold, [data-brand="noir"] .tabs--pill .tabs__item.active { color: var(--brand-on); } /* Los títulos toman peso y tracking de la piel. En Leons no cambia nada (600/.02em); en Vid.a pasan a Inter 700 con tracking cerrado. */ [data-brand] .t-brand, [data-brand] .os-brand__name, [data-brand] .metric__value { font-weight: var(--f-brand-weight); letter-spacing: var(--f-brand-tracking); } /* Noir escribe su nombre como el wordmark del ADN: mayúsculas con mucho aire (W O L F S T R E E T). Va después de la regla genérica de arriba para ganarle. */ [data-brand="noir"] .os-brand__name { text-transform: uppercase; letter-spacing: var(--f-brand-tracking-wide); font-size: 13px; } /* Monograma: lo que ve un negocio que aún no subió su logo. La inicial sobre su propio acento — nunca el logotipo de otra empresa. Lo inserta brand.js dentro del mismo contenedor donde vivía el . */ .brand-mono { display: grid; place-items: center; width: 100%; height: 100%; min-width: 44px; min-height: 44px; border-radius: 14px; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand-ink); font-family: var(--f-brand-title); font-weight: var(--f-brand-weight, 700); font-size: 1.4rem; letter-spacing: 0; line-height: 1; }