/* ============================================================
Guestify · Access — Brand System (compartido por todas las apps)
v1.0 · Mayo 2026
============================================================ */
/* ---- Fuentes ---- */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Lato:wght@300;400;700;900&family=JetBrains+Mono:wght@500;600&display=swap');
/* ---- Tokens ---- */
:root {
/* Colores canónicos */
--teal: #00A5BA;
--teal-deep: #007E8E;
--teal-600: #008CA0;
--teal-50: #E6F6F8;
--coral: #EA5355;
--coral-50: #FDECEC;
--orange: #F1894C;
--orange-50: #FDEFE5;
--green: #2E9D6E;
--green-50: #E6F4EE;
--ink: #3F3F3E;
--ink-soft: #6B6B6A;
--cream: #FBF8F3;
--white: #FFFFFF;
--line: #E6E4DF;
--line-strong: #C9C6BF;
/* Sombras */
--shadow-sm: 0 1px 3px rgba(63,63,62,.06);
--shadow-md: 0 6px 18px rgba(63,63,62,.08);
--shadow-lg: 0 24px 50px rgba(63,63,62,.10);
/* Radii estándar */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-xl: 24px;
}
/* ---- Tipografía base ---- */
h1, h2, h3, h4 {
font-family: 'Jost', sans-serif;
color: var(--ink);
}
h1 { font-weight: 500; letter-spacing: -.025em; line-height: 1.02; }
h2 { font-weight: 500; letter-spacing: -.012em; line-height: 1.1; }
h3 { font-weight: 600; letter-spacing: -.005em; line-height: 1.25; }
h4 { font-weight: 600; letter-spacing: -.005em; line-height: 1.3; }
/* ---- Utilidad mono ---- */
.mono {
font-family: 'JetBrains Mono', monospace;
font-weight: 500;
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
}
/* ============================================================
LOCKUP (Logo Guestify | Access) — para usar en todas las apps
Estructura:
Guestify
|
Access
============================================================ */
.gx-lockup {
display: inline-flex;
align-items: center;
gap: 12px;
line-height: 1;
text-decoration: none;
color: var(--ink);
}
.gx-lockup:hover { text-decoration: none; }
.gx-pills { width: 32px; height: 32px; flex-shrink: 0; }
.gx-word {
font-family: 'Jost', sans-serif;
font-size: 19px;
letter-spacing: -.01em;
color: var(--ink);
display: flex;
align-items: baseline;
gap: 8px;
}
.gx-word .g { font-weight: 400; }
.gx-word .pipe { color: var(--ink-soft); opacity: .5; font-weight: 300; }
.gx-word .a { font-weight: 600; color: var(--teal); }
/* Variante pequeña (para sidebars compactos) */
.gx-lockup.sm .gx-pills { width: 26px; height: 26px; }
.gx-lockup.sm .gx-word { font-size: 16px; gap: 6px; }
/* Variante sobre fondo oscuro */
.gx-lockup.inverse .gx-word,
.gx-lockup.inverse .gx-word .g { color: var(--white); }
.gx-lockup.inverse .gx-word .pipe { color: rgba(255,255,255,.4); }
.gx-lockup.inverse .gx-word .a { color: #5FD4E5; }
/* ============================================================
SVG SYMBOL — debe insertarse una sola vez por página
Usado por
============================================================ */
/* (El símbolo va inline en el , no como CSS. Ver instrucciones de aplicación.) */