/* ==========================================================================
   ESTRUCTURA DE CABECERA Y LOGO
   ========================================================================== */
.site-header {
	background: var(--bg);
	width: 100%;
	position: relative;
	z-index: 2;
}

.site-header > .wrap {
	max-width: var(--max-w);
	margin: 0 auto;
}

.title-area img {
	padding: 3% 0;
	max-width: 90%;
	margin: 0 auto;
	display: block;
}

.site-description { display: none; }

#totalhead { transition: all 0.5s ease-out; }
#totalhead.sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 0;
	z-index: 98;
}

/* Redes / Barra Superior */
#social-container { background: var(--primary); }
#social-container a { color: #fff; }
#social-container img { margin: 0 5px; }
#social-container .telefono,
#social-container .redes {
	min-width: 210px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: var(--h-mobile);
}

.redes a:hover,
.formulariofull a:hover,
.telefono a:hover {
	filter: invert(88%) sepia(19%) saturate(7%) hue-rotate(116deg) brightness(99%) contrast(85%);
}

/* ==========================================================================
   NAVEGACIÓN MÓVIL
   ========================================================================== */
.mobmenu {
	background: #303030;
	cursor: pointer;
	color: #fff;
	font-weight: bold;
	font-size: 2em;
	padding: 10px;
}

.mobmenu img {
	margin: 0 auto;
	display: block;
	height: 24px;
}

.active,
.mobmenu:hover {
	background: var(--primary);
	color: #fff;
}

.nav-primary {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

.nav-primary ul {
	text-align: center;
	list-style: none;
	padding-left: 0;
	background: var(--nav-bg);
}

.nav-primary li,
.nav-primary li a {
	color: var(--nav-text);
	padding: 1em 0.666em;
	text-decoration: none;
	font-size: 1em;
	font-family: var(--font-nav);
	font-weight: var(--weight-nav);
 
}

.nav-primary li:hover {
	background: var(--primary);
	color: #fff;
	overflow: hidden;
}

.nav-primary li:hover > a { color: #fff; }

.nav-primary li ul {
	display: none;
	position: absolute;
	min-width: 140px;
	top: 67px;
	background: var(--accent);
}

.nav-primary li ul li,
.nav-primary li ul li a { color: #fff; }

/* ==========================================================================
   NAVEGACIÓN ESCRITORIO (896px)
   ========================================================================== */
@media screen and (min-width: 896px) {
	.site-header { background: rgba(255, 255, 255, 0.95); }

	.site-header > .wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 160px;
	}

	.header-widget-area {
		max-width: 75%;
		width: 100%;
	}

	.title-area {
		margin: 0;
		background: transparent;
		max-width: 25%;
	}

	.mobmenu { display: none; }

	.nav-primary {
		max-height: 100%;
		overflow: visible;
	}

	.nav-primary > ul {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
	}

	.nav-primary .wrap {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: var(--h-desktop);
	}

	.nav-primary .wrap > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		position: relative;
		z-index: 10;
		background: --nav-bg;
	}

	.nav-primary .wrap > ul > li {
		display: inline-block;
		padding: 0.7em 0.5em;
	}

	.nav-primary li:hover > ul { display: block; }

	.nav-primary li ul li { position: relative; }
	.nav-primary li ul li ul { right: -140px; top: 0; }
}