/* Rick Creative - Tipografías Oficiales */

/* ==========================================
   TIPOGRAFÍAS DEL MENÚ
   ========================================== */

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/menu/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ==========================================
   TIPOGRAFÍAS DEL SLIDER
   ========================================== */

@font-face {
    font-family: 'Lufga';
    src: url('../fonts/slider/LufgaLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lufga';
    src: url('../fonts/slider/LufgaRegular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lufga';
    src: url('../fonts/slider/LufgaMedium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sequel';
    src: url('../fonts/slider/sequel-100-black-75.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ==========================================
   TIPOGRAFÍAS DEL CONTENIDO
   ========================================== */

@font-face {
    font-family: 'Lufga';
    src: url('../fonts/content/LufgaRegular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lufga';
    src: url('../fonts/content/LufgaMedium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lufga';
    src: url('../fonts/content/LufgaSemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lufga';
    src: url('../fonts/content/LufgaBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lufga';
    src: url('../fonts/content/LufgaExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lufga';
    src: url('../fonts/content/LufgaLightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lufga';
    src: url('../fonts/content/LufgaSemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Monument';
    src: url('../fonts/content/monument-extended.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/content/Raleway-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/content/Raleway-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ==========================================
   VARIABLES CSS CON TIPOGRAFÍAS
   ========================================== */

:root {
    /* Tipografías principales */
    --font-menu: 'Poppins', sans-serif;
    --font-slider-title: 'Sequel', 'Lufga', sans-serif;
    --font-slider-content: 'Lufga', sans-serif;
    --font-content-primary: 'Lufga', sans-serif;
    --font-content-secondary: 'Raleway', sans-serif;
    --font-display: 'Monument', 'Lufga', sans-serif;
}

/* ==========================================
   CLASES UTILITARIAS PARA TIPOGRAFÍAS
   ========================================== */

.font-menu {
    font-family: var(--font-menu);
}

.font-slider-title {
    font-family: var(--font-slider-title);
}

.font-slider-content {
    font-family: var(--font-slider-content);
}

.font-content-primary {
    font-family: var(--font-content-primary);
}

.font-content-secondary {
    font-family: var(--font-content-secondary);
}

.font-display {
    font-family: var(--font-display);
}