/* ==================== 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;
}

/* ==================== PROPIEDADES REUTILIZABLES ==================== */

:root {

    /* Fuentes */
    --font-cabinet: "CabinetGrotesk";
    --font-switzer: "Switzer";
    --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-soft: #E7F1FA;
    --color-accent-code-block: #2D3748;

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

    /* Degradados */
    --degraded-bg-color: rgba(0, 0, 0, 0.40);
    --degraded-bg-color-card: rgba(0, 0, 0, 0.50);
    --degraded-bg-color-modal-window: rgba(0, 0, 0, 0.25);




    /* Colores */
    --color-background-white: #ffffff;
    --color-background-light: #F7F7F7;
    --color-background-muted: #f8fbff;
    --color-bg: #ffffff;
    --color-text: #111111;
    --color-text-white: #ffffff;
    --color-text-mild: #505050;
    --color-text-footer: #C2C2C2;
    --color-primary: #4E73DF;
    --color-border: #e0e0e0;
    --color-card-bg: #ffffff;

    /* Propiedades de navbar */
    --navbar-background: rgba(150, 150, 150, 0.2);
    --navbar-blur: 5px;
    --navbar-dropdown-background: rgba(199, 199, 199, 0.71);
    --navbar-dropdown-item-background: rgba(251, 251, 251, 0.577);

    /* Tamaño de fuentes */
    --size-font-section-title: 3.50rem;
    --size-font-section-subtitle: 2.25rem;
    --size-font-section-description: 1.50rem;
    --size-font-section-subdescription: 1.10rem;
    --size-font-card-title: 1.10rem;
    --size-font-card-description: 0.90rem;
    --size-font-footer: 1.25rem;
    --size-font-footer-media: 1.00rem;

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

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.14);
    --glass-border: rgba(255, 255, 255, 0.25);
    --glass-shadow: 0 18px 55px rgba(0, 0, 0, 0.18);
    --glass-blur: 14px;

    /* Lapsos para transiciones */
    --time-transition-slow: 1.00s;
    --time-transition-mid: 0.50s;
    --time-transition-fast: 0.30s;

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

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