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

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



/* Z index
----------------------------------------*/
header {z-index:99;}
header .logotipo {z-index:2;}
header nav[class^="nav-main"] {z-index:1;}



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



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


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


/*------------------------------------------------------------------------ 
HEADER MAIN /////////////////////////////////////////////////////////////
------------------------------------------------------------------------*/
header.header-main {
	display:flex!important;
} 


	
	@media only screen and (max-width:620px) {
	header.header-main {
	justify-content:center!important;
	}}



/*------------------------------------------------------------------------ 
HEADER - NAV MAIN ///////////////////////////////////////////////////////
------------------------------------------------------------------------*/
header nav[class^="nav-main"]{
	justify-content:flex-end;
	padding-bottom:0px;
	padding-top:0px;
	}



/* Nav UL
----------------------------------------*/
header nav[class^="nav-main"] > ul {
	justify-content:flex-end;
	}



/* Nav Buttons
----------------------------------------*/
header nav[class^="nav-main"] > ul > li > *:where( a, span, label){
	transition:var(--add-transition-very-fast);
	}



/* large
----------------------------------------*/
header nav.nav-main-large {
	font-size: clamp(1.2rem, 1.2vw, 2rem);
	}
header nav.nav-main.large > ul > li[data-element='separator']{
	height:24px;
	}



/* Nomal
----------------------------------------*/
header nav.nav-main {
	font-size:inherit;
	}

header nav.nav-main > ul > li[data-element='separator']{
	height:22px;
	}



/* Medium
----------------------------------------*/
header nav.nav-main-medium {
	font-size: clamp(0.9rem, 1.1vw, 1.6rem);
	}
header nav.nav-main-medium > ul > li[data-element='separator']{
	height:19px;
	}



/* Small
----------------------------------------*/
header nav.nav-main-small {
	font-size: clamp(0.8rem, 1vw, 1.4rem);
	}
header nav.nav-main-small > ul > li[data-element='separator']{
	height:16px;
	}



/* xSmall
----------------------------------------*/
header nav.nav-main-xsmall {
	font-size: clamp(0.8rem, 1vw, 1.2rem);
	}
header nav.nav-main-xsmall > ul > li[data-element='separator']{
	height:10px;
	}


 /* --- / END */




/*------------------------------------------------------------------------ 
HEADER - NAV SECOND  //////////////////////////////////////////////////////
------------------------------------------------------------------------*/
nav.nav-second {
	display:none;
	width:100%;
	}

 /* --- / END */




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


/*---------------------------------------------------
//////////           PANEL MOVIL          //////////
---------------------------------------------------*/
.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;
	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;
	}


/*  IF: Social bar 
----------------------------------------*/
.panel-movil .social-bar label{
	display:none!important;
	}





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







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


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





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

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





/*---------------------------------------------------
//////////        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 -  ACTIONS TO SHOW  ////////////////////////////////////////////////
------------------------------------------------------------------------*/

/*---------------------------------------------------
//////////           PANEL TO SHOW         //////////
---------------------------------------------------*/
.panel-to-show{
	display:none;
	transition: transform 0.2s ease-in-out;
	}



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


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


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


.panel-to-show.slide-to-top {
	max-width:100vw;
	width:100vw;
	}



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

.panel-to-show.fade-in {
	max-width:100vw;
	width:100vw;
	}



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

.panel-to-show.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;
	}





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

	header.header-main li{
	display:none!important;
	}


	.panel-to-show{
	display:flex!important;
	}

	.nav-second{
	display:flex!important;
	}
	
	/*
	header.header-main li[data-element='btn-movil'] {
	display:flex!important;
	}
	*/


}


 /* --- / END */