/* =====================================
   RESET
===================================== */

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body{
	font-family:Arial, Helvetica, sans-serif;
}

/* =====================================
   CONTENEDOR MENU
===================================== */

.contenedor-menu{

	background-color:#fff;

	border-radius:30px;

	max-width:1700px;

	width:100%;

	min-height:72px;

	margin:auto;

	padding:0 25px;

	display:flex;

	align-items:center;

	justify-content:center;

	position:relative;

	z-index:9999;

	box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

/* =====================================
   MENU PRINCIPAL
===================================== */

.menu{

	list-style:none;

	display:flex;

	align-items:center;

	justify-content:center;

	flex-wrap:wrap;
}

.menu li{
	position:relative;
}

.menu li a{

	display:block;

	padding:26px 22px;

	color:#134163;

	text-decoration:none;

	font-size:15px;

	transition:.3s;
}

.menu li a:hover{

	background:#134163;

	border-radius:20px;

	color:#fff;
}

/* =====================================
   SUBMENU
===================================== */

.menu li ul{

	position:absolute;

	top:72px;

	left:0;

	min-width:280px;

	list-style:none;

	background:#ffffff;

	display:none;

	box-shadow:0 5px 15px rgba(0,0,0,.15);

	border-radius:20px;

	overflow:hidden;
}

.menu li:hover > ul{
	display:block;
}

.menu li ul li a{

	color:#333;

	padding:14px 18px;
}

.menu li ul li a:hover{

	background:#134163;

	color:#fff;

	border-radius:0;
}

/* =====================================
   BOTON MENU MOVIL
===================================== */

.btn-menu{

	display:none;

	align-items:center;

	gap:10px;

	font-size:32px;

	color:#134163;

	cursor:pointer;

	font-weight:bold;

	user-select:none;
}

/* TEXTO MENU */

.btn-menu span{

	font-size:18px;

	font-weight:600;

	color:#134163;

	letter-spacing:1px;
}
/* =====================================
   RESPONSIVE TABLET / MOVIL
===================================== */

@media screen and (max-width:991px){

	.contenedor-menu{

		min-height:65px;

		padding:0 20px;

		justify-content:space-between;
	}

	/* BOTON */

	.btn-menu{
		display:flex;
	}

	/* MENU OCULTO */

	#menu{

		position:absolute;

		top:65px;

		left:0;

		width:100%;

		background:#ffffff;

		border-radius:0 0 20px 20px;

		overflow:hidden;

		max-height:0;

		opacity:0;

		visibility:hidden;

		transition:
		max-height .4s ease,
		opacity .3s ease;

		box-shadow:0 10px 30px rgba(0,0,0,0.15);
	}

	/* MENU ABIERTO */

	#menu.activo{

		max-height:1000px;

		opacity:1;

		visibility:visible;
	}

	/* MENU VERTICAL */

	.menu{

		flex-direction:column;

		width:100%;
	}

	.menu li{

		width:100%;
	}

	.menu li a{

		padding:18px 22px;

		border-bottom:1px solid rgba(0,0,0,.06);

		text-align:left;
	}

	.menu li a:hover{

		border-radius:0;
	}

	/* SUBMENU */

	.menu li ul{

		position:static;

		display:none;

		width:100%;

		min-width:100%;

		box-shadow:none;

		background:#f5f7fa;

		border-radius:0;
	}

	.menu li ul li a{

		padding-left:45px;

		color:#134163;

		font-size:14px;
	}

	/* DESACTIVA HOVER */

	.menu li:hover > ul{
		display:none;
	}

	/* ACTIVA CLICK */

	.menu li.abierto > ul{
		display:block;
	}
}

/* =====================================
   CELULARES
===================================== */

@media screen and (max-width:576px){

	.contenedor-menu{

		min-height:60px;

		padding:0 15px;

		border-radius:20px;
	}

	.btn-menu{

		font-size:28px;
		gap:8px;
	}
	.btn-menu span{

		font-size:16px;
	}

	#menu{

		top:60px;
	}

	.menu li a{

		font-size:14px;

		padding:16px 18px;
	}

	.menu li ul li a{

		padding-left:35px;

		font-size:13px;
	}
}