:root {
    /* Variables para tamaños base */
    --h2-base: 2rem;
    --p-base: 1.1rem;
    --tag-base: 1.1rem;

    --small: 0.8rem;

    --xsmall: 0.7rem;

    /* Multiplicador inicial */
    --font-multiplier: 0.8;

}

@font-face {
    font-family: 'Outfit' !important;
    src: url('font/Outfit-Regular.ttf') format('truetype') !important;
}

@media (max-width: 767px) {
    :root {

        --font-multiplier: 1;

        --h2-base: 1.7rem;
        --p-base: 1.2rem;
        --tag-base: 1.2rem;

        --small: 1.1rem;

        --xsmall: 1.1rem;

    }

    h1 {
        font-weight: 900;
    }

}

/* Aplicar multiplicadores en diferentes resoluciones */
@media (min-width: 768px) and (max-width: 1999.98px) {
    :root {
        --font-multiplier: 1.2;
    }
}

@media (min-width: 2000px) {
    :root {
        --font-multiplier: 1.7;
    }
}

@media (min-width: 3100) {
    :root {
        --font-multiplier: 2;

    }
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    max-width: 2160px;
    font-family: 'Outfit', sans-serif;
}

@media (min-width: 2161px) {
    body {
        margin: 0 auto;
    }
}

html {
    scroll-behavior: smooth;
}

h1 {
    font-weight: 700;
    font-size: calc(var(--h2-base) * var(--font-multiplier));
}

p {
    font-size: calc(var(--p-base) * var(--font-multiplier));
}

h2 {
    font-size: calc(var(--h2-base) * var(--font-multiplier));
}

h4 {
    font-size: calc(var(--small) * var(--font-multiplier));
}

h5 {
    font-size: calc(var(--xsmall) * var(--font-multiplier));
    font-weight: 800;
}

.input-group .form-control {
    font-size: calc(var(--small) * var(--font-multiplier));
}

/* Tamaño del ícono de la lupa */
.input-group-text h5 {
    font-size: calc(var(--xsmall) * var(--font-multiplier));
}