@charset "UTF-8";
/* CSS Document */

:root{

	--header-font-size:0.9rem;

	--nav-font-weight:300;
	--nav-letter-spacing:0.03rem;

	--preheader-padding-top:10px;
	--preheader-padding-bottom:10px;
	
	--nav-padding-top:20px;
	--nav-padding-bottom:20px;
	
}

header{
	position:absolute; /* el encabezado se coloca por encima del body */
	width:100%;
	z-index:20;
	padding: 0px;
	font-size: var(--header-font-size);
	box-sizing:border-box;
}

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

#pre-header {
  background-color: var(--color1);
  border-bottom:none;
  padding-top: var(--preheader-padding-top); 
  padding-bottom: var(--preheader-padding-bottom); 
}

#pre-header p{
	color:var(--color-blanco);
	margin-bottom:0px;
}

#pre-header a{
	color:var(--color-blanco);
}

.preheader-icon{
	filter:brightness(0%) saturate(0%) invert(1);
}

/*--------------*/
/*- NAVEGACIÓN -*/
/*--------------*/

#navegacion {
  background-color: transparent;
  border-bottom:none;
  padding-top: var(--nav-padding-top);
  padding-bottom: var(--nav-padding-bottom); 
}

/*-----------*/
/*- NAVLINK -*/
/*-----------*/

.navlink{
	display: flex;
	flex-direction: row;
	align-items: center;
	font-weight: var(--nav-font-weight);
	letter-spacing:  var(--nav-letter-spacing);
	color:var(--color1);
	gap:5px;
}

.navlink:hover{
	color:var(--color-blanco);
}

.icon-submenu-nav{
	margin-bottom: -2px;
	filter:brightness(0%) saturate(0%);
}

.navlink:hover>.icon-submenu-nav{
	margin-bottom: -2px;
	filter:brightness(100%) saturate(100%);
}

.cerrado .icon-submenu-nav{
	transform:rotate(0deg);
	transition: 0.2s;
}

.abierto .icon-submenu-nav{
	transform:rotate(60deg);
	transition: 0.2s;
}

/*------------------*/
/*- CALL TO ACTION -*/
/*------------------*/

.call-to-action{
	padding: 6px 12px;
	font-weight: var(--nav-font-weight);
	letter-spacing:  var(--nav-letter-spacing);
	color: var(--color-blanco);
	background-color: var(--color1);
}

.call-to-action:hover{
	color: var(--color-blanco);
	background-color: var(--color-negro);
}

/*----------------------*/
/*- DETECTOR DE CIERRE -*/
/*----------------------*/



.detector-cierre{
	display: flex;
	position: absolute;
	top:0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: transparent;
	z-index:0;
}