:root {
    /* --- Colors --- */
    /* --primary-color: #16284e; */
    --primary-color: #104268;
    --secondary-color: #CB1517;
    --tertiary-color: #142447;
    --accent-color: #CB1517;
    --text-color: #2D3845;
    /* --heading-color: #16284E; */
    --heading-color: #104268;
    --muted-color: #62748e;
    --dark-color: #0A192A;
    --dark-gray: #333;
    --light-bg: #f6f7f8;
    --light-gray: #F9F9F9;
    --white: #ffffff;
    --border-color: #e5e7eb;

    /* --- Fonts --- */
    /* Montserrat para títulos: Moderna y geométrica */
    --font-heading: 'Montserrat', sans-serif;
    /* Roboto para texto: Neutra y legible */
    --font-body: 'Roboto', sans-serif;

    /* --- FONT SIZES (Fluid Typography) --- */
    --fs-hero: clamp(2.5rem, 8vw, 4.75rem);
    --fs-section-title: clamp(2.25rem, 5vw, 2.5rem);
    --fs-subtitle: clamp(18px, 2.5vw, 20px);
    
    --fs-h1: clamp(32px, 5vw, 48px);
    --fs-h2: clamp(28px, 4vw, 38px);
    --fs-h3: clamp(24px, 3vw, 30px);
    --fs-h4: clamp(20px, 2.5vw, 24px);

    --fs-body: clamp(16px, 2vw, 18px);
    --fs-small: clamp(14px, 1.5vw, 16px);

    /* --- Layout --- */
    --container-width: 1200px;
    --container-padding: 20px;
    --section-padding: 100px;

    /* --- Others --- */
    --main-border-radius: 8px;
    --card-border-radius: 12px;
    --container-border-radius: 24px;
    --transition: all 0.3s ease;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.15);
}