:root {
    /* Cambiar a light dark cuando se pueda alternar. De momento, forzado a dark. */
    /* color-scheme: light dark; */
    color-scheme: light;
    /*  colors  */
    --Neutros-Black: #121212;
    --Neutros-Grey-800:  #282828;
    --Neutros-Grey-700: #515151;
    --Neutros-Grey-600: #787878;
    --Neutros-Grey-500: #a8a8a8;
    --Neutros-Grey-400: #c9c9c9;
    --Neutros-Grey-300: #dcdcdc;
    --Neutros-Grey-200: #e9e9e9;
    --Neutros-Grey-100: #f7f7f7;
    --Neutros-White: #ffffff;


    /* color primary */
    --color-primary-50: var(--Neutros-White);
    --color-primary-100: var(--Neutros-Grey-100);
    --color-primary-200: var(--Neutros-Grey-200);
    --color-primary-300: var(--Neutros-Grey-300);
    --color-primary-400: var(--Neutros-Grey-400);
    --color-primary-500: var(--Neutros-Grey-500);
    --color-primary-600: var(--Neutros-Grey-600);
    --color-primary-700: var(--Neutros-Grey-700);
    --color-primary-800: var(--Neutros-Grey-800);
    --color-primary-900: var(--Neutros-Black);
    /* color secondary */
    --color-secondary-50: var(--Neutros-White);
    --color-secondary-100: var(--Neutros-Grey-100);
    --color-secondary-200: var(--Neutros-Grey-200);
    --color-secondary-300: var(--Neutros-Grey-300);
    --color-secondary-400: var(--Neutros-Grey-400);
    --color-secondary-500: var(--Neutros-Grey-500);
    --color-secondary-600: var(--Neutros-Grey-600);
    --color-secondary-700: var(--Neutros-Grey-700);
    --color-secondary-800: var(--Neutros-Grey-800);
    --color-secondary-900: var(--Neutros-Black);

    --color-yourcustomizer: #9743FC;
    --color-quickorder: #2776FF;
    --color-mycatalog: #F29100;

    /**
     * Tokens del sistema de diseño nuevo (GOR TIENDA WEB 2.0). A diferencia de la rampa
     * de grises de arriba, las etiquetas se definen como alfa sobre blanco.
     */
    --gor-label-primary: rgba(0, 0, 0, 0.9);
    --gor-label-secondary: rgba(0, 0, 0, 0.5);
    --gor-label-tertiary: rgba(0, 0, 0, 0.3);
    --gor-label-inverse: rgba(255, 255, 255, 0.9);
    --gor-field-1: rgba(0, 0, 0, 0.04);
    --gor-surface-2: #e5e5e5;
    --gor-header-utility-bg: #f8f8f8;
    --gor-menu-bg: #fafafa;
    --gor-nav-bg: #121212;
    --gor-accent-purple: #af52de;
    --gor-badge-blue-bg: #e5f2ff;
    --gor-badge-blue-fg: #004999;
    --gor-cart-badge-bg: #155dfc;
    --gor-mto-green: #b9d4cd;
    /* utility/gray del sistema de diseño: píldoras de conteo y etiquetas neutras */
    --gor-utility-gray-bg: #f2f2f2;
    --gor-utility-gray-label: #4d4d4d;

    /* typography */
    --gorfactory-font-family: "Inter", sans-serif;    
    --space-font-family: font-family: "Space Mono", serif;

    /* font-sizes */
    --font-size-6xl: 128px;
    --font-size-5xl: 72px;
    --font-size-4xl: 48px;
    --font-size-3xl: 32px;
    --font-size-2xl: 24px;
    --font-size-xl: 20px;
    --font-size-lg: 16px;
    --font-size-md: 14px;
    --font-size-sm: 12px;
    --font-size-xs: 10px;

    /* line-heights */
    --line-height-140: 140%;
    --line-height-120: 120%;    
    --line-height-100: 100%;

    /* font-weights */
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* general layout */
    /**
     * La cabecera son tres filas: barra de utilidades + fila principal + barra de navegación.
     * --gorfactory-header-height es la suma y lo que consumen el resto de componentes
     * (panel de búsqueda, megamenú, alturas mínimas de página) para descontarla.
     */
    --gorfactory-header-utility-height: 43px;
    --gorfactory-header-middle-section-height: 74px;
    --gorfactory-header-nav-height: 41px;
    --gorfactory-header-sticky-height: 115px;
    --gorfactory-header-height: 158px;
    /**
     * Alto completo de la cabecera. A diferencia de --gorfactory-header-height NO cambia
     * al hacer scroll, así que sirve para reservar espacio sin provocar reflow.
     */
    --gorfactory-header-full-height: 158px;
    /* El panel de búsqueda cuelga de la fila principal, no del alto total. */
    --gorfactory-header-search-panel-top: calc(var(--gorfactory-header-utility-height) + var(--gorfactory-header-middle-section-height));
    --gorfactory-footer-height: 300px;
    --gorfactory-product-card-background-filter: invert(0.05);
    --gorfactory-product-card-background-filter-soft: invert(0.03);
}

