/* --------------------------------------------------
------------------------------------------- BASE ---
---------------------------------------------------*/
/* 00 - Z index y order
------------------------------*/
header {z-index:99;}

header .logotipo {z-index:2;}
header nav {z-index:1;}



/* 01 General
------------------------------*/
header {
	align-items:center;
	align-content:center;
	display:flex;
	flex-flow:row wrap;
	height:auto;
	justify-content:space-between;
	gap:var(--gap-inside);
	max-width:100%;
	overflow-x:visible;/* necesary */
	width:100%;
	}




/* Altura
------------------------------*/
header {
	height:120px;
	}



/* Logotipo
------------------------------*/
header a.logotipo{
	align-items:center;
	display:flex;
	flex-flow:row wrap;
	flex-grow:0;
	height:auto;
	justify-content:center;
	width:auto;
	}



/*  Logotipo size
------------------------------*/
header a.logotipo img{
	display:flex;
	height:60px;	
	width:120px;	
	}



/*--------------------------------------------------
NAV ////////////////////////////////////////////////
---------------------------------------------------*/
header nav{
	align-items:center;
	display:flex;
	flex-flow:row wrap;
	flex-grow:9;
	justify-content:flex-end;
	height:auto;
	position:relative;
	width:auto;
	}


/* Button close menu
------------------------------*/
header nav .btn-close-menu-movil{
	position:absolute!important;
	bottom:auto;
	left:auto;
	right:20px;
	top:20px;
	}


/* NAV UL
------------------------------*/
header nav > ul {
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	flex-grow:1;
	justify-content:flex-end;
	list-style:none;
	margin:0px;	
	padding:0px;
	width:auto;
	}


/* NAV UL LI
------------------------------*/
header nav > ul > li,
ul.menu-dropdown > li{
	align-items:center;
	align-content:center;
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	height:auto;
	justify-content:center;
	list-style:none;
	margin:0px;	
	padding:0px;
	position:relative;
	text-align: center;
	width:auto;
	}


/* Buttons
------------------------------*/
header nav > ul > li > *:not( ul, .button),
ul.menu-dropdown > li > *:not(ul){
	align-items:center;
	align-content:center;
	cursor:pointer;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	gap:2px;
	height:40px;
	line-height:40px;
	justify-content:flex-start;
	margin:0px;
	overflow: hidden;
	padding:0px 8px;
	position:relative;
	transition:all 0.12s;
	text-decoration:none;
	text-overflow:ellipsis!important;
	user-select: none;
	white-space:nowrap;
	width:auto;
	}




header nav > ul > li > a {
	cursor:pointer;
	}


header nav > ul > li > a:hover{
	text-decoration:none;
	}


/* Buttons + icons
------------------------------*/
header nav > ul > li > *:not(.button) .svg-icon,
ul.menu-dropdown > li > * .svg-icon,
ul.menu-dropdown li[data-seccion='back'] > label .svg-icon{
	height:24px;
	width:24px;
	}


/* Separator
------------------------------*/
header nav > ul > li[data-element='separator']{
	margin:0px 10px;
	min-width:1px;
	width:1px!important;
	}



/*                                       
------------------------------------------  2600 ---
--------------------------------------------------*/
@media only screen and (max-width:2600px) {

	header{
		height:100px;
		}

}



/*                                       
------------------------------------------  1600 ---
--------------------------------------------------*/
@media only screen and (max-width:1600px) {

	header{
		height:90px;
		}

}



/*                                       
-------------------------------------  BREAK 920 ---
--------------------------------------------------*/
@media only screen and (max-width:920px) {

	header{
	height:auto;
	justify-content:center;
	padding-bottom:10px;
	padding-top:10px;
	}
	header nav{
	width:100%;
	}
	header nav > ul{
	justify-content:center;
	}


}


/*                                       
------------------------------------------  820 ---
--------------------------------------------------*/
@media only screen and (max-width:820px) {

	header a.logotipo img{
		height:50px;
		width:161px;
		}

}


/*                                       
------------------------------------------  720 ---
--------------------------------------------------*/
@media only screen and (max-width:720px) {

	header a.logotipo img{
		height:40px;
		width:128px;
		}

}


/*                                       
-------------------------------------  MOVIL 620 ---
--------------------------------------------------*/
@media only screen and (max-width:620px) {

	header {
		align-items:center;
		height:70px;
		justify-content:space-between!important;
		overflow-x:visible;
		position:initial;
		left:0px;
		top:0px;
		}

	header a.logotipo img{
		height:50px;
		width:161px;
		}








}

/* --------------------------------------------------
---------------------------------- IF CENTER BASE ---
---------------------------------------------------*/
/*

1 ... Agregar la clase center a header
2 ... Agregar segundo menu (ul) dentro de nav


*/
/* 00 - Z index y order
------------------------------*/

header.center nav ul.menu-1 {order:3;}
header.center nav .logotipo {order:2;}
header.center nav ul.menu-2 {order:1;}



header.center  {
	justify-content:space-between;!important;
	}



/* Logotipo
------------------------------*/
header.center .logotipo {
	margin-left:-100px;
	position:absolute;
	bottom:auto;
	top:10px;
	left:50%;
	right:auto;
	}


/* nav
------------------------------*/
header.center > nav{
	justify-content:space-between;
	}


header.center > nav > ul  {
	border:1px solid red;
	max-width:38%;
	width:30%;
	}

header.center > nav > ul.menu-1  {
	justify-content:flex-start;
	}

header.center > nav > ul.menu-2  {
	justify-content:flex-end;
	}


/*                                       
-------------------------------------  MOVIL 620 ---
--------------------------------------------------*/
@media only screen and (max-width:620px) {

	header.center .logotipo {
		margin-left:0px;
		position:relative;
		bottom:auto;
		top:auto;
		left:auto;
		right:auto;
		}

	header.center > nav{
		justify-content:flex-start;
		}
	
	header.center > nav > ul  {
		max-width:100%;
		width:100%;
		}



}




/*--------------------------------------------------
IF DROPDOWN  ///////////////////////////////////////
---------------------------------------------------*/