/* ==================== FAMILIAS ==================== */

@font-face {
    font-family: "CabinetGrotesk";
    src: url("/static/fonts/CabinetGrotesk-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Switzer";
    src: url("/static/fonts/Switzer-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Ranade";
    src: url("/static/fonts/Ranade-Variablee.woff2") format("woff2");
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}

/* ==================== VARIABLES GLOBALES ==================== */

:root {

    /* Fuentes */
    --font-cabinet: "CabinetGrotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-switzer: "Switzer", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-ranade: "Ranade";

    /* Paleta de colores */
    --color-text-primary: #454647;
    --color-text-secondary: #4B5563;
    --color-text-tertiary: #FFFFFF;
    --color-text-quaternary: #000000;

    --color-bg-main: #FFFFFF;
    --color-bg-section: #F5F7F8;
    --color-bg-section-blue: #F3F6F9;
    --color-bg-section-gray: #5D5B5A;
    --color-bg-footer-gray: #333333;
    --color-border-1: #E5E7EB;
    --color-border-2: #F0F0F0;

    --color-accent-aqua-primary: #91D6E5;
    --color-accent-aqua-secondary: #3A7E8D;
    --color-accent-aqua-tertiary: #006e87;

    --color-accent-soft: #E7F1FA;
    --color-accent-code-block: #2D3748;

    --color-support-aqua: #5BC0BE;
    --color-support-aqua-soft: #E6F7F6;

    /* Propiedades de navbar */
    --navbar-blur: 10px;
    --navbar-glass-bg: rgba(255, 255, 255, 0.25);
    --navbar-hero-bg: rgba(0, 0, 0, 0);

    /* Degradados */
    --degraded-bg-color: rgba(0, 0, 0, 0.50);
    --degraded-bg-color-card: rgba(0, 0, 0, 0.50);
    --degraded-box_shadow-card: 0 10px 20px rgba(51, 51, 51, 0.50);

    /* Propiedades del footer */
    --footer-height: 125px;
    --footer-background: #1F1F1F;

    /* Animaciones */
    --animation-icon: drop-shadow(0 0 12px rgba(11, 15, 29, 0.4));

    /* Propiedades de cards */
    --card-radius: 6px;
    --radius-button-type-2: 30px;
    --box-shadow: 3px 6px 9px rgba(0, 0, 0, 0.5);

    /* Tamaño de fuentes */
    --size-font-section-title: 3.75rem;
    --size-font-section-description: 1.50rem;
    --size-font-section-subtitle: 3.00rem;
    --size-font-section-subtitle-landing: 4.50rem;
    --size-font-section-subdescription: 1.25rem;
    --size-font-card-title: 1.50rem;
    --size-font-card-description: 1.15rem;
    --size-font-footer: 1.25rem;
    --size-font-footer-media: 1.00rem;
    --font-size-100: 0.75rem;
    --font-size-150: 0.90rem;
    --font-size-200: 1.00rem;
    --font-size-300: 1.25rem;
    --font-size-400: 1.50rem;
    --font-size-500: 1.75rem;
    --font-size-600: 2.00rem;
    --font-size-700: 2.25rem;
    --font-size-800: 2.50rem;
    --font-size-900: 2.75rem;
    --font-size-1000: 3.00rem;
    --font-size-1100: 3.25rem;
    --font-size-1200: 3.50rem;
    --font-size-1300: 3.75rem;
    --font-size-1400: 4.00rem;
    --font-size-1500: 4.25rem;
    --font-size-1600: 4.50rem;
    --font-size-1700: 4.75rem;
    --font-size-1800: 5.00rem;
    --font-size-1900: 5.25rem;
    --font-size-2000: 5.50rem;

    /* Lapsos para transiciones */
    --time-transition-slow-type-2: 1.50s;
    --time-transition-slow: 1.00s;
    --time-transition-mid: 0.50s;
    --time-transition-fast: 0.30s;
    --duration-200: 0.20s;
    --duration-300: 0.30s;
    --duration-500: 0.50s;
    --duration-800: 0.80s;
    --duration-1000: 1.00s;
    --duration-1500: 1.50s;
    --duration-2000: 2.00s;
}