@font-face {
    font-family: 'Cinzel Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 400 900;
    src: url(/assets/fonts/cinzel-latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Italianno';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(/assets/fonts/italianno-latin-400-normal.woff2) format('woff2'), url(/assets/fonts/italianno-latin-400-normal.woff) format('woff');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Roboto Flex Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 1000;
    src: url(/assets/fonts/roboto-flex-latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
    /* Colors */
    --colorPrimary: #003D2F;
    --colorSecondary: #00684F;
    --colorLight: #F4F4F4;
    --colorDark: #262626;

    --neutralWhite: #FFFFFF;
    --neutralLight: #F2F2F2;
    --neutralLighter: #9c9c9c;
    --neutralMedium: #E0E0E0;
    --neutralDarkest: #6f6f6f;
    --neutralDark: #525252;
    --neutralBlack: #161616;

    --colorBorderCard: var(--neutralMedium);

    /* Tipografíes */
    --fontDefault: "Roboto Flex Variable", sans-serif;
    --fontDisplay: "Cinzel Variable";
    --fontCopy: "Italianno";

    --heightTopBar: 0;
    --heightHeader: 48px;

    @media (width >= 1366px) {
        --heightTopBar: 26px;        
        --heightHeader: 88px;
    }
}

* {
    margin: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background-color: var(--neutralWhite);
    color: var(--colorDark);

    font-family: var(--fontDefault);
    font-size: 100%;
    font-weight: 400;
    line-height: 1.6;

    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
}


h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    text-wrap: balance;
    overflow-wrap: break-word;
}

p {
    font-size: clamp(1rem, 0.9684rem + 0.1582vw, 1.125rem);
    text-wrap: pretty;
    overflow-wrap: break-word;
    margin-bottom: 16px;

    &:last-child {
        margin-bottom: 0;
    }
}

ul, ol {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

img, picture, video, canvas, svg {
    display: block;
    max-inline-size: 100%;
}

input, button, textarea, select {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    color: currentColor;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 16px;

    @media (width >= 768px) {
        padding: 32px 16px;
    }

    @media (width >= 1366px) {
        padding: 96px 16px;
    }

    h1, h2 {
        font-size: clamp(2.5rem, 1.9304rem + 2.8481vw, 4.75rem);
        font-weight: 800;
        line-height: 1;
        margin: 0;
        padding: 0;
    }

    p {
        font-weight: 500;
    }
}

.main {
    min-height: 80vh;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 16px;
}