:root {

    --page-max: 1440px;
    --page-wide-max: 1600px;

    --page-scale: 1;
    --font-scale: 1;

    color-scheme: light dark;

    --bg: #ffffff;
    --text: #1a1a1a;

    --link: #1a0dab;
    --link-visited: #1a0dab;

}

@media (prefers-color-scheme: dark) {

    :root {

        --bg: #181818;
        --text: #e8e8e8;

        --link: #8ab4f8;
        --link-visited: #8ab4f8;

    }

}

/* =========================
   BOX MODEL
========================= */

*,
*::before,
*::after {

    box-sizing: border-box;

}

/* =========================
   FONTS
========================= */

@font-face {

    font-family: 'Inter';

    src:
        url('/public/css/fonts/Inter-Regular.woff2') format('woff2'),
        url('/public/css/fonts/Inter-Regular.woff') format('woff');

    font-weight: 400;
    font-style: normal;
    font-display: swap;

}

@font-face {

    font-family: 'Inter';

    src:
        url('/public/css/fonts/Inter-Medium.woff2') format('woff2'),
        url('/public/css/fonts/Inter-Medium.woff') format('woff');

    font-weight: 500;
    font-style: normal;
    font-display: swap;

}

@font-face {

    font-family: 'Inter';

    src:
        url('/public/css/fonts/Inter-SemiBold.woff2') format('woff2'),
        url('/public/css/fonts/Inter-SemiBold.woff') format('woff');

    font-weight: 600;
    font-style: normal;
    font-display: swap;

}

/* =========================
   BASE
========================= */

html,
body {

    margin: 0;
    padding: 0;
    min-height: 100vh;

    background: var(--bg);
    color: var(--text);

    font-family:
        Inter,
        system-ui,
        sans-serif;

}

/* =========================
   LINKS
========================= */

a {

    color: var(--link);
    text-decoration: none;

}

a:visited {

    color: var(--link-visited);
    text-decoration: none;

}

a:hover {

    color: var(--link-visited);
    text-decoration: underline;

}

/* =========================
   ESCALA ANCHO
========================= */

html[data-width="compact"] {

    --page-scale: 0.90;

}

html[data-width="normal"] {

    --page-scale: 1;

}

html[data-width="wide"] {

    --page-scale: 1.15;

}

/* =========================
   ESCALA FUENTE
========================= */

html[data-font="small"] {

    --font-scale: 0.95;

}

html[data-font="normal"] {

    --font-scale: 1;

}

html[data-font="large"] {

    --font-scale: 1.10;

}

/* =========================
   CONTENEDOR PRINCIPAL
========================= */

.page {

    width:
        min(
            calc(var(--page-max) * var(--page-scale)),
            100%
        );

    margin-inline: auto;

    font-size:
        clamp(
            calc(15px * var(--font-scale)),
            calc(1.05vw * var(--font-scale)),
            calc(17px * var(--font-scale))
        );

}

/* =========================
   PANTALLAS MUY GRANDES
========================= */

@media (min-width: 1700px) {

    .page {

        width:
            min(
                max(
                    calc(var(--page-max) * var(--page-scale)),
                    calc(70vw * var(--page-scale))
                ),
                var(--page-wide-max)
            );

    }

}

/* =========================
   PRINCIPAL ELEMENTOS
========================= */
img,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* =========================
   H1
========================= */

h1 {

    margin: 0;
    padding: 0;

    font-size: clamp(2rem, 3vw, 3rem);
    text-wrap: balance;
    font-weight: 600;
    text-align:center;
    line-height: 1.15;

}
/* =========================
   HEADINGS
========================= */

h2,
h3,
h4 {

    margin: 0;
    padding: 0;

    font-weight: 600;

    text-wrap: balance;

}

h2 {

    font-size:
        clamp(
            calc(1.65rem * var(--font-scale)),
            calc(2.2vw * var(--font-scale)),
            calc(2.35rem * var(--font-scale))
        );

    line-height: 1.18;

}

h3 {

    font-size:
        clamp(
            calc(1.35rem * var(--font-scale)),
            calc(1.65vw * var(--font-scale)),
            calc(1.75rem * var(--font-scale))
        );

    line-height: 1.22;

}

h4 {

    font-size:
        clamp(
            calc(1.15rem * var(--font-scale)),
            calc(1.25vw * var(--font-scale)),
            calc(1.35rem * var(--font-scale))
        );

    line-height: 1.28;

}
/* =========================
   PÁRRAFOS
========================= */

p {

    margin: 0;
    padding: 0.5em;
    line-height: 1.6;

}
/* =========================
   LISTAS
========================= */

ul,
ol {

    margin: 0;
    padding: 0;

    list-style: none;

}

li {

    margin: 0;
    padding: 0;

}
b,
strong {

    font-weight: 600;

}

em {

    font-style: italic;

}
hr {

    margin: 0;
    padding: 0;

    border: 0;

}
iframe {

    border: 0;

}
/* =========================
   COOKIES
========================= */
.cookie {

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 9999;

    background: #fff;

    border-top: 1px solid #ccc;

    padding: 1rem;

}




/* =========================
   TOP FUNCIONAL
========================= */

.top-funcional {

    width: 100%;

    border-bottom: 1px solid #ddd;

    background: var(--bg);

}

.top-funcional__form {

    display: flex;

    flex-wrap: wrap;

    align-items: end;

    gap: 1rem;

    padding: 1rem;

}

.top-funcional__field {

    display: flex;

    flex-direction: column;

    gap: 0.3rem;

}

.top-funcional label {

    font-size: 0.9rem;

    font-weight: 600;

}

.top-funcional select {

    min-width: 180px;

}

.top-funcional__submit {

    white-space: nowrap;

}