/* Al hacer scroll la barra de utilidades desaparece y quedan fijas las otras dos filas. */
body.header-fixed {
    --gorfactory-header-height: var(--gorfactory-header-sticky-height);
    /* Con la barra de utilidades fuera de pantalla, la fila principal arranca en 0. */
    --gorfactory-header-search-panel-top: var(--gorfactory-header-middle-section-height);
}


@media (max-width: 991px) {
    :root {
        /* Sin barra de navegación: el megamenú pasa al menú móvil. */
        --gorfactory-header-middle-section-height: 78px;
        --gorfactory-header-nav-height: 0px;
        --gorfactory-header-sticky-height: 78px;
        --gorfactory-header-height: 121px;
        --gorfactory-header-full-height: 121px;
    }

    body.header-fixed {
        --gorfactory-header-height: var(--gorfactory-header-sticky-height);
    }
}


@media (max-width: 575px) {
    :root {
        --gorfactory-header-middle-section-height: 68px;
        --gorfactory-header-sticky-height: 68px;
        --gorfactory-header-height: 111px;
        --gorfactory-header-full-height: 111px;
    }
}


.inverse-color-scheme {    
    @media (prefers-color-scheme: dark) {
        color-scheme: light;
    }

    @media (prefers-color-scheme: light) {
        color-scheme: dark;
    }
}

.light {
    color-scheme: light;
}

.dark {
    color-scheme: dark;
}


h1 {
    color: light-dark(var(--color-secondary-900), var(--color-secondary-200));
    font-family: var(--gorfactory-font-family);
    font-size: var(--font-size-5xl);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-120); /* 86.4px */
    &.bold, strong, b {
        font-weight: var(--font-weight-bold);
    }
}

h2 {
    color: light-dark(var(--color-secondary-900), var(--color-secondary-200));
    font-family: var(--gorfactory-font-family);
    font-size: var(--font-size-4xl);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-120); /* 57.6px */

    &.bold, strong, b {
        font-weight: var(--font-weight-bold);
    }
}

h3 {
    color: light-dark(var(--color-secondary-900), var(--color-secondary-200));
    font-family: var(--gorfactory-font-family);
    font-size: var(--font-size-3xl);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-120); /* 38.4px */

    &.bold, strong, b {
        font-weight: var(--font-weight-bold);
    }
}

h4 {
    color: light-dark(var(--color-secondary-900), var(--color-secondary-200));
    font-family: var(--gorfactory-font-family);
    font-size: var(--font-size-2xl);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-120); /* 28.8px */
    /* letter-spacing: -0.48px; */

    &.bold, strong, b {
        font-weight: var(--font-weight-semibold);
    }
}

h5 {
    color: light-dark(var(--color-secondary-900), var(--color-secondary-200));
    font-family: var(--gorfactory-font-family);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-120); /* 24px */

    &.bold, strong, b {
        font-weight: var(--font-weight-semibold);
    }
}

h6 {
    
    color: light-dark(var(--color-secondary-900), var(--color-secondary-200));
    font-family: var(--gorfactory-font-family);
    font-size: var(--font-size-lg);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-120); /* 19.2px */

    &.bold, strong, b {
        font-weight: var(--font-weight-semibold);
    }
}

