/*------------------------------------------------------------------------ 
HEADER ///////////////////////////////////////////////////////////////////
------------------------------------------------------------------------*/

/* Z Index default
----------------------------------------*/
.movil-panel-menu.show {z-index:12;}
div.block-opacity.show {z-index:11;}
header {z-index:10!important;}
.movil-panel-menu {z-index:0;}
div.block-opacity {z-index:0;}


/* Z index
----------------------------------------*/
header {z-index:99;}
header .logotipo {z-index:2;}
header nav {z-index:1;}



/* 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 */
	padding-bottom:16px;
	padding-top:16px;
	width:100%;
	}


/* Altura
----------------------------------------*/
header {
	height:120px;
	}
	@media only screen and (max-width:2200px) {
	header{
	height:100px;
	}}
	@media only screen and (max-width:1600px) {
	header{
	height:90px;
	}}
	@media only screen and (max-width:620px) {
	header{
	height:70px;
	}}



/*---------------------------------------------------
//////////       LOGOTIPO HEADER      //////////
---------------------------------------------------*/


header .logotipo{
	align-items:center;
	display:flex;
	flex-flow:row wrap;
	flex-grow:0;
	height: 100%;
	justify-content:center;
	max-height:80px;
	width:auto;
	}


header .logotipo img {
	height: 100%; 
	width: auto;
	object-fit: contain;
	display: block;
	}


 /* --- / END */

/*------------------------------------------------------------------------ 
HEADER - NAV /////////////////////////////////////////////////////////////
------------------------------------------------------------------------*/

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



/* Nav UL
----------------------------------------*/
header nav > ul {
	align-items:center;
	align-content:center;
	display:flex;
	flex-flow:row wrap;
	flex-grow:9;
	gap:var(--gap-inside);
	justify-content:flex-end;
	list-style:none;
	margin:0px;	
	padding:0px;
	width:auto;
	}



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


