@font-face {
    font-family: "Nexa Heavy";
    src: local("Nexa Heavy"), local("Nexa-Heavy");
    font-style: normal;
    font-weight: 800 900;
    font-display: swap;
}

@font-face {
    font-family: "Nexa Light";
    src: local("Nexa Light"), local("Nexa-Light");
    font-style: normal;
    font-weight: 200 400;
    font-display: swap;
}

:root {
    --brand-cyan: #08B8D0;
    --brand-blue: #020FB6;
    --brand-yellow: #F0F260;
    --brand-white: #FEFEFE;
    --brand-blue-deep: #010A7A;
    --font-title: "Nexa Heavy", "Nexa-Heavy", "Century Gothic", "Arial Black", sans-serif;
    --font-body: "Nexa Light", "Nexa-Light", "Century Gothic", "Segoe UI", Arial, sans-serif;

    /* Compatibilidad con páginas que ya usan estas variables. */
    --blue: var(--brand-cyan);
    --blue-dark: var(--brand-blue);
    --navy: var(--brand-blue-deep);
    --white: var(--brand-white);
}

html,
body,
input,
textarea,
select {
    font-family: var(--font-body) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
.btn,
.btn-primary,
.btn-secondary,
.font-semibold,
.font-bold,
.font-extrabold {
    font-family: var(--font-title) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 900;
}

.gradient-bg {
    background: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-blue) 100%) !important;
}

.btn-primary {
    background-color: var(--brand-cyan) !important;
    color: var(--brand-white) !important;
}

.btn-primary:hover {
    background-color: var(--brand-blue) !important;
    box-shadow: 0 10px 20px rgba(2, 15, 182, .28) !important;
}

.gradient-bg .btn-primary {
    background-color: var(--brand-yellow) !important;
    color: var(--brand-blue) !important;
}

.gradient-bg .btn-primary:hover {
    background-color: var(--brand-white) !important;
    color: var(--brand-blue) !important;
    box-shadow: 0 10px 20px rgba(240, 242, 96, .28) !important;
}

.btn-secondary {
    background-color: var(--brand-blue) !important;
    color: var(--brand-white) !important;
}

.btn-secondary:hover {
    background-color: var(--brand-yellow) !important;
    color: var(--brand-blue) !important;
    box-shadow: 0 10px 20px rgba(240, 242, 96, .3) !important;
}

a,
button,
input,
textarea,
select {
    accent-color: var(--brand-yellow);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--brand-yellow);
    outline-offset: 3px;
}

::selection {
    color: var(--brand-blue);
    background: var(--brand-yellow);
}