:root {
    --page-width: 1200px;
    --green-light: #A3E221;
}

@font-face {
    font-family: title;
    src: url('/assets/fonts/Barlow/Barlow-SemiBold.ttf');
    font-weight: 500
}

@font-face {
    font-family: regular;
    src: url('/assets/fonts/Barlow/Barlow-Regular.ttf');
    font-weight: 300
}

@font-face {
    font-family: medium;
    src: url('/assets/fonts/Barlow/Barlow-Medium.ttf');
    font-weight: 400
}

@font-face {
    font-family: bold;
    src: url('/assets/fonts/Barlow/Barlow-Bold.ttf');
    font-weight: 600
}

@font-face {
    font-family: light;
    src: url('/assets/fonts/Barlow/Barlow-Light.ttf');
    font-weight: 100
}

html, body, .viewport {
    font-family: regular;
    font-weight: 300;
    font-size: 16px;
    min-width: 720px;
	width:100vw;
	height:100%;
	overflow:hidden;
}

.main-content {
    position: relative;
    display: flex;
    width: 100%;
    height: calc(100% - var(--menu-height));
    top: var(--menu-height);
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: flex-start;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behavior: auto;
    z-index: 1;
}

.separator {
    width: 100% !important;
    opacity: 0 !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    position: relative !important;
    border: none !important;
}

a,
a:visited,
a:hover,
a:active,
a:focus {
    color: inherit;       /* usa el color del padre */
    text-decoration: none; /* quita subrayado */
    outline: none;        /* elimina el borde de foco */
    box-shadow: none;     /* elimina posibles resaltados */
}


@media(max-width:1200px) {
    :root {
        --page-width: 100%;
    }
}

/*  ESCALADO AUTOMÁTICO en pantallas menores a 720 px ---- */
@media (max-width:719.98px) {
    .viewport {
        position: fixed;
        inset: 0;
        width: 720px;
        transform-origin: top left;
        transform: scale(calc(100vw / 720));
    }
}