@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

:root {
    --text-color: #001b4d;
    --text-color-muted: #6b7280;

    --font-size-base: 15px;
    --font-family-base: "Source Sans 3", sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-body: 1.55;
    --letter-spacing-tight: -0.02em;

    --spacing-unit: 12px;
    --gutter: calc(var(--spacing-unit) / 2);
    --navbar-height: calc(var(--spacing-unit) * 8);
    --page-content-py: calc(var(--spacing-unit) * 2);
    /* Sombra base + glow muy suave del color activo (azul SFS / verde SRL). */
    --box-shadow-neutral: 0 calc(var(--spacing-unit) / 4) calc(var(--spacing-unit) / 2) rgba(0, 0, 0, 0.06);
    --box-shadow-glow: 0 calc(var(--spacing-unit) / 5) calc(var(--spacing-unit) * 0.65) color-mix(in srgb, var(--color-primary) 9%, transparent);
    --box-shadow-glow-strong: 0 calc(var(--spacing-unit) / 4) calc(var(--spacing-unit) * 0.9) color-mix(in srgb, var(--color-primary) 14%, transparent);
    --box-shadow-glow-complementary: 0 calc(var(--spacing-unit) / 5) calc(var(--spacing-unit) * 0.65) color-mix(in srgb, var(--color-complementary) 9%, transparent);
    --box-shadow: var(--box-shadow-neutral), var(--box-shadow-glow);
    --box-shadow-complementary: var(--box-shadow-neutral), var(--box-shadow-glow-complementary);
    --box-shadow-strong: var(--box-shadow-neutral), var(--box-shadow-glow-strong);

    --color-background: #ffffff;
    /* --color-primary-1: #003EAB; */
    --color-primary-1: #00328B;
    --color-complementary-1: #FFA400;
    /* --color-primary-2: #43B12E; */
    --color-primary-2: #368F25;
    --color-complementary-2: #CD3544;
    --color-primary-3: #00A4EB;
    --color-complementary-3: #FF8700;
    --color-primary-4: #FFA40D;
    --color-complementary-4: #1654AB;

    --color-primary: var(--color-primary-1);
    --color-complementary: var(--color-primary-2);
    --color-primary-alpha: #003EAB1A;
    --color-complementary-alpha: #368F251A;
    
    --color-error: #CD3544;
    --color-error-alpha: #CD35441A;

    /* Degradados suaves a partir del color activo (más claro → más oscuro). */
    --color-primary-light: color-mix(in srgb, var(--color-primary) 78%, white);
    --color-primary-dark: color-mix(in srgb, var(--color-primary) 72%, black);
    --color-complementary-light: color-mix(in srgb, var(--color-complementary) 78%, white);
    --color-complementary-dark: color-mix(in srgb, var(--color-complementary) 72%, black);
    --color-error-light: color-mix(in srgb, var(--color-error) 78%, white);
    --color-error-dark: color-mix(in srgb, var(--color-error) 72%, black);

    --gradient-primary: linear-gradient(
        145deg,
        var(--color-primary-light) 0%,
        var(--color-primary) 52%,
        var(--color-primary-dark) 100%
    );
    --gradient-complementary: linear-gradient(
        145deg,
        var(--color-complementary-light) 0%,
        var(--color-complementary) 52%,
        var(--color-complementary-dark) 100%
    );
    --gradient-error: linear-gradient(
        145deg,
        var(--color-error-light) 0%,
        var(--color-error) 52%,
        var(--color-error-dark) 100%
    );
}

.seguro-familiar-salud,
.seguro-riesgos-laborales {
    --color-primary-light: color-mix(in srgb, var(--color-primary) 78%, white);
    --color-primary-dark: color-mix(in srgb, var(--color-primary) 72%, black);
    --color-complementary-light: color-mix(in srgb, var(--color-complementary) 78%, white);
    --color-complementary-dark: color-mix(in srgb, var(--color-complementary) 72%, black);
    --gradient-primary: linear-gradient(
        145deg,
        var(--color-primary-light) 0%,
        var(--color-primary) 52%,
        var(--color-primary-dark) 100%
    );
    --gradient-complementary: linear-gradient(
        145deg,
        var(--color-complementary-light) 0%,
        var(--color-complementary) 52%,
        var(--color-complementary-dark) 100%
    );
}

.seguro-familiar-salud {
    --color-primary: var(--color-primary-1);
    --color-complementary: var(--color-primary-1);
    --color-primary-alpha: #003EAB1A;
    --color-complementary-alpha: #00328B1A;
}

.seguro-riesgos-laborales {
    --color-primary: var(--color-primary-2);
    --color-complementary: var(--color-primary-2);
    --color-primary-alpha: #43B12E1A;
    --color-complementary-alpha: #368F251A;
}