:root {
  /* Colores */
  --color-main: #00BFA6;
  --color-maindark: #009E8A;
  --color-dark: #131313;
  --color-seconddark: #0f0f0f;
  --color-white: #FFFFFF;
  --color-gray: #B3B3B3;

  /* Tipografía */
  --font-base: 'Lato', sans-serif;
  --font-heading: 'Poppins', sans-serif;

  /* Tamaños de fuente */
  --fs-h1: 2.5rem;
  --fs-h2: 2rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Espaciado */
  --spacing-s: 0.5rem;
  --spacing-m: 1rem;
  --spacing-l: 2rem;

  /* Bordes */
  --radius: 12px;
}
/* -------------------------------
   GENERAL
-------------------------------- */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    overscroll-behavior: none;

}
.body{
    overscroll-behavior: none;
    background-color: var(--color-dark);
}
/* -------------------------------
   PRESETS
-------------------------------- */

.container{
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}
.fade-section {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}
.fade-section.visible {
  opacity: 1;
}

/*Color functions*/
.color-main{
    color: var(--color-main);
}
.color-gray{
    color: var(--color-gray);
}
.color-black{
    color: var(--color-dark);
}
.color-black{
    color: var(--color-dark);
}
.color-white{
    color: var(--color-white);
}
/* Text functions */
.font-white{
    color: var(--color-white);
}
.font-lighter{
    font-weight: 100 /* Lighter */
}
.font-light{
    font-weight: 300 /* Light */
}
.font-normal{
    font-weight: 400 /* Normal */
}
.font-bold{
    font-weight: 600 /* Black */
}
.font-bolder{
    font-weight: 900 /* Black */
}
.font-title{
    font-size: 5rem;
    font-weight: 900; /* Black */
}
.font-h1{
    font-size: 2.5rem;
    font-weight: 700; /* Black */
}
.font-h2{
    font-size: 2rem;
    font-weight: 500; /* Bold  */
}
.font-h3{
    font-size: 2rem;
    font-weight: 300; /* Light */
}
.font-body{
    font-size: 1rem;
    font-weight: 400; /* Regular (normal) */
}
.font-description{
    font-size: 1rem;
    font-weight: 300; /* Light */
}
/* -------------------------------
   HEADER SECTION
-------------------------------- */
.header-section{
    position: absolute;
    z-index: 100;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: transparent;
}
/* HEADER LOGO*/
.header-logo img{
    height: 80px;
}
/* HEADER NAV */
.header-nav ul{
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.header-nav ul li{
    position: relative;
}
.header-nav a{
    text-decoration: none;
    /*Tipo, tamaño y peso de letra*/
    color: var(--color-gray);
    padding: 1.5rem;
    transition: color ease 0.2s;
}
.header-nav a:hover{
    color: var(--color-white);
}

.header-toggle, .close-menu{
display: none;
}


/* -------------------------------
   FOOTER SECTION
-------------------------------- */
.footer-section{
    position: relative;
    display: flex;
    z-index: 10;
    height: 40vh;
    background-color: var(--color-dark);
    color: var(--color-white);
    align-items: center;
    justify-content: center;    
}

/*----------------------------- MOBILE ---------------------------------------*/
@media (max-width: 1500px) {
/* -------------------------------
   PRESETS
-------------------------------- */
    .container{
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
    }
    /* Text functions */
    .font-title{
        font-size: 2.5rem;
        font-weight: 900; /* Black */
    }
    .font-h1{
        font-size: 1.8rem;
        font-weight: 700; /* Black */
    }
    .font-h2{
        font-size: 1.1rem;
        font-weight: 500; /* Bold  */
    }
    .font-h3{
        font-size: 1rem;
        font-weight: 300; /* Light */
    }
    .font-body{
        font-size: 0.8rem;
        font-weight: 400; /* Regular (normal) */
    }
    .font-description{
        font-size: 0.8rem;
        font-weight: 300; /* Light */
    }

    /* -------------------------------
    HEADER SECTION
    -------------------------------- */
    .header-section {
        padding: 1rem 2rem;
    }
    /* HEADER LOGO*/
    .header-logo img{
        height: 60px;
    }
    /* HEADER NAV */
    .header-nav {
        position: relative;
    }

    /* ACTIVATED MENU*/
    body.noscroll {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
    .header-toggle {
        background: none;
        border: none;
        padding: 8px;
        cursor: pointer;
        display: block;
        margin-left: auto;
        fill: var(--color-gray);
        transition: fill ease 0.3s;
    }
    .header-toggle:hover{
        fill: var(--color-white);
    }
    .header-links {
        position: fixed;
        top: 0; left: 0;
        width: 100vw;
        height: 100vh;
        background-color: var(--color-main);        
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }
    .header-links ul {
        list-style: none;
        width: 100%;
        flex-direction: column;
    }
    .header-links li {
        margin: 20px 0;
        text-align: center;
    }
    .header-links a {
        color: var(--color-white);
        font-size: 1.5em;
        text-decoration: none;
        display: block;
        transition: background-color 0.2s, box-shadow ease 0.3s;
    }
    .header-links a:hover {
        background-color: var(--color-white);
        color: var(--color-main);
        box-shadow: 0 0 10px var(--color-maindark);
    }
        .header-links.active {
        display: flex;
    }
    .close-menu {
        height: 80px;
        width: 80px;
        text-align: center;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding-bottom: 0.4rem;
        display: flex;
        position: relative;
        background: none;
        border: none;
        border-radius: 50px;
        font-size: 3em;
        font-weight: 100;
        color: var(--color-white);
        cursor: pointer;
        z-index: 1100;
        transition: color ease 0.3s, background-color ease 0.3s, box-shadow ease 0.3s;
    }

    .close-menu:hover {
        color: var(--color-main);
        background-color:var(--color-white);
            box-shadow: 0 0 10px var(--color-maindark);
    }
    /* -------------------------------
    FOOTER SECTION
    -------------------------------- */
    .footer-section{
        display: flex;
        height: 40vh;
        background-color: var(--color-dark);
        color: var(--color-white);
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

/*
@media (max-width: 1500px) {
    body.noscroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
}
    .header-section{

   }
    .header-nav {
    position: relative;
   }

    .header-toggle {
        background: none;
        border: none;
        padding: 8px;
        cursor: pointer;
        display: block;
        margin-left: auto;
    }


    .header-links {
        position: fixed;
        top: 0; left: 0;
        width: 100vw;
        height: 100vh;
        background-color: var(--color-main);        
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }
    
    .header-links ul {
        list-style: none;
        width: 100%;
        flex-direction: column;
    }

    .header-links li {
        margin: 20px 0;
        text-align: center;
    }

    .header-links a {
        color: var(--color-white);
        font-size: 1.5em;
        text-decoration: none;
        display: block;
        transition: background-color 0.2s;
    }

    .header-links a:hover {
        background-color: var(--color-white);
        color: var(--color-main);
    }

    .header-links.active {
        display: flex;
    }
}
    */