/* ========================================================================= DESIGN SYSTEM v1.0 ========================================================================= Tipografía: Oxygen (headings) + Nunito (body, botones) Color primario: Royal Blue 100 Color hover/accent: Brilliant Rose 100 Sin gradientes — solo fondos sólidos ========================================================================= */ /* ========================================================================= 1. IMPORT FONTS Importa esto en tu HTML o conserva @import al inicio del CSS: ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&family=Nunito:wght@300;400;500;600;700;800&display=swap'); /* ========================================================================= 2. DESIGN TOKENS (CSS VARIABLES) ========================================================================= */ :root { /* ---------- COLOR · BRILLIANT ROSE (hover / accent) ---------- */ --primary-brilliant-rose-100: rgba(244, 91, 193, 1); --primary-brilliant-rose-90: rgba(246, 108, 200, 1); --primary-brilliant-rose-80: rgba(245, 123, 204, 1); --primary-brilliant-rose-70: rgba(247, 140, 211, 1); --primary-brilliant-rose-60: rgba(247, 156, 217, 1); --primary-brilliant-rose-50: rgba(248, 171, 222, 1); --primary-brilliant-rose-40: rgba(249, 187, 228, 1); --primary-brilliant-rose-30: rgba(250, 204, 235, 1); --primary-brilliant-rose-20: rgba(251, 220, 241, 1); --primary-brilliant-rose-10: rgba(251, 236, 246, 1); /* ---------- COLOR · ROYAL BLUE (primary) ---------- */ --primary-royal-blue-100: rgba(85, 79, 224, 1); --primary-royal-blue-90: rgba(102, 97, 228, 1); --primary-royal-blue-80: rgba(118, 113, 229, 1); --primary-royal-blue-70: rgba(135, 131, 233, 1); --primary-royal-blue-60: rgba(152, 148, 235, 1); --primary-royal-blue-50: rgba(168, 165, 238, 1); --primary-royal-blue-40: rgba(185, 183, 241, 1); --primary-royal-blue-30: rgba(202, 201, 244, 1); --primary-royal-blue-20: rgba(219, 218, 247, 1); --primary-royal-blue-10: rgba(235, 235, 249, 1); /* ---------- COLOR · APRICOT (soporte) ---------- */ --primary-apricot-110: rgba(255, 137, 52, 1); --primary-apricot-100: rgba(249, 171, 128, 1); --primary-apricot-90: rgba(249, 179, 141, 1); --primary-apricot-80: rgba(250, 187, 153, 1); --primary-apricot-70: rgba(250, 195, 165, 1); --primary-apricot-60: rgba(250, 203, 178, 1); --primary-apricot-50: rgba(251, 212, 190, 1); --primary-apricot-40: rgba(251, 220, 202, 1); --primary-apricot-30: rgba(251, 228, 215, 1); --primary-apricot-20: rgba(251, 236, 227, 1); --primary-apricot-10: rgba(252, 244, 240, 1); /* ---------- COLOR · COD GRAY (texto / neutros) ---------- */ --base-cod-gray-100: rgba(17, 17, 17, 1); --base-cod-gray-90: rgba(41, 41, 41, 1); --base-cod-gray-80: rgba(64, 64, 64, 1); --base-cod-gray-70: rgba(88, 88, 88, 1); --base-cod-gray-60: rgba(111, 111, 111, 1); --base-cod-gray-50: rgba(135, 135, 135, 1); --base-cod-gray-40: rgba(158, 158, 158, 1); --base-cod-gray-30: rgba(182, 182, 182, 1); --base-cod-gray-20: rgba(205, 205, 205, 1); --base-cod-gray-10: rgba(229, 229, 229, 1); /* ---------- COLOR · BON JOUR (fondos) ---------- */ --base-bon-jour-100: rgba(236, 233, 236, 1); --base-bon-jour-90: rgba(238, 235, 238, 1); --base-bon-jour-80: rgba(239, 237, 239, 1); --base-bon-jour-70: rgba(241, 239, 241, 1); --base-bon-jour-60: rgba(242, 241, 242, 1); --base-bon-jour-50: rgba(244, 243, 244, 1); --base-bon-jour-40: rgba(246, 244, 246, 1); --base-bon-jour-30: rgba(247, 246, 247, 1); --base-bon-jour-20: rgba(249, 248, 249, 1); --base-bon-jour-10: rgba(249, 248, 249, 1); /* ---------- COLOR · BASE ---------- */ --base-white: rgba(252, 252, 252, 1); /* ---------- TOKENS SEMÁNTICOS (alias para uso ágil) ---------- */ --color-primary: var(--primary-royal-blue-100); --color-primary-hover: var(--primary-brilliant-rose-100); --color-accent: var(--primary-brilliant-rose-100); --color-text-primary: var(--base-cod-gray-100); --color-text-secondary: var(--base-cod-gray-90); --color-text-body: var(--base-cod-gray-80); --color-text-muted: var(--base-cod-gray-60); --color-bg-page: var(--base-bon-jour-20); --color-bg-section: var(--base-white); --color-bg-card: var(--base-white); --color-border-default: var(--base-cod-gray-20); --color-border-subtle: var(--base-cod-gray-10); --color-border-royal: var(--primary-royal-blue-90); --color-border-rose: var(--primary-brilliant-rose-90); --color-border-apricot: var(--primary-apricot-90); /* ---------- TYPOGRAPHY · FONT FAMILIES ---------- */ --font-heading: 'Oxygen', sans-serif; --font-body: 'Nunito', sans-serif; /* ---------- TYPOGRAPHY · SIZE TOKENS (raw) ---------- */ --heading-01: 96px; --heading-02: 78px; --heading-03: 64px; --heading-04: 32px; --heading-05: 26px; --heading-06: 20px; --subheading-01: 40px; --subheading-02: 34px; --subheading-03: 26px; --button-lg: 24px; --button-sm: 16px; --body-sm: 16px; --body-xs: 14px; --body-md: 18px; --body-lg-700: 32px; --body-lg-600: 26px; --body-lg-500: 26px; --body-lg-400: 26px; --body-lg-300: 26px; --body-md-600: 20px; --body-md-500: 20px; --body-md-400: 20px; --body-md-300: 20px; /* ---------- TYPOGRAPHY · SEMANTIC (desktop) ---------- */ --font-size-h1-desktop: 78px; --font-size-h2-desktop: 64px; --font-size-h3-desktop: 32px; --font-size-body-desktop: 20px; /* ---------- TYPOGRAPHY · SEMANTIC (mobile) ---------- */ --font-size-h1-mobile: 36px; --font-size-h2-mobile: 30px; --font-size-h3-mobile: 24px; --font-size-body-mobile: 16px; /* ---------- RADIUS ---------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 100px; --radius-round: 9999px; /* ---------- SHADOWS ---------- */ --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05); --shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0px 4px 8px rgba(16, 24, 40, 0.1), 0px 2px 4px rgba(16, 24, 40, 0.06); --shadow-lg: 0px 12px 16px rgba(16, 24, 40, 0.08), 0px 4px 6px rgba(16, 24, 40, 0.03); --shadow-xl: 0px 20px 24px rgba(16, 24, 40, 0.08), 0px 8px 8px rgba(16, 24, 40, 0.03); --shadow-2xl: 0px 24px 48px rgba(16, 24, 40, 0.18); --shadow-3xl: 0px 32px 64px rgba(16, 24, 40, 0.14); /* ---------- SPACING (escala de 4px) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 80px; /* ---------- TRANSITIONS ---------- */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-medium: 0.4s ease; } /* ========================================================================= 3. RESET & BASE ========================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--font-size-body-desktop); font-weight: 400; line-height: 1.5; color: var(--color-text-body); background: var(--color-bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 ; } a { text-decoration: none ; } /* ========================================================================= 4. COMPONENTES — CTA con hover de relleno circular desde el centro Aplica SOLO a los botones/enlaces listados explícitamente abajo. Para sumar un nuevo botón a este efecto, agregar su clase a las 3 listas de selectores de este bloque (no usar selectores genéricos como a/button). ========================================================================= */ :root { --cta-fill-color: var(--color-primary-hover); } .home-hero__button, .home-invest__cta, .home-work__cta, .home-blog__cta { position: relative; z-index: 0; overflow: hidden; } .home-hero__button::before, .home-invest__cta::before, .home-work__cta::before, .home-blog__cta::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; padding-bottom: 0; background-color: var(--cta-fill-color); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.4s ease, padding-bottom 0.4s ease; z-index: -1; } .home-hero__button:hover::before, .home-invest__cta:hover::before, .home-work__cta:hover::before, .home-blog__cta:hover::before { width: 300%; padding-bottom: 300%; }