:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-black-grey: #4a4d4f;
    --color-light-grey: #efeeea;
    --color-silver-grey: #e8e7e4;
    --color-green: #20b885;
    --color-yellow: #ffcb36;
    --color-light-yellow: #f9db87;

    --color-back-black: #000000;
    --color-back-dark-grey: #404041;
    --color-back-medium-grey: #636366;
    --color-back-light-grey: #f2f2f2;
    --color-back-white: #ffffff;


    --color-skill-yellow: #f6d059;
    --color-skill-light-yellow: #f9db87;
    --color-skill-blue: #41495e;
    --color-skill-light-blue: #636e84;
    --color-skill-aqua: #79adb2;
    --color-skill-light-aqua: #99dadf;

    --page-font: "Lato";
    --page-font-size: 20px;
    --page-font-size-micro: 9px;
    --page-font-size-small: 14px;
    --page-title-size: 50px;
    --page-title-size-small: 30px;
    --page-subtitle-size: 30px;
    --page-subtitle-size-small: 24px;
    --page-normal-size: 1rem;
    --page-normal-size-small: 1rem;
    --page-normal-size-very-small: 0.7rem;

    --padding-space: 20px;
    --padding-space-medium: 30px;
    --padding-no-space: 0px;
    
    --margin-space: 20px;
    --margin-space-large: 50px;

}

/*FORMATO DE PAGINA*/
*{
    font-family: var(--page-font);
}

body {
    background-color: var(--color-back-black);
    font-size: var(--page-font-size-small);
}

a{
    text-decoration: none;
}


/*TEXTOS*/
.mayusculas {
    text-transform: uppercase;
}

.camelCase {
    text-transform: capitalize;
}

/*TITULOS Y TEXTOS*/
.greenTitle {
    color: var(--color-green);
}

.yellowTitle {
    color: var(--color-yellow);
}

.whiteTitle {
    color: var(--color-white);
}

.blackTitle {
    color: var(--color-black);
}

.darkGrayTitle {
    color: var(--color-black-grey);
}

.tituloPrincipal{
    font-size: var(--page-title-size-small);
    font-weight: bold;
    text-transform: uppercase;
}

.tituloSecundario{
    font-size: var(--page-subtitle-size-small);
}

.textoDescriptivo{
    text-align: center;
    font-size: var(--page-normal-size-small);
}

.textoDescriptivoChico{
    text-align: center;
    font-size: var(--page-normal-size-very-small);
}



/*ESPACIADOS*/
.noSidePadding {
    padding-left: var(--padding-no-space);
    padding-right: var(--padding-no-space);
}
.paddingRight{
    padding-right: var(--padding-space);
}
.noPaddingTop{
    padding-top: var(--padding-no-space);
}
.paddingTop{
    padding-top: var(--padding-space);
}
.paddingBottom{
    padding-bottom: var(--padding-space);
}


/*BOTONES*/
.buttonYellow {
    background-color: var(--color-yellow);
    border: 0px;
    color: var(--color-black);
}
.buttonYellow:hover {
    background-color: var(--color-light-yellow);
    border: 0px;
    color: var(--color-black);
}
.buttonYellow:active {
    background-color: var(--color-light-yellow) !important;
    border: 0px  !important;
    color: var(--color-black) !important;
}

/*AUXILIARES*/
.relativePosition{
    position: relative;
}

.atrasSiChico{
    z-index: 2;
}

.adelanteSiChico{
    z-index: 1;
}

.siempreAdelante{
    z-index: 100;
}

/*BARRA NAVEGACION*/
.logoMenu{
    max-height:60;
    padding-left: var(--padding-space);
}
.navbar{
    /*background-color: black;*/
    position: fixed;
    width: 100vw;
}
.navbar-nav{
    --bs-nav-link-hover-color: white;
}

.nav-toggler{
    background-color:white;
}
.nav-link{
    color: var(--color-white);
    padding-right: var(--padding-space)!important;
    font-size: 16px;
}
.nav-link-active{
    color: var(--color-yellow);
}
.nav-link:hover{
    color: var(--color-yellow);
}
.nav-link:disabled{
    color: var(--color-black-grey);
}
.nav-link::after{
    color: var(--color-white);
}
.nav-link-language {
    color: var(--color-black-grey);
}
.nav-link-language-active {
    color: var(--color-white);
}
.logoTecFooter{
    max-width: 100px;
}
.footerText{
    font-size: var(--page-font-size-micro);
    color: var(--color-white);
}



/*DEPENDIENTES DE TAMAÑO*/
@media (max-width: 575.98px) { 

    .atrasSiChico{
        z-index: 1;
    }
    
    .adelanteSiChico{
        z-index: 2;
    }
    

}

@media (min-width: 768px) { 

    body{
        font-size: var(--page-font-size);
    }

    .tituloPrincipal{
        font-size: var(--page-title-size);
    }
    
    .tituloSecundario{
        font-size: var(--page-subtitle-size);
    }


    .textoDescriptivo{
        font-size: var(--page-normal-size);
    }
}