/* ============================================================
   FONTS
   ============================================================ */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url('../assets/fonts/dmsans-normal-var.woff2') format('woff2');
}

@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 100 1000;
    font-display: swap;
    src: url('../assets/fonts/dmsans-italic-var.woff2') format('woff2');
}

@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../assets/fonts/montserrat-normal-var.woff2') format('woff2');
}

@font-face {
    font-family: Montserrat;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../assets/fonts/montserrat-italic-var.woff2') format('woff2');
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/material-symbols-outlined.woff2') format('woff2');
}

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
    /* Colors */
    --background:               #f7f9fd;
    --surface:                  #f7f9fd;
    --surface-bright:           #f7f9fd;
    --surface-dark:             #061727;
    --surface-container:        #eceef2;
    --surface-container-low:    #f2f4f8;
    --surface-container-high:   #e6e8ec;
    --surface-container-highest:#e0e2e6;
    --surface-container-lowest: #fff;
    --surface-dim:              #d8dade;
    --surface-variant:          #e0e2e6;
    --surface-tint:             #49607e;
    --on-background:            #191c1f;
    --on-surface:               #191c1f;
    --on-surface-variant:       #43474d;
    --primary:                  #000f22;
    --primary-container:        #0a2540;
    --primary-fixed:            #d2e4ff;
    --primary-fixed-dim:        #b0c8eb;
    --on-primary:               #fff;
    --on-primary-container:     #768dad;
    --on-primary-fixed:         #001c37;
    --on-primary-fixed-variant: #314865;
    --inverse-primary:          #b0c8eb;
    --secondary:                #5f5e5e;
    --secondary-container:      #e4e2e1;
    --secondary-fixed:          #e4e2e1;
    --secondary-fixed-dim:      #c8c6c6;
    --on-secondary:             #fff;
    --on-secondary-container:   #656464;
    --on-secondary-fixed:       #1b1c1c;
    --on-secondary-fixed-variant:#474747;
    --tertiary:                 #00120e;
    --tertiary-container:       #002a23;
    --tertiary-fixed:           #68fade;
    --tertiary-fixed-dim:       #44ddc2;
    --on-tertiary:              #fff;
    --on-tertiary-container:    #009d88;
    --on-tertiary-fixed:        #00201b;
    --on-tertiary-fixed-variant:#005045;
    --error:                    #ba1a1a;
    --error-container:          #ffdad6;
    --on-error:                 #fff;
    --on-error-container:       #93000a;
    --outline:                  #74777e;
    --outline-variant:          #c4c6ce;
    --inverse-surface:          #2d3134;
    --inverse-on-surface:       #eff1f5;
    --verde-esmeralda:          #00BFA6;
    --azul-noche:               #0A2540;
    --gris-claro:               #E5E7EB;
    --gris-grafito:             #3A3A3A;
    --white:                    #FFF;

    /* Spacing */
    --section-gap:      50px;
    --stack-lg:         24px;
    --stack-md:         16px;
    --stack-sm:         8px;
    --margin-desktop:   64px;
    --margin-mobile:    16px;
    --unit:             8px;
    --gutter:           24px;
    --section-padding:  3%;

    /* Border radius */
    --radius:       0.125rem;
    --radius-lg:    0.25rem;
    --radius-xl:    0.5rem;
    --radius-full:  0.75rem;

    /* Typography */
    --font-display: 'DM Sans', sans-serif;
    --font-body:    'Montserrat', sans-serif;
    --text-headline-xl:     48px;
    --lh-headline-xl:       56px;
    --ls-headline-xl:       -0.02em;
    --fw-headline-xl:       700;
    --text-headline-lg:     32px;
    --lh-headline-lg:       40px;
    --ls-headline-lg:       -0.01em;
    --fw-headline-lg:       700;
    --text-headline-md:     24px;
    --lh-headline-md:       32px;
    --fw-headline-md:       500;
    --text-headline-sm:     20px;
    --lh-headline-sm:       28px;
    --fw-headline-sm:       500;
    --text-body-lg:         18px;
    --lh-body-lg:           28px;
    --fw-body-lg:           400;
    --text-body-md:         16px;
    --lh-body-md:           24px;
    --fw-body-md:           400;
    --text-body-sm:         14px;
    --lh-body-sm:           20px;
    --fw-body-sm:           400;
    --text-label-lg:        14px;
    --lh-label-lg:          20px;
    --ls-label-lg:          0.05em;
    --fw-label-lg:          600;
    --text-label-md:        12px;
    --lh-label-md:          16px;
    --ls-label-md:          0.05em;
    --fw-label-md:          600;
}

/* ============================================================
   MATERIAL SYMBOLS
   ============================================================ */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
.hero-pattern {
    background-image: radial-gradient(circle at 2px 2px, #e5e7eb 1px, transparent 0);
    background-size: 32px 32px;
}

@keyframes ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
}

.animate-ticker {
    display: flex;
    width: max-content;
    animation: ticker 30s linear infinite;
}