/* Font Face Section */
@font-face {
    font-family: 'BentonSansBBVA-Book';
    src: url('../fonts/BentonSansBBVA-Book-Lite.woff2') format('woff2'),
        url('../fonts/BentonSansBBVA-Book-Lite.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'BentonSansBBVA-Medium';
    src: url('../fonts/BentonSansBBVA-Medium.woff2') format('woff2'),
        url('../fonts/BentonSansBBVA-Medium.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'TiemposHeadline-Bold';
    src: url('../fonts/tiempos-headline-bold.woff2') format('woff2');
    font-display: swap;
}

:root {
    /* Colours Variables Section */
    --c-bbva-grey-200: #F7F8F8;
    --c-bbva-midnight-blue: #070E46;
    --c-bbva-white-100: #FFFFFF;
    --c-bbva-electric-blue: #001391;
    --c-bbva-footer-blue: #00288F;

    /* Sizes Variables Section */
    --spacing-8: 8px;
    --spacing-16: 16px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;

    /* Border Radius Variables Section */
    --border-radius-s: 8px;
    --border-radius-m: 16px;

    /* Breakpoints */
    --bp-desktop: 1024px;
    --bp-desktop--large: 1312px;
}

/* Fonts Classes Section */
.f-title-tiempos-bold {
    font-family: 'TiemposHeadline-Bold', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
}

.f-subtitle-benton-book {
    font-family: 'BentonSansBBVA-Book', Helvetica, Arial, sans-serif;
    font-weight: 350;
    font-size: 20px;
    line-height: 24px;
}

.f-text-benton-book {
    font-family: 'BentonSansBBVA-Book', Helvetica, Arial, sans-serif;
    font-weight: 350;
    font-size: 15px;
    line-height: 24px;
}

.f-text-benton-medium {
    font-family: 'BentonSansBBVA-Medium', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
}

.f-buttons-benton-medium {
    font-family: 'BentonSansBBVA-Medium', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
}

/* General Section */
* {
    margin: 0;
    padding: 0;
}

.general-wrapper {
    margin-left: var(--spacing-16);
    margin-right: var(--spacing-16);
}

.body__base {
    background-color: var(--c-bbva-grey-200);
}

.container-full-width {
    box-sizing: border-box;
    padding-left: var(--spacing-16);
    padding-right: var(--spacing-16);
    margin-left: auto;
    margin-right: auto;
}

/* Header Styling Section */
.header__base {
    margin-top: var(--spacing-24);
    background-color: var(--c-bbva-white-100);
    border-radius: var(--border-radius-m);
    box-shadow: 0 4px 4px 0 rgba(18, 18, 18, .04), 0 1px 3px 0 rgba(39, 41, 45, .02);
    -webkit-box-shadow: 0 4px 4px 0 rgba(18, 18, 18, .04), 0 1px 3px 0 rgba(39, 41, 45, .02);
    overflow: hidden;
}

.header__container {
    background-color: var(--c-bbva-grey-200);
    padding-top: var(--spacing-24);
    padding-bottom: var(--spacing-24);
}

.header__logo {
    width: 100%;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    -webkit-transition: all .33333s;
    -o-transition: all .33333s;
    transition: all .33333s;
    -webkit-filter: brightness(0) saturate(100%) invert(12%) sepia(40%) saturate(6514%) hue-rotate(221deg) brightness(97%) contrast(136%);
    filter: brightness(0) saturate(100%) invert(12%) sepia(40%) saturate(6514%) hue-rotate(221deg) brightness(97%) contrast(136%);
}

.header__logo-img {
    height: 32px;
    width: auto;
    will-change: height;
    margin: auto;
    -webkit-transition: height .33333s;
    -o-transition: height .33333s;
    transition: height .33333s;
    display: inline-block;
    vertical-align: middle;
}

/* Banner Styling Section */
.banner__container {
    margin-top: var(--spacing-24);
    background-color: var(--c-bbva-white-100);
    border-radius: var(--border-radius-m);
}

.banner__wrapper {
    display: flex;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
}

.banner__warning {
    width: 80px;
    height: 80px;
}

.banner__title {
    margin-top: var(--spacing-8);
    text-align: center;
    color: var(--c-bbva-midnight-blue);
}

.banner__subtitle {
    margin-top: var(--spacing-16);
    text-align: center;
    color: var(--c-bbva-midnight-blue);
}

.banner__text {
    margin-top: var(--spacing-16);
    text-align: center;
    color: var(--c-bbva-midnight-blue);
}

.banner__buttons {
    width: 100%;
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    -ms-flex-direction: column;
    gap: var(--spacing-16);
    margin-top: var(--spacing-16);
}

.banner__btn {
    width: 100%;
    background-color: var(--c-bbva-electric-blue);
    color: var(--c-bbva-white-100);
    padding: var(--spacing-16);
    border-radius: var(--border-radius-s);
    border: 0;
    text-decoration: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    background-size: 210% 100%;
    background-position: 100% center;
    background-repeat: no-repeat;
    -webkit-transition: background-position .66667s cubic-bezier(.24, .22, .31, 1.07);
    transition: background-position .66667s cubic-bezier(.24, .22, .31, 1.07);
    background-image: linear-gradient(100deg, var(--c-bbva-midnight-blue, #070e46) 50%, var(--c-bbva-electric-blue, #001391) 50%);
    will-change: background-position;
}

.banner__btn:hover {
    background-position: 0 center;
}

/* Footer Styling Section */
.footer__base {
    color: var(--c-bbva-white-100);
    margin-top: var(--spacing-16);
    margin-bottom: var(--spacing-16);
}

.footer__container {
    border-radius: var(--border-radius-m);
    background-color: var(--c-bbva-footer-blue);
}

.footer__body {
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    -ms-flex-direction: column;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    gap: var(--spacing-40);
    padding-top: 44px;
    padding-bottom: 68px;
}

.footer__logo-img {
    height: 32px;
}

.footer__copyright {
    text-align: center;
}

/* Breakpoint 1024px */
@media (min-width: 1024px) {

    /* Fonts Classes */
    .f-title-tiempos-bold {
        font-size: 40px;
        line-height: 48px;
    }

    .f-subtitle-benton-book {
        font-size: 24px;
        line-height: 32px;
    }

    /* General Section */
    .general-wrapper {
        margin-left: var(--spacing-24);
        margin-right: var(--spacing-24);
    }

    .container-full-width {
        max-width: var(--bp-desktop);
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Header Styling Section */
    .header__logo {
        justify-content: flex-start;
    }

    .header__container {
        background-color: var(--c-bbva-white-100);
        max-width: var(--bp-desktop);
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px;
        padding-right: 20px;
    }

    .header__image {
        max-width: 225px;
        height: 40px;
    }

    /* Banner Styling Section */
    .banner__wrapper {
        padding-top: 88px;
        padding-bottom: 88px;
        max-width: calc(100% * 8 / 12);
    }

    .banner__title {
        margin-top: var(--spacing-24);
    }

    .banner__text {
        margin-top: var(--spacing-24);
    }

    .banner__buttons {
        width: auto;
        flex-direction: row;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        gap: var(--spacing-24);
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        margin-top: var(--spacing-48);
    }

    .banner__btn {
        width: auto;
        padding-left: var(--spacing-32);
        padding-right: var(--spacing-32);
    }

    /* Footer Styling Section */
    .footer__base {
        margin-top: var(--spacing-24);
        margin-bottom: var(--spacing-24);
    }

    .footer__body {
        align-items: flex-start;
        -webkit-box-align: start;
        -ms-flex-align: start;
        padding-top: var(--spacing-40);
        padding-bottom: var(--spacing-40);
    }

    .footer__copyright {
        text-align: left;
    }
}

/* Breakpoint 1312px */
@media (min-width: 1312px) {
    .header__container {
        max-width: var(--bp-desktop--large);
    }

    .container-full-width {
        max-width: var(--bp-desktop--large);
    }
}