@import url("variables.css");

body {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 1rem;
    /* 16px */
    font-weight: 400;
    line-height: 1.125rem;
    /* 18px */
    color: var(--color-dark-text);
    background-color: var(--color-background);

    /* El footer siempre queda abajo, aunque haya poco contenido */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

main {
    flex: 1 0 auto;
}

/* ==========================================================
   Tipografía
   Cada nivel se puede usar como etiqueta (<h1>) o como clase (.h1)
   ========================================================== */

/* Hero — Bold 64/72 */
.hero {
    font-size: 4rem;
    font-weight: 700;
    line-height: 4.5rem;
}

/* H1 — Bold 52/60 */
h1,
.h1 {
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 3.75rem;
}

/* H2 — Bold 40/48 */
h2,
.h2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 3rem;
}

/* H3 — SemiBold 32/40 */
h3,
.h3 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 2.5rem;
}

/* H4 — SemiBold 24/30 */
h4,
.h4 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.875rem;
}

/* H5 — SemiBold 20/26 */
h5,
.h5 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.625rem;
}

/* Body L — Regular 18/20 */
.body-l {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.25rem;
}

/* Body — Regular 16/18 */
.body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.125rem;
}

/* Small — Regular 14/16 */
small,
.small {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1rem;
}

/* Caption — SemiBold 12/14 */
.caption {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 0.875rem;
}

/* Button L — SemiBold 16/24 */
.button-l {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
}

/* Button M — SemiBold 14/20 */
.button-m {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
}

/* ==========================================================
   Tipografía responsive: los títulos grandes se achican
   en tablet y mobile para todo el sitio
   ========================================================== */
@media (max-width: 991.98px) {

    .hero {
        font-size: 3rem;          /* 48px */
        line-height: 3.5rem;      /* 56px */
    }

    h1,
    .h1 {
        font-size: 2.75rem;       /* 44px */
        line-height: 3.25rem;     /* 52px */
    }

    h2,
    .h2 {
        font-size: 2.25rem;       /* 36px */
        line-height: 2.75rem;     /* 44px */
    }

    h3,
    .h3 {
        font-size: 1.75rem;       /* 28px */
        line-height: 2.25rem;     /* 36px */
    }
}

@media (max-width: 575.98px) {

    .hero,
    h1,
    .h1 {
        font-size: 2.25rem;       /* 36px */
        line-height: 2.75rem;     /* 44px */
    }

    h2,
    .h2 {
        font-size: 1.875rem;      /* 30px */
        line-height: 2.375rem;    /* 38px */
    }

    h3,
    .h3 {
        font-size: 1.5rem;        /* 24px */
        line-height: 2rem;        /* 32px */
    }
}