/* ================================================================
genIA · Logo CSS — Tacu Brand System
================================================================
Archivo autocontenido. Incluye base + colores genIA + dark.
DEPENDENCIA — agregar en antes de este archivo:
enIA
Inteligencia Artificial
Fondo oscuro: agregar .brand--dark.
Tamaños: .brand--32 .brand--48 .brand--64 .brand--72 .brand--96 .brand--120
================================================================ */
/* ──────────────────────────────────────────────────────────────────
DESIGN TOKENS
────────────────────────────────────────────────────────────────── */
:root {
--tacu-navy: #032B44;
--tacu-green: #04D89D;
--tacu-white: #FAFAFA;
--genia-color: #7147B8;
--brand-charcoal: #2D3142;
--brand-muted: #6B7A8A;
}
/* ──────────────────────────────────────────────────────────────────
ESTRUCTURA BASE
────────────────────────────────────────────────────────────────── */
.brand {
--sz: 96px;
--radius: calc(var(--sz) * 0.22);
display: inline-flex;
align-items: flex-start;
gap: calc(var(--sz) * 0.18);
line-height: 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;
}
.brand .emblem {
display: flex;
align-items: center;
gap: calc(var(--sz) * 0.03);
}
.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);
}
.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);
}
.brand .initial {
font-family: 'Nunito', sans-serif;
font-weight: 900;
line-height: 1;
letter-spacing: -0.02em;
font-size: calc(var(--sz) * 0.62);
}
.brand .wm-stack {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: calc(var(--sz) * 0.20);
}
.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);
}
.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: calc(var(--sz) * 0.146);
}
/* ──────────────────────────────────────────────────────────────────
FORMATOS
────────────────────────────────────────────────────────────────── */
.brand--icon .wm-stack {
display: none;
}
/* ──────────────────────────────────────────────────────────────────
TAMAÑOS
────────────────────────────────────────────────────────────────── */
.brand--32 {
--sz: 32px;
}
.brand--48 {
--sz: 48px;
}
.brand--64 {
--sz: 64px;
}
.brand--72 {
--sz: 72px;
}
.brand--96 {
--sz: 96px;
}
.brand--120 {
--sz: 120px;
}
.brand--32 .wm-stack {
display: none;
}
.brand--48 .descriptor,
.brand--64 .descriptor {
display: none;
}
/* ──────────────────────────────────────────────────────────────────
COLORES — genIA
Módulo: púrpura · Inicial: blanco · Chevron: blanco
.ia = teal-green para "IA" en el wordmark
────────────────────────────────────────────────────────────────── */
.brand--genia .module {
background: var(--genia-color);
}
.brand--genia .initial {
color: var(--tacu-white);
}
.brand--genia .chevron {
color: var(--tacu-white);
}
.brand--genia .wordmark .ia {
color: var(--tacu-green);
font-weight: 900;
}
/* ──────────────────────────────────────────────────────────────────
VARIANTE DARK — fondo oscuro
────────────────────────────────────────────────────────────────── */
.brand--dark .wordmark {
color: var(--tacu-white);
}
.brand--dark .descriptor {
color: rgba(255, 255, 255, 0.38);
}
.brand--dark.brand--genia .wordmark {
color: var(--tacu-white);
}
.brand--dark.brand--genia .wordmark .ia {
color: var(--tacu-green);
}
/* ──────────────────────────────────────────────────────────────────
UTILIDADES
────────────────────────────────────────────────────────────────── */
.brand--block {
display: flex;
}
.brand--center {
display: flex;
justify-content: center;
}