:root{
    --max-width-global: 1200px;
    --gap-grid-body: 5px;    

    --border-test: none;
    --fondo-test: none;
   
    --border-test: 1px solid black;
    --fondo-test: rgba(10,10,10,0.1);
/*
    */    

    --fondo-header: rgba(131, 0, 0,0.6);
    --fondo-menu: rgba(0, 52, 131, 0.5);
    --fondo-footer: rgba(131, 79, 0, 0.5);

    --height-header: 27px;
    --height-menu: 100px;
    --height-footer: 100px;

    --posicion-menu: 32px;

    --padding-tablet: 0 25px;
    --padding-mobil: 0 10px;
}
*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0; 
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}

body{

}

/********************************************************/

.fondo-test{
    background-color: var(--fondo-test);
    border: var(--border-test);
}

/********************************************************/

.grid{    
    display: grid;
    gap: var(--gap-grid-body);    
}

.container{    
    max-width: var(--max-width-global);
    margin:0px auto;
    height: 100%;
    
}
@media all and 
(max-width: 1250px) and 
(min-width: 0px) {
    .container{ 
        padding:var(--padding-tablet);
    }
}
@media all and 
(max-width: 600px) and 
(min-width: 0px) {
    .container{ 
        padding:var(--padding-mobil);
    }
}

.sticky{
    position: sticky;
    top: 0;
}

.sticky-var{
    position: sticky;    
    top: calc(var(--height-header) + var(--gap-grid-body))
}

/********************************************************/

.config-grid-header{
    height: var(--height-header);
    background-color: var(--fondo-header);    
}

.config-grid-menu{
    height: var(--height-menu);
    background-color: var(--fondo-menu);           
}

.config-grid-footer{
    height: var(--height-footer);
    background-color: var(--fondo-footer);           
}

.config-header{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between;          
    flex-wrap: nowrap;
    
}

.config-menu{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between;      
    flex-wrap: nowrap;
}

.config-footer{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between;      
    flex-wrap: nowrap;
}


/********************************************************/