@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css");


/*==================================================================
                                GLOBAL
==================================================================*/


/* ============= GENERAL ============= */

* {outline: 0px !important;}

/* ============================= */
/*   VARIABLES DE TIPOGRAFÍA     */
/* ============================= */

:root{
    --display-hero: normal 400 76px/95% 'Bebas Neue', sans-serif;
    --headline-1-h1: normal 700 48px/110% 'Inter', sans-serif;
    --headline-2-h2: normal 700 36px/115% 'Inter', sans-serif;
    --display-hero-30: normal 400 28px/120% 'Bebas Neue', sans-serif;
    --headline-3-h3: normal 600 22px/110% 'Inter', sans-serif;
    --subtitle-title: normal 300 19px/130% 'Inter', sans-serif;
    --body-large: normal 300 16px/130% 'Inter', sans-serif;
    --body-large-bold: normal 600 16px/120% 'Inter', sans-serif;
    --body-large-italic: italic 300 16px/120% 'Inter', sans-serif;
    --body-small: normal 300 14px/120% 'Inter', sans-serif;
    --body-small-bold: normal 600 14px/120% 'Inter', sans-serif;
    --body-small-italic: italic 300 14px/120% 'Inter', sans-serif;
    --caption-overline: normal 400 12px/140% 'Inter', sans-serif;
    --button-label: normal 500 16px/170% 'Inter', sans-serif;
}

/* ============================= */
/*     SUAVIZADO OPCIONAL        */
/*  (para que no se vea gruesa)  */
/* ============================= */
html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============= COLORES VARIABLES ============= */

:root {
    --primary-red: #E63C35;
    --primary-base: #ffffff;
    --secondary-base: #000000;
    --gold-brand: #E9A462;
    --secondary-red: #A80C06;
    --canvas-gray-100: #F8F8F8;
    --canvas-gray-200: #DEDEDE;
    --canvas-gray-300: #C4C4C4;
    --canvas-gray-400: #A3A3A3;
    --canvas-gray-500: #828282;
    --canvas-gray-600: #606060;
    --canvas-gray-700: #3F3F3F;
    --canvas-gray-800: #222222;
    --canvas-gray-900: #131313;
    --background-blog: #F0F3F5;
}