/* ================================================================ TACU · Brand Base CSS v2.0 ================================================================ Estructura compartida del sistema de marca. Este archivo NO incluye colores de productos — importar brand-.css para cada producto que necesites. DEPENDENCIA DE FUENTES — agregar en antes de este archivo: ─── FORMATOS DISPONIBLES ──────────────────────────────────────── FORMAT 1 · Icon .brand .brand--icon módulo solo mín 32px FORMAT 2 · Compact .brand + wordmark mín 48px FORMAT 3 · Full .brand .brand--full + descriptor mín 72px ─── TAMAÑOS ───────────────────────────────────────────────────── .brand--32 .brand--48 .brand--72 .brand--96 (default) .brand--120 Los tamaños auto-ocultan elementos según las reglas de mínimos: · < 72px → oculta descriptor · < 48px → oculta wordmark (solo módulo visible) ─── FONDOS ────────────────────────────────────────────────────── (sin modificador) = fondo claro .brand--dark = fondo oscuro (navy o de color) ─── USO ───────────────────────────────────────────────────────── Para usar un producto, incluir: ================================================================ */ /* ────────────────────────────────────────────────────────────────── 1. DESIGN TOKENS — paleta base Tacu ────────────────────────────────────────────────────────────────── */ :root { /* Paleta oficial Tacu (Wala Creativa) */ --tacu-navy: #032B44; --tacu-green: #04D89D; /* slash — reservado, NO usar como fondo de módulo */ --tacu-mint: #99F5BE; --tacu-white: #FAFAFA; /* UI / texto */ --brand-charcoal: #2D3142; --brand-muted: #6B7A8A; } /* ────────────────────────────────────────────────────────────────── 2. ESTRUCTURA BASE --sz es la variable maestra: cambiando solo ese valor escala todo. ────────────────────────────────────────────────────────────────── */ .brand { --sz: 96px; /* default — sobrescribir con .brand--XX */ --radius: calc(var(--sz) * 0.22); display: inline-flex; align-items: flex-start; gap: calc(var(--sz) * 0.18); line-height: 1; } /* Módulo 1:1 */ .brand .module { width: var(--sz); height: var(--sz); border-radius: var(--radius); flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* Emblema interior */ .brand .emblem { display: flex; align-items: center; gap: calc(var(--sz) * 0.03); } /* Slash — color siempre verde teal oficial, nunca cambiar */ .brand .slash { display: block; width: calc(var(--sz) * 0.082); height: calc(var(--sz) * 0.35); background: var(--tacu-green); transform: skewX(-14deg); border-radius: calc(var(--sz) * 0.025); flex-shrink: 0; margin-left: calc(var(--sz) * 0.052); } /* Chevron SVG — path stroked con caps redondeados */ .brand .chevron { width: calc(var(--sz) * 0.26); height: calc(var(--sz) * 0.35); flex-shrink: 0; overflow: visible; margin-left: calc(var(--sz) * 0.01); } /* Inicial — Nunito 900 */ .brand .initial { font-family: 'Nunito', sans-serif; font-weight: 900; line-height: 1; letter-spacing: -0.02em; font-size: calc(var(--sz) * 0.62); } /* Columna: wordmark + descriptor */ .brand .wm-stack { display: flex; flex-direction: column; gap: 4px; padding-top: calc(var(--sz) * 0.20); } /* Wordmark — Nunito 800 */ .brand .wordmark { font-family: 'Nunito', sans-serif; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-size: calc(var(--sz) * 0.60); display: flex; align-items: baseline; margin-left: calc(var(--sz) * -0.156); color: var(--brand-charcoal); } /* Descriptor — Source Code Pro */ .brand .descriptor { font-family: 'Source Code Pro', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-muted); margin-left: calc(var(--sz) * -0.104); margin-top: 0; } /* ────────────────────────────────────────────────────────────────── 3. FORMATOS (qué elementos se muestran) ────────────────────────────────────────────────────────────────── */ /* FORMAT 1 · Icon — módulo solo Usar cuando el espacio es reducido o para app icons / avatares. Mínimo recomendado: 32px de módulo. */ .brand--icon .wm-stack { display: none; } /* FORMAT 2 · Compact — módulo + wordmark Uso recomendado: navegación, headers, footers, listas de productos. Es el formato por defecto (sin modificador de formato). El descriptor se incluye en el HTML pero se oculta automáticamente con las reglas de tamaño, o puede omitirse del HTML directamente. Mínimo recomendado: 48px de módulo. */ /* FORMAT 3 · Full — módulo + wordmark + descriptor Incluir .brand--full para indicar uso explícito de versión completa. Usar en: landings, secciones hero, presentaciones, manual de marca. Mínimo recomendado: 72px de módulo. */ /* (sin override necesario — todos los elementos presentes por defecto) */ /* ────────────────────────────────────────────────────────────────── 4. TAMAÑOS + reglas automáticas de ocultamiento Las reglas de auto-ocultamiento implementan los mínimos del sistema: · módulo < 48px → ocultar wordmark (solo módulo) · módulo < 72px → ocultar descriptor ────────────────────────────────────────────────────────────────── */ .brand--32 { --sz: 32px; } .brand--48 { --sz: 48px; } .brand--64 { --sz: 64px; } .brand--72 { --sz: 72px; } .brand--96 { --sz: 96px; } /* ← default */ .brand--120 { --sz: 120px; } /* 32px → solo módulo (ocultar todo texto) */ .brand--32 .wm-stack { display: none; } /* 48px y 64px → ocultar descriptor, mantener wordmark */ .brand--48 .descriptor, .brand--64 .descriptor { display: none; } /* 72px+ → descriptor visible (sin override) */ /* ────────────────────────────────────────────────────────────────── 5. VARIANTE DARK — fondo oscuro (reglas base) Agregar .brand--dark al elemento .brand cuando el logo aparezca sobre fondos oscuros (navy, de color, fotografías). Cada brand-.css puede agregar overrides específicos. ────────────────────────────────────────────────────────────────── */ .brand--dark .wordmark { color: var(--tacu-white); } .brand--dark .descriptor { color: rgba(255, 255, 255, 0.38); } /* ────────────────────────────────────────────────────────────────── 6. UTILIDADES OPCIONALES Clases auxiliares para composición en páginas. ────────────────────────────────────────────────────────────────── */ /* Bloque — hace que .brand ocupe ancho completo (en lugar de inline) */ .brand--block { display: flex; } /* Centrado — útil en footers o secciones hero */ .brand--center { display: flex; justify-content: center; }