@font-face {
    font-display: swap;
    font-family: Avenir;
    font-style: normal;
    font-weight: 400;
    src: url("/headers/ssm/skin_custom/assets/magallanes_30602/fonts/avenir-book.woff2") format("woff2"), url("/headers/ssm/skin_custom/assets/magallanes_30602/fonts/avenir-book.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: Avenir;
    font-style: normal;
    font-weight: 500;
    src: url("/headers/ssm/skin_custom/assets/magallanes_30602/fonts/avenir-medium.woff2") format("woff2"), url("/headers/ssm/skin_custom/assets/magallanes_30602/fonts/avenir-medium.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: Avenir;
    font-style: normal;
    font-weight: 600;
    src: url("/headers/ssm/skin_custom/assets/magallanes_30602/fonts/avenir-bold.woff2") format("woff2"), url("/headers/ssm/skin_custom/assets/magallanes_30602/fonts/avenir-bold.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: icons-base;
    font-style: normal;
    font-weight: normal;
    src: url("/headers/ssm/skin_custom/assets/magallanes_30602/fonts/icons-base.woff2") format("woff2"), url("/headers/ssm/skin_custom/assets/magallanes_30602/fonts/icons-base.woff") format("woff");
}

/* Every selector must start with [data-component-scope="brand-custom"] to limit styling to the custom header and footer scope */
/* Declare common styles and variables for each component */
html [data-component-scope="brand-custom"] {
    --color-primary: #2e3a47;
    --color-secondary: #ffffff;
    --color-accent: #5d083b;
    --color-accent-2: #114c56;

    --box-shadow-y: 0 1px 4px 0 rgba(0, 0, 0, .25);
    --box-shadow-x: 0 0 10px -3px #000000;

    --transition-duration-color: 150ms;
    --transition-timing-fn: ease-out;

    font-family: "Avenir", "Roboto", sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.4;
}

html [data-component-scope="brand-custom"] :focus-visible,
html [data-component-scope="brand-custom"].footer ~ #footer :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: .2rem;
    border-radius: .6rem;
}

html [data-component-scope="brand-custom"] a:not(:where(#loyalty) a) {
    color: inherit;
    text-decoration: none;
}

html [data-component-scope="brand-custom"] ul {
    margin: 0;
}

html [data-component-scope="brand-custom"] button {
    padding: 0;
    margin: 0;

    font: inherit;
    line-height: inherit;
    color: inherit;
}

html [data-component-scope="brand-custom"] strong {
    font-weight: 600;
}

html [data-component-scope="brand-custom"] .ico-fa-facebook::before,
html [data-component-scope="brand-custom"] .ico-fa-instagram::before,
html [data-component-scope="brand-custom"] .ico-fa-youtube::before {
    font-family: icons-base;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    speak: none;
    text-transform: none;
}

html [data-component-scope="brand-custom"] .ico-fa-facebook::before {
    content: "";
}

html [data-component-scope="brand-custom"] .ico-fa-instagram::before {
    content: "";
}

html [data-component-scope="brand-custom"] .ico-fa-youtube::before {
    content: "";
}