/* Nav Buttons
----------------------------------------*/
header nav > ul > li > *:not( ul, .button){
	align-items:center;
	align-content:center;
	cursor:pointer;
	display:flex;
	flex-flow:row wrap;
	gap:var(--gap-inside);
	height:40px;
	line-height:40px;
	justify-content:flex-start;
	margin:0px;
	overflow:hidden;
	padding:0px 8px;
	position:relative;
	transition:var(----add-transition-very-fast);
	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{
	height:26px;
	width:26px;
	}


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



 /* --- / END */



/*------------------------------------------------------------------------ 
HEADER -  MOVIL //////////////////////////////////////////////////////////
------------------------------------------------------------------------*/


/*---------------------------------------------------
//////////           PANEL MENU          //////////
---------------------------------------------------*/
.panel-movil{
	display:none;
	}



.panel-movil{
	align-content:center;
	align-items:center;
	flex-flow:row wrap;
	height:auto;
	gap:var(--gap-inside);
	min-height:100vh!important;
	justify-content:flex-start;
	margin:0px;
	overflow-y:scroll!important;
	padding:40px 8vw!important;
	position:fixed;
	transition:all 0.22s;
	transition-delay:0.16s;
	transition-timing-function:ease-in-out;
	bottom:auto;
	left:auto;
	right:auto;
	top:0px;
	}


/* Ancho
----------------------------------------*/
.panel-movil{
	max-width:820px;
	width:80vw;
	}




/*  IF: boton close esta dentro
----------------------------------------*/
.panel-movil .btn-close-menu-movil{
	display:flex!important;
	position:absolute;
	bottom:auto;
	left:auto;
	top:20px;
	right:20px;
	}






/*---------------------------------------------------
//////////       BUTTON MOVIL OPEN       //////////
---------------------------------------------------*/
/* Escondemos
------------------------------------------*/
header li[data-element='btn-movil'],
.btn-movil,
.btn-movil + label  {
	display:none;
	}






/*---------------------------------------------------
//////////         BLOCK OPACITY        //////////
---------------------------------------------------*/
div.block-opacity {
	visibility:hidden;
	}


div.block-opacity {
	background-color:var(--color-black);
	display:block;
	height:100vh;
	opacity:0.6;
	transition:all 0.18s;
	position:fixed!important;
	bottom:0px;
	left:0px;
	right:0px;
	top:0px;
	max-width:100%;
	transition:all 0.16s;
	/*transition-delay:0.16s;*/
	visibility:hidden;
	width:100vw;
	}


/* ACTION Show
----------------------------------------*/
div.block-opacity.show{
	visibility:visible!important;
	opacity:0.6!important;
	}





/*---------------------------------------------------
//////////         BODY LOCK        //////////
---------------------------------------------------*/

/* ACTION Lock
----------------------------------------*/
body.lock{
	position:fixed!important;
	}





/*---------------------------------------------------
//////////   ACTIVAMOS ELEMENTOS MOVILES   //////////
---------------------------------------------------*/
@media only screen and (max-width:1200px) {

	header{
	padding-bottom:2px;
	padding-top:2px;
	}

	header li:not(li[data-element='btn-call-to-action']){
	display:none;
	}


	.panel-movil{
	display:flex!important;
	}


	header li[data-element='btn-movil'],
	.btn-movil +label  {
	display:flex!important;
	}



}

 /* --- / END */

/*------------------------------------------------------------------------ 
HEADER -  MENU MOVIL  ////////////////////////////////////////////////////
------------------------------------------------------------------------*/
ul.menu-movil,
ul.menu-movil-second {
		align-items:center;
		align-content:center;
		display:flex;
		justify-content:flex-start;
		flex-flow:row wrap;
		height:auto;
		list-style:none;
		max-width:100%;
		margin:0px;
		padding:0px;
		width:100%;
		}



ul.menu-movil li,
ul.menu-movil-second li{
	align-items:center;
	align-content:center;
	display:flex;
	flex-flow:row wrap;
	height:auto;
	justify-content:flex-start;
	margin:0px;
	padding:0px;
	width:100%;
	}


/*---------------------------------------------------
//////////         MENU MOVIL BASE      //////////
---------------------------------------------------*/
.menu-movil-base ul.menu-movil,
.menu-movil-base ul.menu-movil-second{
	gap:var(--gap-inside);
	}




/* Botones
----------------------------------------*/
.menu-movil-base ul.menu-movil > li > *:not(ul),
.menu-movil-base ul.menu-movil > li > *:not(ul):hover,
.menu-movil-base ul.menu-movil-second  li > *,
.menu-movil-base ul.menu-movil-second  li > *:hover{
	align-items:center;
	align-content:center;
	cursor:pointer;
	display:flex;
	flex-flow:row wrap;
	gap:var(--gap-small);
	height:40px;
	line-height:40px;
	justify-content:flex-start;
	margin:0px 0px;
	position:relative;
	transition:var(----add-transition-very-fast);
	text-align:left;
	text-decoration:none;
	text-overflow:ellipsis!important;
	user-select: none;
	white-space:nowrap;
	width:100%;
	}


.menu-movil-base ul.menu-movil > li > *:hover{
	text-decoration:none;
	}



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







 /* --- / END */

/*------------------------------------------------------------------------ 
HEADER -  ACCIONES ///////////////////////////////////////////////////////
------------------------------------------------------------------------*/


/* -------------------------------------
+++     SHOW ALL    ////////////////
-------------------------------------*/

.panel-movil.show{
	display:flex!important;
	visibility: visible!important;
	opacity:1.0!important;;
	position:fixed!important;
	transform:translateX(0vw)!important;
	transform:translateY(0vw)!important;
	z-index:99!important;
	}




/* -------------------------------------
+++     SLIDE TO LEFT  ////////////////
-------------------------------------*/
.panel-movil.slide-to-left {
	opacity:1.0;
	right:0px;
	transform:translateX(100vw);
	z-index:12;
	}


/* -------------------------------------
+++     SLIDE TO RIGHT ////////////////
-------------------------------------*/
.panel-movil.slide-to-right {
	opacity:1.0;
	left:0px;
	transform:translateX(-100vw);
	z-index:12;
	}


/* -------------------------------------
+++     SLIDE TO TOP ////////////////
-------------------------------------*/
.panel-movil.slide-to-top {
	opacity:1.0;
	top:0px;
	transform:translateY(100vH);
	z-index:12;
	}


/* -------------------------------------
+++     FADE IN /////////////////////
-------------------------------------*/
.panel-movil.fade-in {
	opacity:0.0;
	top:0px;
	z-index:0;
	}


 /* --- / END */