body,
body .inverse-color-scheme,
body .light,
body .dark {
    
    color: light-dark(var(--color-secondary-900), var(--color-secondary-200));
    font-family: var(--gorfactory-font-family);
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-140);
    
    b {
        font-weight: var(--font-weight-bold);
    }

    &.italics, em, i {       
        font-style: italic;
    }

    
    * {
        font-family: var(--gorfactory-font-family);
    }
}

p {
    color: light-dark(var(--color-secondary-900), var(--color-secondary-200));
    /* IBM Plex Mono/Light mode/Body/Big/Regular */
    font-family: var(--gorfactory-font-family);
    font-size: var(--font-size-lg);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-140);

    &.italics, em, i {       
        font-style: italic;
    }

    &.bold, strong, b {
        font-weight: var(--font-weight-bold);
    }
}

a {
    text-decoration: none;
    color: inherit;
    transition: color .3s;
}

a:hover {
    color: var(--color-primary-500);
}

a.nuxt-link-exact-active,
a.active {
    color: var(--color-primary-500);
}

a:focus-visible {
  outline: 3px solid #3f51b5;
}

.menu li > a:not(.menu-title), .menu .active > a:not(.menu-title) {
    text-transform: uppercase;
    color: var(--Neutros-Grey-200, #E9E9E9);
    text-align: center;
    display: flex;
    align-items: center;
    /* IBM Plex Mono/Dark mode/Body/Base/Light */
    font-family: var(--gorfactory-font-family);
    font-size: 16px;
    font-style: normal;
    line-height: 140%;
    font-weight: 400;
}
.menu li:hover > a:not(.menu-title), .menu .active > a:not(.menu-title) {
    color: var(--color-primary-500);
}



.shop-GOR {
    background-color: var(--gorfactory-page-background-color, light-dark(var(--Neutros-White), var(--Neutros-Black)));

    /* Estas reglas no serán necesarias con ColorMode con el modulo de colorMode de nuxt 3 */
    &:has(.page-wrapper > main.light) {
        color-scheme: light;
    }

    &:has(.page-wrapper > main.dark) {
        color-scheme: dark;
    }
    
    &:has(.gorfactory-gray-bg) {
        --gorfactory-page-background-color:  #F8F8F8;
    }
}



.company-GOR.shop-GOR .container, .container-gorfactory {
    width: 100%;
    --gorfactory-container-padding-lg-x: clamp(20px, calc(20px + (100vw - 1280px) * 0.15625), 120px);
    --gorfactory-container-padding-lg-y: 0px;
    --gorfactory-container-padding-x: var(--gorfactory-container-padding-lg-x);
    --gorfactory-container-padding-y: var(--gorfactory-container-padding-lg-y);
    padding: var(--gorfactory-container-padding-y) var(--gorfactory-container-padding-x);
    margin-left: auto;
    margin-right: auto;
    max-width: var(--gorfactory-container-max-width, 1920px); 
}

.main.cart, .main.billing, .main.checkout {
    .row  {
        & > .col-lg-9 {
            padding-left: 6px;
            padding-right: 14px;
        }

        & > .col-lg-3 {
            padding-right: 6px;
            padding-left: 14px;
        }
    }
}

@media (max-width: 991px) {
    .company-GOR.shop-GOR .container, .container-gorfactory {
        --gorfactory-container-padding-x: 20px;
        --gorfactory-container-padding-y: 0px;
        padding: var(--gorfactory-container-padding-y) var(--gorfactory-container-padding-x);
    }


}

/* helpers */
.no-text-wrap {
    text-wrap: nowrap;
}

.full-bleed {
    margin: calc(-1 * var(--gorfactory-container-padding-y, 0px)) calc(-1 * var(--gorfactory-container-padding-x, 0px));
}

.no-full-bleed {
    margin: unset;
}

@media (min-width: 992px) {
    .full-bleed-lg {
        margin: calc(-1 * var(--gorfactory-container-padding-y, 0px)) calc(-1 * var(--gorfactory-container-padding-x, 0px));
    }

    .no-full-bleed-lg {
        margin: unset;
    }
}