/* ================================================================
ALGEDI & ANTARES LEGACY — Brand Guide
================================================================
Archivo de identidad visual del family office.
Incluye: paleta de colores, tipografía, logo CSS y componentes
base reutilizables en cualquier proyecto hermano.
USO EN DASHBOARD:
Agrega al de tu HTML:
O copia el bloque :root en tu propio CSS y ajusta los valores
según el contexto del dashboard (dark mode, etc.)
================================================================ */
/* ── 1. GOOGLE FONTS ─────────────────────────────────────────
Pega este bloque en el de tu HTML ANTES del CSS:
────────────────────────────────────────────────────────────── */
/* ── 2. PALETA DE COLORES ────────────────────────────────────
Estilo: "old money" — sobrio, elegante, sin gradientes
agresivos, sin colores brillantes, sin dark mode.
────────────────────────────────────────────────────────────── */
:root {
/* Fondos */
--aa-bg: #F5F0E8; /* crema principal — fondo de página */
--aa-bg-alt: #EDE8DC; /* beige — secciones alternadas, filas par */
--aa-surface: #FDFAF5; /* blanco roto — cards, modales, panels */
--aa-dark: #1A1208; /* café muy oscuro — hero, headers oscuros */
/* Texto */
--aa-text: #2C2416; /* café oscuro — texto principal */
--aa-text-muted: #7A6A52; /* café medio — subtítulos, placeholders */
--aa-text-light: rgba(255, 255, 255, 0.75); /* texto sobre fondos oscuros */
--aa-text-dim: rgba(255, 255, 255, 0.40); /* texto secundario oscuro */
/* Acento / CTA */
--aa-accent: #8B6F47; /* café dorado — botones primarios, links */
--aa-accent-hover:#6E5535; /* café oscuro — hover de botones */
/* Decorativos */
--aa-gold: #C4A265; /* dorado suave — eyebrows, íconos, detalles */
--aa-border: #D4C9B0; /* beige borde — separadores, bordes de cards */
/* Sombras */
--aa-shadow-sm: 0 1px 4px rgba(44, 36, 22, 0.08);
--aa-shadow-md: 0 4px 16px rgba(44, 36, 22, 0.10);
--aa-shadow-lg: 0 8px 32px rgba(44, 36, 22, 0.14);
/* Utilidades */
--aa-radius: 4px;
--aa-radius-lg: 8px;
--aa-transition: 0.25s ease;
/* ── 3. TIPOGRAFÍA ──────────────────────────────────────────
Cinzel → headings, navbar, labels, badges (Trajan Pro web)
EB Garamond → body, párrafos, subtítulos, itálicas
────────────────────────────────────────────────────────────── */
--aa-font-heading: 'Cinzel', serif;
--aa-font-body: 'EB Garamond', serif;
/* Escala tipográfica */
--aa-text-xs: 0.65rem; /* badges, micro labels */
--aa-text-sm: 0.82rem; /* captions, meta info */
--aa-text-base: 1rem; /* texto normal */
--aa-text-lg: 1.1rem; /* párrafos destacados */
--aa-text-xl: 1.3rem; /* subtítulos */
--aa-text-2xl: 1.6rem; /* títulos de sección */
--aa-text-3xl: 2.2rem; /* títulos de página */
--aa-text-4xl: 3rem; /* hero titles */
/* Letter spacing */
--aa-tracking-tight: 0.04em;
--aa-tracking-normal: 0.08em;
--aa-tracking-wide: 0.14em;
--aa-tracking-wider: 0.20em;
--aa-tracking-widest: 0.25em;
}
/* ── 4. LOGO EN CSS ──────────────────────────────────────────
Estructura HTML del logo:
Algedi & Antares
Legacy
────────────────────────────────────────────────────────────── */
.aa-logo {
display: inline-flex;
flex-direction: column;
line-height: 1.1;
text-decoration: none;
gap: 0.1rem;
}
.aa-logo__name {
font-family: var(--aa-font-heading);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: var(--aa-tracking-normal);
color: var(--aa-text);
white-space: nowrap;
}
.aa-logo__amp {
color: var(--aa-gold);
}
.aa-logo__sub {
font-family: var(--aa-font-body);
font-style: italic;
font-size: 0.72rem;
letter-spacing: var(--aa-tracking-wider);
color: var(--aa-text-muted);
}
/* Variante clara (sobre fondos oscuros) */
.aa-logo--light .aa-logo__name {
color: var(--aa-surface);
}
.aa-logo--light .aa-logo__sub {
color: rgba(255, 255, 255, 0.60);
}
/* Variante grande */
.aa-logo--lg .aa-logo__name {
font-size: 1.4rem;
}
.aa-logo--lg .aa-logo__sub {
font-size: 0.9rem;
}
/* ── 5. EYEBROW (label dorado sobre títulos) ─────────────────
Quiénes somos
────────────────────────────────────────────────────────────── */
.aa-eyebrow {
font-family: var(--aa-font-heading);
font-size: var(--aa-text-xs);
font-weight: 500;
letter-spacing: var(--aa-tracking-widest);
text-transform: uppercase;
color: var(--aa-gold);
margin-bottom: 0.75rem;
}
/* ── 6. BADGES ───────────────────────────────────────────────
Activo
Próximamente
────────────────────────────────────────────────────────────── */
.aa-badge {
font-family: var(--aa-font-heading);
font-size: var(--aa-text-xs);
letter-spacing: var(--aa-tracking-wide);
text-transform: uppercase;
padding: 0.22rem 0.65rem;
border-radius: 2px;
display: inline-block;
white-space: nowrap;
}
.aa-badge--active {
background-color: rgba(139, 111, 71, 0.12);
color: var(--aa-accent);
}
.aa-badge--soon {
background-color: transparent;
color: var(--aa-text-muted);
border: 1px solid var(--aa-border);
}
.aa-badge--gold {
background-color: rgba(196, 162, 101, 0.15);
color: var(--aa-gold);
}
/* ── 7. BOTONES ──────────────────────────────────────────────
Ver Dashboard →
Nuestra Filosofía
En desarrollo
────────────────────────────────────────────────────────────── */
.aa-btn {
display: inline-block;
font-family: var(--aa-font-heading);
font-size: var(--aa-text-xs);
font-weight: 500;
letter-spacing: var(--aa-tracking-normal);
text-transform: uppercase;
padding: 0.75rem 2rem;
border-radius: var(--aa-radius);
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition:
background-color var(--aa-transition),
color var(--aa-transition),
border-color var(--aa-transition);
}
.aa-btn--primary {
background-color: var(--aa-accent);
color: var(--aa-surface);
border-color: var(--aa-accent);
}
.aa-btn--primary:hover {
background-color: var(--aa-accent-hover);
border-color: var(--aa-accent-hover);
}
.aa-btn--ghost {
background-color: transparent;
color: var(--aa-accent);
border-color: var(--aa-border);
}
.aa-btn--ghost:hover {
background-color: rgba(139, 111, 71, 0.08);
border-color: var(--aa-accent);
}
.aa-btn--ghost-light {
background-color: transparent;
color: var(--aa-surface);
border-color: rgba(255, 255, 255, 0.55);
}
.aa-btn--ghost-light:hover {
background-color: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.85);
}
.aa-btn--disabled {
background-color: transparent;
color: var(--aa-text-muted);
border-color: var(--aa-border);
cursor: default;
opacity: 0.65;
pointer-events: none;
}
/* ── 8. DIVIDER DECORATIVO ───────────────────────────────────
────────────────────────────────────────────────────────────── */
.aa-divider {
width: 48px;
height: 1px;
background-color: var(--aa-gold);
margin-block: 1.5rem;
}
.aa-divider--full {
width: 100%;
background-color: var(--aa-border);
}
/* ── 9. CARD BASE ────────────────────────────────────────────
...
────────────────────────────────────────────────────────────── */
.aa-card {
background-color: var(--aa-surface);
border: 1px solid var(--aa-border);
border-radius: var(--aa-radius);
padding: 1.75rem 1.5rem;
transition:
box-shadow var(--aa-transition),
border-color var(--aa-transition),
transform var(--aa-transition);
}
.aa-card--active {
border-color: var(--aa-gold);
}
.aa-card--active:hover {
box-shadow: var(--aa-shadow-lg);
transform: translateY(-3px);
border-color: var(--aa-accent);
}
.aa-card--muted {
opacity: 0.6;
}
/* ── 10. FADE-IN (animación de entrada) ──────────────────────
JS: el.classList.add('aa-fade-in')
→ cuando visible: el.classList.add('visible')
────────────────────────────────────────────────────────────── */
.aa-fade-in {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.aa-fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* ================================================================
REFERENCIA RÁPIDA DE COLORES
================================================================
FONDOS
──────────────────────────────────────────────────
#F5F0E8 --aa-bg crema principal
#EDE8DC --aa-bg-alt beige alternado
#FDFAF5 --aa-surface blanco roto (cards)
#1A1208 --aa-dark café muy oscuro (hero)
TEXTO
──────────────────────────────────────────────────
#2C2416 --aa-text texto principal
#7A6A52 --aa-text-muted texto secundario
ACENTO
──────────────────────────────────────────────────
#8B6F47 --aa-accent café dorado (CTAs)
#6E5535 --aa-accent-hover
#C4A265 --aa-gold dorado decorativo
BORDES
──────────────────────────────────────────────────
#D4C9B0 --aa-border beige borde
TIPOGRAFÍA
──────────────────────────────────────────────────
Cinzel → headings, labels, navbar
EB Garamond → body, párrafos, itálicas
Google Fonts URL:
https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600
&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap
================================================================ */